精選 · 開放 · 免費
Bitofdenim
一個極簡、編輯風格的升級再造丹寧產品電子商務網站。
EditorialPhotographicRestraintCalmPremium
01
設計氣質 DNA
永續丹寧編輯風格極簡
一本高端時尚編輯雜誌
02
色彩
#1A0A0EInk
#F2F2F1BG
#222222Muted
rgba(26,10,14,1.0)Line
高對比、無彩色調色盤，專注於排版與影像
03
字型
didone-serif · monospace
- display
280px · 700 - heading
28px · 300 - body
14px · 400
所有 UI 與內文使用 Space Mono · 首頁大標題品牌名稱使用 Meno Display Condensed · 導覽文字保持簡潔，使用大寫或句首大寫
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
充足的留白與內距
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
1px solid #1A0A0E
06
版面
1440container
12columns
24pxgutter
768 / 1024breakpoints
全寬首頁橫幅，採用不對稱配置與充足的留白空間
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
透明度淡入淡出 · 圖片幻燈片
細微的透明度變化 · 即時回應
08
組件
- button 極簡、有邊框的矩形，文字大寫
- card 無明顯卡片，產品圖片直接呈現
- input 簡潔的有邊框文字輸入框
- hero 大型字體搭配攝影棚拍攝的照片
09
文案語氣與禁用清單
- 語氣 靜謐、自信且具編輯感
- 標題風格 簡短、有力的片語，例如「No Denim Left Behind」
- 按鈕文案 簡潔且實用，例如「Shop All」或「OK!」
- 不使用漸層 — 面面截圖顯示的是平面、純色的背景
- 不使用容器的圓角 — 截圖顯示的是銳利的矩形邊緣
- 不使用陰影 — 截圖顯示的元素無立體效果
- 不使用明亮的強調色 — 截圖顯示的是嚴格的單色調色盤
- 不使用無襯線字體作為導覽字體 — 截圖顯示的是等寬字體
- 不使版面雜亂 — 截圖顯示的是充足的留白空間與極簡的元素
- 避免: 過多的形容詞
- 避免: 喧鬧或具侵略性的語言
- 避免: 雜亂的介面
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個極簡、編輯風格的升級再造丹寧產品電子商務網站。設計依賴高對比、無彩色的調色盤，背景為淺灰色（#F2F2F1），文字為近乎黑色（#1A0A0E）。首頁大標題使用巨大的 Didone 衬線展示字體，而所有其他 UI 元素使用等寬字體。關鍵色彩為 #F2F2F1 與 #1A0A0E。重要禁忌：避免使用漸層、避免在容器上使用圓角、避免以不必要的元素使版面雜亂。版面配置寬敞，留白充足，強調排版與攝影。
en · zh-CN · zh-TW · ja · ko