Web Design Skill：逆向工程 Claude Design，讓任何 AI 都能做出頂級網頁
問題：為什麼 AI 做的網頁都長一樣？
用 AI 生成網頁，你幾乎一定會看到這些元素：
- Inter 字型 + 藍色按鈕
- 紫粉藍漸變背景
- 帶彩色左邊框的圓角卡片
- 用 emoji 充當圖標（🚀 ⚡ ✨）
- 杜撰的「已服務 10,000+ 客戶」統計數字
技術上能用，視覺上廉價。這就是所謂的「AI 美學」— 千篇一律、一眼就知道是 AI 做的。
解決方案：把 Claude Design 的設計品味開源
2026 年 4 月，Anthropic 推出了 Claude Design — 一個能產出高品質視覺設計的產品。它的祕密武器是一份約 420 行的系統提示詞，編碼了精密的設計原則、反模式清單和工作流約束。
ConardLi 做了一件事：逆向工程這份系統提示詞，萃取核心設計哲學，封裝成開源的 SKILL.md 檔案。任何支援 Skill 格式的 AI Coding Agent — Cursor、Codex、TRAE、Claude Code — 都能直接使用。
用一句話說：Claude Design 的設計品味，不再被鎖在 Anthropic 的產品裡。
六大核心機制
1. Anti-AI-Cliché 清單（反 AI 陳腔濫調）
Skill 內建一份明確的「禁止清單」：
| 禁止 | 替代方案 |
|---|---|
| 紫粉藍漸變背景 | oklch 感知均勻色彩推導 |
| Inter / Roboto / Arial 字型 | Plus Jakarta Sans、Sora、Outfit 等 |
| emoji 充當圖標 | 專業佔位符 [icon] + 幾何形狀 |
| 左邊框強調卡片 | 透過間距和字級層次創造視覺重心 |
| 杜撰統計數字 | 主動向使用者索取真實資料 |
2. oklch 色彩系統
傳統 HSL 有個致命問題：相同亮度值的不同色相，看起來亮度完全不同（黃色 50% 遠比藍色 50% 亮）。
oklch 是感知均勻的色彩空間 — 相同亮度值在人眼中真的一樣亮。Skill 強制使用 oklch 推導色彩，確保調色盤的和諧度。
--primary: oklch(0.55 0.25 250); /* 主色 */
--primary-light: oklch(0.75 0.15 250); /* 亮色變體 */
--primary-dark: oklch(0.35 0.2 250); /* 暗色變體 */3. 設計系統宣告（先想後做）
在寫第一行 code 之前，AI 必須先用 Markdown 定義設計系統：
- 色彩調色盤（主色 / 次色 / 中性色 / 強調色）
- 字型體系（標題 / 內文 / 程式碼）
- 間距系統（基礎單位和倍數）
- 圓角策略、陰影層級、動效風格
這一步強制 AI「先思考設計決策，再動手寫 code」，避免邊寫邊猜色。
4. 六步工作流
| 步驟 | 動作 | 目的 |
|---|---|---|
| 1. 理解需求 | 依脈絡決定是否提問 | 不機械式提問 |
| 2. 收集設計脈絡 | 讀 code > 看截圖 > 參考業界 | 絕不從零開始 |
| 3. 宣告設計系統 | Markdown 定義 Token | 先想後做 |
| 4. 展示 v0 草稿 | 佔位符 + 佈局 + Token | 讓使用者早期修正方向 |
| 5. 完整建置 | 元件 + 狀態 + 動效 | 重要決策點暫停確認 |
| 6. 驗證 | 交付前檢查清單 | 無 console 錯誤、無不明色相 |
5. Placeholder 哲學（佔位符 > 假貨）
- 缺圖標 →
[icon]方塊標記（不是 🚀） - 缺圖片 → 帶寬高比的佔位卡片（不是 AI 生成的假圖）
- 缺資料 → 主動向使用者索取（不是杜撰「10,000+」）
佔位符的訊號：「這裡需要真實素材」。假貨的訊號：「我在偷工減料」。
6. 進階模板庫
Skill 附帶約 500 行的 advanced-patterns.md，包含：
- 響應式投影片引擎（1920×1080，自動縮放）
- iPhone / 瀏覽器裝置框架
- Tweaks 即時參數調整面板
- 動畫時間軸引擎（含緩動函數庫）
- oklch 色彩 × 字型配對參考表
安裝方式
your-project/
├── .agents/skills/web-design-engineer/
│ ├── SKILL.md # 主技能定義（~400 行）
│ └── references/
│ └── advanced-patterns.md # 程式碼模板庫（~500 行）放進去就好。Agent 在收到視覺/前端相關需求時會自動啟用。
色彩 × 字型配對速查
| 風格 | 主色 | 字型配對 | 適合 |
|---|---|---|---|
| 現代科技 | 藍紫 oklch(0.55 0.25 250) | Space Grotesk + Outfit | SaaS、AI 產品 |
| 優雅編輯 | 暖棕 oklch(0.35 0.10 30) | Newsreader + Outfit | 部落格、內容平台 |
| 高端品牌 | 近黑 oklch(0.20 0.02 250) | Sora + Plus Jakarta Sans | 奢侈品、顧問 |
| 活潑消費 | 珊瑚 oklch(0.70 0.20 30) | Plus Jakarta Sans + Outfit | 電商、社群 |
| 極簡專業 | 藍綠 oklch(0.50 0.15 200) | Outfit + Space Grotesk | 儀表板、B2B |
| 匠人溫度 | 焦糖 oklch(0.55 0.15 80) | Caveat + Newsreader | 餐飲、教育 |
實戰驗證
我們已將此 Skill 安裝至 OpenClaw 系統（繁體中文版），並用來重新設計了世界閱讀日頁面：
- 色彩：oklch(0.35 0.10 30) 暖棕編輯風格（非紫粉漸變）
- 字型：Noto Serif TC + Newsreader + Outfit（非 Inter/Roboto）
- 動效：淡入進場 +
prefers-reduced-motion支援 - 佔位符：圖片位置使用
[Gemini 生成圖片 · 16:9]專業標記
Anti-AI-Cliché 檢查全數通過。
關鍵洞察
- 設計品味是可編碼的。Claude Design 證明了一份精心設計的系統提示詞能顯著提升 AI 輸出的視覺品質。ConardLi 將這份品味開源，讓所有人都能受益。
- 「先宣告設計系統再寫 code」 這個步驟看似簡單，卻是品質的關鍵分水嶺。它強制 AI 從「邊寫邊猜」轉為「先想後做」。
- 反模式清單比正面指引更有效。告訴 AI「不要用紫粉漸變」比告訴它「使用好看的色彩」更精確、更有約束力。這與我們系統治理中「禁止行為 > 建議行為」的原則一致。
本質上，這是一次「將隱性知識（設計品味）顯性化為可執行規則」的工程實踐 — 正是 AI 時代「知識蒸餾」的典型範式。
想讓你的 AI 告別「土味設計」？
Web Design Skill 是開源的，任何人都能直接使用。但更重要的是背後的思維：設計品味是可以被編碼的。
如果你也在探索 AI 輔助設計的可能性，歡迎追蹤我的最新分享：
- Facebook 粉專：漫遊數位 — AI 工具實測與設計工程分享
- GitHub 倉庫 — 直接取用 Web Design Skill
- 留言告訴我：你用 AI 做過最滿意的網頁設計是什麼？
漫遊數位 ‧ 大腦算力注能
我持續探索，與您共享 AI 時代的實戰洞察
如果這篇文章或工具為您帶來了啟發，歡迎請我喝杯咖啡。您的支持將 100% 轉化為大阿爪的 API 算力與技術研發基金，讓我們一同在數位時代漫遊！
☕NT$100一杯咖啡 (注能 6 天)🍱NT$300一頓午餐 (注能 18 天)⚡NT$500一週能量 (注能 1 個月)💖NT$1000無限進化 (終極注能)