精選 · 開放 · 免費

Build in Amsterdam

專精於旗艦級電商體驗的高階數位機構

agencyecommerce

Build in Amsterdam 網站截圖

↓ 下載設計系統包 (3 MB)在 OpenDesign 中開啟

原站: https://www.buildinamsterdam.com

📦 瀏覽包內檔案 →

01

設計氣質 DNA

數位機構Shopify 合作夥伴品牌建立高階電商

頂級時尚編輯風格與數位店面的結合

02

色彩

#C38133Accent

#000000Ink

#F2EFE6BG

rgba(0,0,0,1.0)Line

高對比單色調搭配溫暖中性色點綴

03

字型

grotesque-sans · transitional-serif

display86px · 400
body16px · 400
caption11px · 500

標題：Neue Haas Grotesk Display，緊湊的負值字距 · 內文：Reckless Neue 過渡襯線體，優雅且易讀 · 標籤：大寫 grotesque 無襯線體，標準字重

04

間距

4px

8px

16px

24px

32px

48px

64px

96px

100px

非對稱網格，右半部保留大量留白

05

表面 (圓角 / 陰影 / 邊線)

sm · 4px

md · 4px

lg · 100px

pill · 100px

按鈕與卡片使用 1px 實線黑色邊框

06

版面

1440container

12columns

35pxgutter

768 / 1024breakpoints

分割畫面：左側展示作品／作品集，右側包含主視覺文字與行動呼籲

07

動效與互動

100msmicro

250mssmall

500msmedium

cubic-bezier(0.45, 0.02, 0.09, 0.98)easing

作品疊加層的流暢透明度轉場 · 互動元素基於變形的懸停效果 · 作品項目的錯開揭示動畫

卡片與按鈕上的細微變形位移 · 透過透明度變化提供即時視覺回饋

08

組件

button 外框式矩形按鈕，大寫文字搭配細黑色邊框
card 以圖片為主的作品卡片，帶有懸停狀態，呈現為浮動疊加層
hero 巨型文字標題搭配襯線體內文與分割佈局

09

文案語氣與禁用清單

語氣自信、精緻且具權威感
標題風格 直接、陳述性的巨型大寫文字語句
按鈕文案 極簡的大寫文字標籤搭配細邊框

避免使用鮮豔飽和的顏色——截圖顯示為柔和的溫暖中性色搭配黑色點綴
避免四處使用圓角——截圖顯示為銳利的矩形按鈕，僅特定元素使用 4px 圓角
避免內文使用無襯線體——截圖顯示段落使用過渡襯線體（Reckless Neue）
避免使用置中文字對齊——截圖顯示左對齊與右對齊文字搭配非對稱網格
避免卡片使用陰影效果——截圖顯示平面邊框與簡潔邊緣，無陰影效果
避免使用裝飾性手寫字體——截圖僅顯示 grotesque 無襯線體與過渡襯線體
避免: 俏皮的語言
避免: 過多的標點符號
避免: 表情符號
避免: 驚嘆號
避免: 隨意的語氣

10

包內真實截圖

Build in Amsterdam — 桌面首屏（hero） — 桌面首屏（hero）

Build in Amsterdam — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Build in Amsterdam — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Build in Amsterdam — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

這是一家高階數位機構（Build in Amsterdam），專精於 Shopify Plus 電商開發。視覺識別以溫暖的米白色背景（#F2EFE6）為中心，搭配黑色（#000000）文字與標誌性琥珀色點綴（#C38133）。字體搭配使用 Neue Haas Grotesk Display 作為巨型標題，搭配緊湊的負值字距，內文則採用 Reckless Neue 過渡襯線體。佈局採用獨特的分割畫面方式，作品範例佔據左半部，品牌訊息則填滿右半部。關鍵限制：內文段落絕不使用無襯線體，避免置中佈局，並維持溫暖的中性色調，不引入冷色調的藍色或綠色。按鈕必須維持外框式設計，搭配 1px 細黑色邊框。琥珀色點綴僅出現在特定介面元素上，例如圓形選單觸發器。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko