精選 · 開放 · 免費

Wearechaiboy

一個為當代茶品牌打造的、深色調、高品質的編輯式電子商務體驗。

01

設計氣質 DNA

一個為現代茶品牌設計的高端時尚雜誌編輯風格。

02

色彩

極致高對比的單色設計，以黑色畫布搭配白色字型，視覺重量依賴攝影作品。

03

字型

grotesque-sans

• display54px · 400
• body14px · 400
• small11px · 400

所有導覽與功能文字均使用大寫。 · 大型展示尺寸套用緊湊的字間距 (-1px)。

04

間距

緊湊且經過深思熟慮，運用大量的留白來強調編輯攝影。

05

表面 (圓角 / 陰影 / 邊線)

1px solid #AFAFAF 或 1px solid rgba(255,255,255,0.2)

06

版面

全出血的垂直畫布，具有嚴格的頁首/頁尾邊界與滾動跑馬燈。

07

動效與互動

浮動視窗覆蓋層與介面狀態變化使用平滑的透明度過渡。 · 推廣訊息使用線性滾動的跑馬燈。

細微的色彩轉變或透明度變化以指示互動性。 · 透過透明度或背景色過渡提供即時的視覺回饋。

08

組件

• button 幽靈或外框式，帶有細微的圓角，使用大寫文字與透明背景。
• card 以影像為焦點，介面極簡，依賴邊到邊的攝影圖片。
• chip 用於類別的小型外框徽章，帶有圓角。
• input 位於浮動視窗覆蓋層內、僅有底部邊框的簡潔文字輸入框。
• hero 全螢幕的沉浸式攝影，作為主要的視覺元素。

09

文案語氣與禁用清單

• 語氣 精緻、高端且直接。
• 標題風格 簡短、具衝擊力、全大寫的陳述，吸引目光。
• 按鈕文案 低調但清晰，常使用幽靈按鈕或簡單的底線文字。

• 不要使用多種品牌色彩——截圖顯示為嚴格的黑、白、灰單色調色盤。
• 不要使用裝飾性或手寫字體——截圖顯示為純粹的簡潔怪誕無襯線字體。
• 不要使用厚重的投影——截圖顯示為扁平、邊到邊的攝影，無視覺高度。
• 不要使用複雜的多色漸層——截圖顯示為純黑背景。
• 不要導覽文字使用小寫——截圖顯示頁首與頁尾的所有文字均為大寫。
• 不要使用圓角卡片邊框——截圖顯示為銳利、矩形的容器或全出血圖片。
• 避免: 避免使用多種色彩；嚴格保持單色調色盤。
• 避免: 避免裝飾性或手寫字體；維持簡潔、現代的美感。
• 避免: 避免厚重的投影或不必要的漸層。
• 避免: 避免雜亂的佈局；優先使用大型影像與留白。
• 避免: 避免俏皮或隨意的語氣。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko