精選 · 開放 · 免費

Baggu

一個為具功能性且帶有玩味設計的日常包款與配件打造的現代電商平台。

01

設計氣質 DNA

一間燈光明亮、井然有序的實體零售店，陳設著色彩繽紛的高品質產品。

02

色彩

溫暖的中性背景作為簡潔如畫廊般的畫布，讓多彩的產品攝影主導視覺層級。

03

字型

grotesque-sans

• display40px · 700
• body16px · 400
• label14px · 700

導覽連結、分類標籤與主要行動呼籲按鈕使用全大寫。 · 保持緊湊的負字距，營造現代、緊密的感覺。 · 段落標題優先使用高字重（700），以確保強烈的視覺層級。

04

間距

標準 8px 基礎網格，主要區塊間留有充裕的空間，讓產品得以呼吸。

05

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

結構性元素使用 1px solid #000000；按鈕採用藥丸造型與實色背景。

0px 32px 68px 0px rgba(0, 0, 0, 0.3)

06

版面

全寬的圖像式橫幅區段，後接結構化的網格式產品目錄。

07

動效與互動

hover 狀態下的平滑色彩與變換過渡 · 購物車與導覽狀態改變時的微互動 · 產品畫廊的無縫圖片輪播過渡

可點擊的文字元素與按鈕在 hover 時，有細微的背景或色彩過渡。 · 按鈕按下時立即提供視覺回饋，通常為輕微的色彩轉變或縮小。

08

組件

• button 實色黑色背景（#000000）搭配白色（#FFFFFF）大寫文字，高度圓角（藥丸造型），最小化 padding。
• card 簡潔、無邊框的佈局，依賴高品質的產品攝影與中性背景形成對比。
• chip 大寫、粗體的文字連結用於分類導覽，間距顯著，無可見背景或邊框。
• input 極簡的僅底部邊框輸入欄位，配黑色底線與浮動的佔位文字。
• hero 全出血、高彩度的生活風格攝影，橫跨整個視口寬度。

09

文案語氣與禁用清單

• 語氣 直接、友善且自信 Straightforward。
• 標題風格 簡短、有力且高度描述性，常以全大寫呈現。
• 按鈕文案 以行動為導向，使用祈使動詞，並以全大寫置於高對比按鈕中。

• 勿在佈局區塊使用彩色或雜亂的背景——截圖顯示一致的中性米白色（#F6F4EE）畫布。
• 勿在標題使用襯線體或書寫體字型——截圖顯示粗體 grotesque-sans 風格。
• 勿使用小巧精緻的按鈕——截圖顯示高對比、藥丸形狀的黑色按鈕。
• 勿用密集的文字區塊使佈局擁擠——截圖顯示充裕的留白與大型影像。
• 勿使用深色模式或厚重的炭灰色背景——截圖顯示以淺色、溫暖中性背景為主。
• 勿用極簡攝影將產品藏於幕後——截圖顯示充滿活力、高彩度的產品照片為主要焦點。
• 避免: 華麗或過度技術性的行話
• 避免: 過多的形容詞或最高級
• 避免: 過於正式或疏離的企業語言

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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