精選 · 開放 · 免費

Touchycoffee

一個充滿活力、富有表現力的 D2C 咖啡品牌，具有大膽的排版、鮮豔的色彩，以及古怪、不羈的個性。

01

設計氣質 DNA

一家位於本地、略帶古怪風格咖啡館的、大聲且手繪的招牌。

02

色彩

高對比、充滿活力且略顯混亂的調色板，依賴大膽的背景色塊和純黑的文字。

03

字型

display-script · monospaced

• display120px · 400
• heading50px · 400
• body20px · 400

為互動元素和區段標籤一致地套用 text-transform: uppercase。 · 為等寬字體文字保持緊湊、嚴格的 letter-spacing，讓字符網格顯露出來。 · 為展示型排版採用緊湊的行高，以創造密集且具衝擊力的文字區塊。

04

間距

鬆散且不規律，依賴於大而明顯的間距和 padding，而非嚴格的數學節奏。

05

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

粗黑線條（2-3px）或無邊框，強調原始、剪紙般的美學。

3px 3px 0px 0px rgba(0,0,0,1.0)

06

版面

大膽、不對稱的實心色塊相互疊加，無視嚴格的網格限制。

07

動效與互動

互動元素上的微妙 hover 縮放或濾鏡效果。 · 標準 DOM 元素在彈出視窗出現/消失時的過渡效果。

標準的指標游標，可能帶有微妙的亮度或縮放變化。 · 立即的視覺反饋，通常透過 CSS 過渡效果實現。

08

組件

• button 膠囊形狀，具有實心黑色背景和白色大寫等寬字體文字，通常帶有粗邊框。
• card 實心色塊，帶有圓角和粗黑邊框，作為獨立的視覺島嶼運作。
• chip 用於星級評分，以實心、粗壯的星星形式在彩色區塊內呈現。
• input 簡單的帶邊框欄位或行內文字輸入框，保持等寬字體。
• hero 巨大的、填滿螢幕的展示型手寫文字，佔據主要視覺區域。

09

文案語氣與禁用清單

• 語氣 古怪、自信、大聲且幽默。
• 標題風格 簡短、有力，且常以巨大的、填滿螢幕的手寫文字呈現。
• 按鈕文案 直接的、大寫的指令，如 'SEND' 或 'CLOSE'，使用大膽的等寬字體。

• 不要使用纖細、優雅的排版 — 截圖中顯示的是粗壯、大膽的等寬字體和厚重的展示型手寫字體。
• 不要依賴白色背景 — 截圖中顯示的是大膽的實心色塊，如棕色、粉紅色和藍色。
• 不要使用微妙的漸層 — 截圖中所有背景都使用平坦的實心色彩填充。
• 不要使用細微的 1px 邊框 — 截圖中所有元素都使用粗壯的 2-3px 黑色邊框。
• 不要使用小巧、精緻的圖示 — 截圖中顯示的是粗壯、實心的手繪或超大尺寸星星形狀。
• 不要使用乾淨、空曠的網格 — 截圖中顯示的是混亂的文字和彩色區塊重疊。
• 不要使用標準的首字母大寫 — 截圖中顯示的是大範圍、強烈地使用大寫的 text-transform。
• 避免: 避免微妙的漸層或柔和、複雜的調色板。
• 避免: 避免優雅、精緻的襯線字體或講究的排版。
• 避免: 避免沒有大膽色彩背景的空白空間。
• 避免: 避免標準、無趣的網格對齊，缺乏有趣的重疊效果。
• 避免: 避免細微、纖細的邊框或淡淡的陰影。
• 避免: 避免嚴肅、企業化或過於正式的語氣。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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