精選 · 開放 · 免費

Cargo

一個極簡的網站建構工具，將排版與創意作品置於平台裝飾之上。

01

設計氣質 DNA

一個藝廊級數的數位畫布，專為創意人士打造

02

色彩

嚴格單色與中性，使用高對比的白色背景，確保使用者繽紛的創意作品始終是唯一的焦點。

03

字型

humanist-sans

• display80px · 400
• heading40px · 400
• body14px · 400

在展示型尺寸上使用緊湊字距，營造精緻、定制字型的感覺 · 互動元素專用中等字重（500），以提供明確的可操作性提示

04

間距

由明確的網格定位驅動的不對稱佈局，而非線性的垂直節奏。

05

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

英雄區中無可見邊框；完全依賴間距與排版來進行區隔。

06

版面

桌面版採用不對稱分割網格，左側放置品牌標識，右側放置操作按鈕。

07

動效與互動

懸停狀態時的即時過渡 · 錯落的頁面進入動畫

游標變為指針，文字連結無可見的背景變化。 · 即時狀態改變，無可感知的延遲。

08

組件

• button 實心藍色填充按鈕（反白狀態）或僅帶有底線的文字連結。
• card 範本預覽卡片，邊框半徑為零，大量使用圖片出血處理。
• chip 簡潔的類分頁分隔線，用於區隔不同的內容視圖。
• input 帶有標準邊框與基本內距的文字輸入框。
• hero 全螢幕不對稱分割佈局，搭配錨定於對角的巨大排版文字。

09

文案語氣與禁用清單

• 語氣 精緻、直接，帶點不羈。
• 標題風格 簡潔有力的雙字詞命令或陳述。
• 按鈕文案 行動導向的文字，以括號包裹或使用純文字連結。

• 不要在主要容器上使用 border-radius — 螢幕截圖顯示完全方形的邊角
• 不要使用投影來創造深度感 — 螢幕截圖顯示完全平面的表面
• 不要在內文中使用襯線字體 — 螢幕截圖全程顯示人文主義無襯線字體
• 不要將大段文字置中對齊 — 螢幕截圖顯示嚴格的左對齊或右對齊定位
• 不要使用鮮豔的背景色 — 螢幕截圖顯示嚴格的白色或近白色畫布
• 不要在標題上使用寬鬆的字距 — 螢幕截圖顯示緊湊的負字距
• 避免: 行銷術語
• 避免: 裝飾性漸層
• 避免: 推銷式的驚嘆號

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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