精選 · 開放 · 免費
Lilnasx Jeanpaulgaultier
強調編輯攝影與粗獷主義排版的單色調奢華電商體驗。
PhotographicCurationPremiumBold TypographyEditorial
01
設計氣質 DNA
高級時尚前衛前衛奢華藝術性
具備強烈對比與大膽排版的高級時尚編輯型型錄。
02
色彩
#000000Ink
#222222Ink soft
#828282BG
#E0E0E0BG soft
rgba(0,0,0,1.0)Line
高對比度的單色調色盤,讓攝影主導視覺興趣。
03
字型
slab-serif · grotesque-sans · monospaced
- display
30px · 400 - body
16px · 400 - caption
11px · 400
所有主要標題使用自訂展示字型,以維持前衛的品牌識別。 · 導航與 UI 標籤採用嚴格的全大寫無襯線字體。 · 展示文字保持緊湊的行高,以符合編輯美學。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
基於 4px 的緊湊節奏,尊重產品展示的嚴格網格佈局。
05
表面 (圓角 / 陰影 / 邊線)
sm · 2px
md · 2px
lg · 2px
pill · 999px
用於網格與輸入框的 1px 實心黑色邊框。
0 0 5px 0 rgb(128, 128, 128)
06
版面
1440container
12columns
768 / 1024breakpoints
邊對邊的攝影,採用嚴格的雙欄網格展示產品。
07
動效與互動
150msmicro
200mssmall
320msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
彈窗疊加採用流暢的淡入效果。 · 互動元素採用細膩的變換過渡。
標準指標游標,大多數元素提供最小化的視覺回饋。 · 表單輸入框立即切換狀態。
08
組件
- button 全寬、實心黑色矩形,中央放置白色大寫文字。
- card 無邊框圖片卡片,文字與價格底部對齊。
- chip 不適用
- input 極簡輸入欄位,1px 黑色邊框,標籤左對齊且為大寫。
- hero 戲劇性的 50/50 分割畫面,採用全出血的編輯攝影。
09
文案語氣與禁用清單
- 語氣 自信、前衛、嚴格專業。
- 標題風格 簡短、有力、全大寫的語句或極簡產品名稱。
- 按鈕文案 直接、全大寫的指令,如「確定」或「登入」。
- 不要使用圓角——設計依賴銳利的粗獷主義矩形邊緣。
- 不要為卡片添加陰影——佈局採用扁平、無邊框的網格系統。
- 不要使用多色漸層——色調嚴格單色且高對比度。
- 不要導航使用小寫——設計嚴格執行所有 UI 標籤大寫。
- 不要按鈕周圍添加裝飾元素——介面依賴實心黑色區塊。
- 不要使用居中對齊的內文——佈局採用左對齊排版以確保可讀性。
- 避免: 俏皮的語言
- 避免: 柔和的漸層
- 避免: 友善的感嘆號
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
設計一個高級時尚奢華電商介面,呈現如同頂級編輯型型錄的感受。採用嚴格的單色調色盤(黑、白、灰),攝影提供所有視覺興趣。展示文字使用自訂粗襯線字體,UI 元素使用無襯線字體。維持粗獷主義美學,採用銳利的矩形按鈕、1px 黑色邊框與全出血攝影。確保所有導航與 UI 文字嚴格大寫。主要顏色為 #000000、#828282 與 #FFFFFF。避免俏皮元素、圓角與柔和漸層,以保持前衛的品牌識別。
en · zh-CN · zh-TW · ja · ko