精選 · 開放 · 免費
Aimé Leon Dore
以電影級編輯攝影優先於 UI 元素的極簡高端時尚電商網站。
fashioneditorial
01
設計氣質 DNA
編輯風格生活美學極簡主義高端定位
高端傳承生活品牌的策展型藝廊
02
色彩
#181818Ink
#FFFFFFBG
#F7F7F7BG quiet
#E4E4E4Muted
rgba(228, 228, 228, 1.0)Line
以深黑、純白與淺灰構成的極簡單色調色盤，最大化編輯攝影的視覺衝擊力。
03
字型
geometric-sans · neo-grotesque-sans
- display
14px · 400 - body
14px · 400 - caption
10px · 400
品牌識別、導覽與互動標籤大量使用大寫字型 · 所有文字尺寸皆採用寬鬆字距以營造高端質感 · 簡潔寬間距排版搭配全出血攝影圖像
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
嚴謹的間距系統，浮動視窗與頂部導覽列內保持充足邊距以創造呼吸空間。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
極簡邊框僅用於區隔輸入欄位、按鈕與選單分隔線等獨立元素。
06
版面
1440container
12columns
24pxgutter
768 / 1024breakpoints
全出血沉浸式攝影搭配置中固定頂部導覽列覆蓋層，由大型簡潔矩形浮動視窗進行區隔。
07
動效與互動
200msmicro
400mssmall
500msmedium
cubic-bezier(0.455, 0.03, 0.515, 0.955)easing
浮動視窗出現時的平滑淡入與變形過渡效果 · 次要 UI 元素的線性滑動動畫
互動文字與圖示的細膩透明度變化或簡潔色彩反轉。 · 透過簡潔狀態變化提供即時觸覺回饋。
08
組件
- button 簡潔矩形按鈕，主要操作採用實心黑底，次要操作採用白底黑邊設計。
- card 主要視圖中不可見，但根據編輯風格推測應為無邊框網格佈局。
- chip 無此元件。
- input 僅底線邊框的簡潔輸入欄位。
- hero 全出血電影級影片或攝影主視覺，搭配固定頂部導覽列覆蓋層，展示品牌名稱與極簡導覽圖示。
09
文案語氣與禁用清單
- 語氣 精緻高端且刻意低調。
- 標題風格 大寫、寬間距、簡潔且高度結構化。
- 按鈕文案 直接、大寫且功能明確。
- 避免使用圓角——截圖顯示銳角矩形 UI 元素如按鈕與浮動視窗
- 避免添加彩色點綴——截圖顯示嚴格的單色中性調色盤
- 避免使用厚重陰影——截圖顯示平面簡潔表面無深度效果
- 避免使用小寫導覽文字——截圖顯示主要連結採用大寫寬間距
- 避免使用趣味裝飾字體——截圖顯示嚴謹功能性無襯線與幾何字型
- 避免使用複雜網格邊框——截圖顯示以留白驅動的簡潔區隔
- 避免: 鮮豔飽和色彩
- 避免: 圓角或柔和形狀
- 避免: 密集擁擠版面
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
設計一個以編輯攝影為重點的高端電商網站。採用深黑(#181818)、純白(#FFFFFF)與淺灰(#E4E4E4)構成的嚴謹單色調色盤，讓全出血攝影引導整體體驗。字型應大量採用簡潔幾何無襯線與新怪誕體字型，頻繁使用大寫與寬鬆字距傳達奢華感。關鍵互動與按鈕應保持銳利矩形極簡設計。務必避免圓角、飽和色彩、趣味字型與厚重陰影，以維持精緻如藝廊的氛圍。
en · zh-CN · zh-TW · ja · ko