精選 · 開放 · 免費
Ganni
一個高端時尚電子商務平台，以大膽的字體排印和高衝擊力攝影為特色。
fashion
01
設計氣質 DNA
Scandinavian大膽潮流驅動自信
一個大膽的極簡主義時尚編輯
02
色彩
#000000Ink
#686A6AInk soft
#F1F1F1BG
#F8F8F5BG soft
#F0F0F0BG quiet
rgba(0,0,0,0.1)Line
中性畫布，讓鮮豔的攝影作品驅動視覺活力。
03
字型
grotesque-sans
- display
26px · 500 - body
16px · 400 - small
14px · 400 - micro
12px · 400
導航和類別標籤通常使用全大寫字母。 · 標題使用混合大小寫或全大寫字母，並採用緊密字距。 · 內文使用標準句子大小寫。
04
間距
4px
8px
16px
20px
24px
32px
50px
以靈活的4px基礎格線，驅動一致的內部元件內距與佈局間距。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
標準互動元件採用實心1px黑色邊框。
rgba(0, 0, 0, 0.4) 0px 4px 8px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
一個流動的格線系統，能從全出血攝影適應到多欄位產品佈局。
07
動效與互動
100msmicro
150mssmall
400msmedium
cubic-bezier(0, 1, 0.5, 1)easing
標準介面狀態轉換採用流暢的0.15秒 ease-in 過渡效果。 · 較大元素移動採用0.8秒 cubic-bezier 過渡效果。
透過細微的背景或文字顏色過渡效果來指示狀態變化。 · 互動元件採用標準指向互動。
08
組件
- button 高對比度的實心色塊（通常是黑色背景搭配白色文字），無圓角。
- card 乾淨、結構化的產品展示佈局，以主圖像和極簡的文字資訊為特色。
- input 由底部邊框定義的極簡矩形輸入欄位。
- hero 全出血攝影圖像結合大字體與顯著的行動呼籲按鈕。
09
文案語氣與禁用清單
- 語氣 直接、簡潔且自信。
- 標題風格 簡短、有力，且常以特定大小寫風格呈現。
- 按鈕文案 清晰且具急迫感，常使用全大寫文字。
- 按鈕避免使用柔軟的圓角 — 螢幕截圖顯示的是銳利、矩形的介面元素。
- 避免依賴單一強烈的強調色 — 螢幕截圖顯示的是以攝影為主導的單色調色板。
- 避免使用細體或草書字體 — 螢幕截圖顯示的是粗體、實心的無襯線字體。
- 避免使用過多邊框使佈局雜亂 — 螢幕截圖顯示的是以乾淨留白定義元素。
- 導航避免使用低對比度文字 — 螢幕截圖顯示的是淺色背景上的深黑色文字。
- 標準介面元素避免使用裝飾性陰影 — 螢幕截圖顯示的是平坦、乾淨的美學。
- 避免: 過度裝飾的字體
- 避免: 次要色彩的過度使用
- 避免: 複雜的介面模式
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
GANNI 是一個高端的 Scandinavian 時尚電子商務平台，具有大膽、極簡的美學。設計大量依賴高品質的全出血攝影，背景是純粹、中性的黑色（#000000）與米白色（#F1F1F1）畫布，次要文字則使用柔和的灰色（#686A6A）。字體排印完全採用粗體 grotesque-sans 字體，導航和行動呼籲按鈕經常使用全大寫字母。複製此設計的關鍵限制包括：避免在按鈕和輸入欄位上使用圓角，確保整體使用銳利的矩形形狀，並避免使用任何與攝影圖像競爭的單一主導強調色。務必保持嚴格、乾淨的格線佈局與充足的負空間。
en · zh-CN · zh-TW · ja · ko