精選 · 開放 · 免費

Represent

專注於強烈字體排印與全出血攝影的極簡、大膽時尚編輯網站。

01

設計氣質 DNA

以簡潔編輯雜誌形式呈現的高端街頭服飾型錄。

02

色彩

高對比單色調，搭配單一深紅色強調作為重點。

03

字型

grotesque-sans

• display48px · 700
• h232px · 600
• body16px · 400
• caption12px · 400

導覽、標籤與次要 UI 元素使用大寫字母。 · 大型展示字體保持緊湊的字間距。

04

間距

以 8px 為基準，搭配 4px 微調步進，適用於緊湊的 UI 元素。

05

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

1px solid rgba(0,0,0,0.1)

rgba(0, 0, 0, 0.3) 0px 0px 24px 0px

06

版面

全出血攝影搭配覆疊文字，過渡至簡潔網格用於產品列表。

07

動效與互動

在 hover 和 scroll 時進行流暢的透明度與變形轉換。 · 圖片過渡使用細微淡入淡出效果。

互動元素進行細微的透明度變化或輕微縮放。 · 透過轉換效果提供即時視覺回饋。

08

組件

• button 實心黑色矩形按鈕，搭配白色大寫文字，偶爾使用膠囊形變體。
• card 簡潔產品卡片，無邊框，聚焦於影像呈現。
• chip 用於篩選的大寫、粗體文字標籤。
• input 極簡輸入框，僅底部設有 1px 實線邊框。
• hero 全螢幕、高衝擊力的攝影主視覺，搭配覆疊字體排印。

09

文案語氣與禁用清單

• 語氣 極簡、直接、高級。
• 標題風格 粗體、大寫、緊湊。
• 按鈕文案 行動導向、大寫、高度可見。

• 勿使用裝飾性字體 — 範例截圖顯示嚴格依賴粗體 grotesque-sans 字體。
• 勿在主要 UI 元素上使用圓角 — 範例截圖顯示銳利的矩形邊緣。
• 勿使用多色調色盤 — 範例截圖顯示嚴格的單色調基底，僅搭配單一紅色強調。
• 勿在卡片上使用細微陰影 — 範例截圖顯示平面或特定厚重陰影。
• 勿在主要導覽中使用混合大小寫 — 程式碼顯示 UI 標籤嚴格使用大寫。
• 勿使用柔和粉彩背景 — 範例截圖顯示純白或淺灰（#F7F7F7）基底。
• 避免: 手寫字體
• 避免: 過度繽紛的漸層
• 避免: 雜亂的佈局

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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