精選 · 開放 · 免費

Fableandmane

一個為手工香氛產品打造的簡潔、優質電商介面。

01

設計氣質 DNA

一個極簡的高端藥妝櫃

02

色彩

溫暖米白色背景上的高對比度單色文字，搭配單一高彩度紅色強調色用於主要操作。

03

字型

transitional-serif · geometric-sans

• display72px · 800
• headline56px · 700
• body16px · 400

使用過渡襯線體（transitional-serif）作為富有表現力、高衝擊力的標題。 · 使用幾何無襯線體（geometric-sans）作為所有功能性與內文字體。

04

間距

以一致的 4px 為基準單位，並保留充裕的留白以維持優質、無雜訊的視覺感受。

05

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

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

rgba(0, 0, 0, 0.25) 0px 4px 20px 0px · rgba(0, 0, 0, 0.05) 0px -4px 10px 0px

06

版面

置中、單欄佈局，聚焦產品，並配有充裕的水平內距。

07

動效與互動

模態視窗與頁面元素採用平滑的淡入過渡效果。 · 互動元素在 hover 狀態下有細微的轉換效果。

按鈕與連結有細微的背景色或透明度變化。 · 透過 transform 或透明度變化提供即時視覺回饋。

08

組件

• button 膠囊形的主要按鈕，採用高彩度紅色背景與白色文字；次要按鈕為外框樣式，使用深色文字。
• card 簡潔的產品卡片，配有細微邊框或柔和陰影，圓角為 24px。
• chip 不適用 - 在分析的模態視窗/主視覺狀態中未顯著出現。
• input 不適用 - 在分析的模態視窗/主視覺狀態中未顯著出現。
• hero 分割式佈局，一側為大型字體，另一側為產品圖片。

09

文案語氣與禁用清單

• 語氣 精緻、優雅且平易近人。
• 標題風格 粗體、富有表現力的襯線標題，字距緊湊。
• 按鈕文案 在膠囊形按鈕中使用直接、以行動為導向的動詞。

• 不要使用霓虹色或過於飽和的顏色 — 螢幕截圖顯示溫暖的米白色背景（#FFF5EC），僅有一個紅色強調色。
• 不要使用純等寬或手寫體字型 — 螢幕截圖使用幾何無襯線體與過渡襯線體。
• 不要在所有地方都使用尖銳的直角 — 螢幕截圖顯示元件上有 24px 的大圓角。
• 不要將 UI 塞滿密集資訊 — 螢幕截圖保持了充裕的間距與簡潔的佈局。
• 不要使用純白色（#FFFFFF）作為主要背景 — 螢幕截圖 consistently 使用溫暖的奶油色調。
• 不要使用細體、難以閱讀的字重作為內文 — 螢幕截圖使用標準的 400 字重以確保可讀性。
• 避免: 雜亂的介面
• 避免: 過於俏皮或隨意的語言
• 避免: 刺眼、高飽和度的配色

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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