精選 · 開放 · 免費

Urbanwoodsystems

大膽、基於網格的硬體產品網站，搭配超大排版與中性調色盤。

01

設計氣質 DNA

極簡瑞士設計雜誌結合高端硬體產品目錄。

02

色彩

高對比單色調色盤，搭配溫暖的中性背景。

03

字型

grotesque-sans

• display140px · 500
• body11px · 500

所有文字嚴格設定為中等粗細 (500)。 · 所有元素使用緊湊的字距 (-0.1px 至 -2px)。 · 無字體粗細變化；層次僅透過巨大的比例差異建立。

04

間距

嚴格的 4px 網格，互動元素周圍最小化 padding。

05

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

除了標準的 1px 系統預設邊框外，無可見邊框；完全依賴佈局與間距。

06

版面

桌面端採不對稱雙欄網格，行動端則堆疊為單欄。

07

動效與互動

互動元素的色彩過渡 (0.2 秒)。 · 無複雜的入場動畫或動態模式可見。

可點擊元素上使用標準指標游標。 · 無。

08

組件

• button 大型白色圓形容器，作為主要導覽樞紐。
• card 無；導覽透過大型幾何形狀處理。
• chip 無。
• input 無。
• hero 不對稱分割佈局，一側為大型產品照片，另一側為巨大的排版區塊。

09

文案語氣與禁用清單

• 語氣 自信、含蓄且具功能性。
• 標題風格 巨大、粗體且字距緊湊。
• 按鈕文案 含蓄，整合於大型幾何導覽樞紐中。

• 不要使用輕盈或細體字重——截圖顯示所有文字均為粗細 500。
• 不要為表面添加陰影或深度——截圖顯示完全平坦的元素。
• 不要使用純白背景——截圖顯示溫暖的中性色 (#E6E6DD)。
• 不要為按鈕使用複雜的 border-radius——截圖顯示大型藥丸/圓形形狀 (300px radius)。
• 不要使用鮮豔或多色的強調色調——截圖嚴格採用單色調，僅有黑色墨色。
• 不要使用寬鬆或放鬆的字距——截圖顯示緊湊、壓縮的排版。
• 避免: 過多的形容詞或行銷空話。
• 避免: 複雜或多步驟的導覽選單。
• 避免: 鮮豔或霓虹色彩方案。
• 避免: 裝飾性元素或多餘的 UI 修飾。
• 避免: 斜體或手寫體排版。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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