精選 · 開放 · 免費
Balenciaga
一個極簡的高端時尚電商平台，透過電影級攝影與極簡UI營造出奢華的編輯氛圍。
fashionluxury
01
設計氣質 DNA
高端時尚極簡主義前衛編輯風格奢華
彷彿一本極簡風格的高端時尚雜誌頁面，化為沉浸式數位購物體驗。
02
色彩
#000000Ink
#FFFFFFBG
#767676Muted
rgba(0,0,0,1)Line
高對比度的單色調色盤，優先考慮影像呈現，並維持嚴格的極簡奢華美學。
03
字型
sans-serif
- display
22px · 700 - heading
14px · 400 - body
12px · 400
所有主要導航與互動文字必須使用大寫。 · 主要UI字體須採用 grotesque sans-serif 類別。 · 為區塊標題等高衝擊力的展示文字使用較寬字距（約0.36px）。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
所有間距遵循嚴格統一的4px基準單位，打造精準結構化的佈局。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
1px solid #000000
rgb(0, 0, 0) 0px 0px 0px 0px · rgb(170, 170, 172) 0px 0px 0px 0px
06
版面
1440container
12columns
16pxgutter
768 / 1024breakpoints
全寬沉浸式網格，讓大尺度攝影主導視口，將標準UI元素推向外圍。
07
動效與互動
150msmicro
250mssmall
350msmedium
cubic-bezier(0.32, 0, 0.67, 0)easing
彈窗與覆蓋層過渡使用350ms時長與銳利的 cubic-bezier 緩動曲線。 · 按鈕互動依賴快速的150ms陰影或顏色過渡提供細膩反饋。 · 頁面級狀態變化透過0.25秒的 ease-out 透明度漸變標示。
互動元素的細微透明度或陰影過渡。 · 按下時立即產生視覺狀態變化。
08
組件
- button 嚴格矩形並帶有銳利邊角，提供高對比填充（黑色）或描邊（白底黑框）變體。
- card 用於產品圖片的簡潔無邊框容器，通常採用純白背景。
- input 無可見邊框的極簡文字輸入框，僅以佔位文字與細微底線定義。
- hero 全出血的電影級圖片或影片主視覺，橫跨整個視口寬度，上方覆蓋最小化的置中UI。
09
文案語氣與禁用清單
- 語氣 權威、極簡且洗練。
- 標題風格 簡短、宣告式，並採用大寫無襯線字體。
- 按鈕文案 直接且具指令性，使用大寫文字。
- 不要在UI元素上使用border-radius — 螢幕截圖顯示嚴格矩形的按鈕與卡片。
- 不要為卡片或面板添加陰影 — 螢幕截圖顯示具有銳利邊框的平面表面。
- 不要在UI文字中使用襯線字體 — 螢幕截圖顯示一致使用無襯線字體排版。
- 不要將大寫文字用於內文 — 螢幕截圖顯示大寫僅用於導航與標題。
- 不要在UI中使用多種顏色 — 螢幕截圖顯示嚴格的黑、白、灰調色盤。
- 不要為按鈕添加圓角 — 螢幕截圖顯示銳利、0px半徑的按鈕。
- 避免: 友善或休閒的語言
- 避免: 過多的描述性文字
- 避免: 圓潤或俏皮的視覺元素
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Balenciaga 是一個高端時尚電商平台，採用極簡的單色UI，讓全出血的電影級攝影主導使用者體驗。設計依賴嚴格的黑、白、灰色彩系統（墨黑 #000000、背景 #FFFFFF、柔和灰 #767676）與簡潔的無襯線字體系統。UI元素極為洗練，具有銳利矩形按鈕與最小化邊框。關鍵規則：1）維持嚴格矩形UI，零border-radius。2）所有主要導航與標題保持大寫。3）絕不為卡片或面板添加陰影，改用簡潔邊框。4）彈窗過渡使用銳利的 cubic-bezier(0.32, 0, 0.67, 0) 緩動曲線。
en · zh-CN · zh-TW · ja · ko