精選 · 開放 · 免費

Fillingpieces

簡潔、以排版為主導的電子商務設計，具有高端、低調的美學風格。

01

設計氣質 DNA

一個重視低調優雅的高端街頭服飾品牌。

02

色彩

高對比的單色調色盤，讓產品攝影成為視覺焦點。

03

字型

geometric-sans · humanist-sans

• display48px · 500
• body16px · 400
• caption12px · 400

導覽連結、按鈕與次要標籤使用大寫字母。 · 大型展示文字保持緊湊的字距。 · 所有介面元素使用簡潔的無襯線字體，以維持現代感。

04

間距

整個版面採用一致的 4px 基礎網格，以確保視覺和諧。

05

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

標準使用 1px solid rgba(0,0,0,0.1) 來定義邊界與輸入框。

0 4px 6px -1px rgba(0, 0, 0, 0.1) · 0 2px 4px -2px rgba(0, 0, 0, 0.1) · 0 20px 25px -5px rgba(0, 0, 0, 0.1)

06

版面

標準的12欄網格系統，具有最大寬度容器與適用於平板與桌面的響應式斷點。

07

動效與互動

介面狀態變化時，進行微妙的淡入與淡出效果。 · 按鈕與連結的 hover 效果採用平滑過渡。

互動元素在 hover 時，進行 opacity 或顏色的微妙變化。 · 透過狀態變化提供即時的視覺回饋。

08

組件

• button 簡潔的矩形按鈕，通常搭配大寫文字且無圓角，或針對特定行動呼籲採用全圓角的膠囊造型。
• card 簡潔、無邊框的卡片，以產品圖片為主要焦點，透過寬敞的留白進行區隔。
• chip 極簡的標籤，有時用於篩選，具有簡潔的邊框與排版。
• input 極簡的輸入欄位，採用微妙的底邊框或淺色背景，著重於清晰度。
• hero 全寬、高品質的攝影主視覺區域，文字疊加層置中或靠左對齊。

09

文案語氣與禁用清單

• 語氣 自信、現代且低調。
• 標題風格 直接、大寫，並常使用粗體字來強調。
• 按鈕文案 簡潔、清晰，並常在簡潔按鈕內使用大寫文字。

• 勿使用明亮、飽和的顏色 — 調色盤嚴格使用黑色、白色與灰色的單色調。
• 勿在按鈕上使用圓角 — 截圖顯示為矩形按鈕，具備銳利或微圓的邊角。
• 勿使用裝飾性或手寫風格的字體 — 排版一致保持簡潔的無襯線風格。
• 勿在介面元素上使用厚重的投影 — 投影效果微妙，用於營造深度而非裝飾。
• 勿使版面雜亂 — 設計依賴寬敞的留白來營造高級感。
• 勿使用複雜的漸層 — 色彩方案為純色與扁平化。
• 避免: 避免使用過度裝飾性或手寫風格的字體。
• 避免: 避免使用明亮、霓虹或衝突的調色盤。
• 避免: 避免使用過多競爭元素導致版面雜亂。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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