問題：AI 時代的罐頭美學與 Web Design Skill 的缺失
用 AI 生成網頁，你幾乎一定會看到這些千篇一律的元素：
- Inter 字型 + 藍色按鈕
- 紫粉藍漸變背景
- 帶彩色左邊框的圓角卡片
- 用 emoji 充當圖標（🚀 ⚡ ✨）
- 杜撰的「已服務 10,000+ 客戶」統計數字
技術上能用，視覺上廉價。這就是所謂的「AI 美學」— 缺乏靈魂、一眼就知道是 AI 做的。這不僅損害了品牌質感，也反映出目前 AI 在原生狀態下，嚴重缺乏專業的 web design skill（網頁設計技能）約束。
解決方案：開源 Web Design Skill 專案，將 Claude Design 的設計品味寫入 AI 大腦
2026 年 4 月，Anthropic 推出了 Claude Design — 一個能產出高品質視覺設計的產品。它的祕密武器是一份約 420 行的系統提示詞，編碼了精密的設計原則、反模式清單和工作流約束。
ConardLi 做了一件事：逆向工程這份系統提示詞，萃取核心設計哲學，封裝成開源的 SKILL.md 檔案，並命名為 web-design-skill 專案。任何支援 Skill 格式的 AI Coding Agent — Cursor、Codex、TRAE、Claude Code — 都能直接導入使用，瞬間讓 AI 的設計美學達到頂尖設計師的水平。
用一句話說：Claude Design 的頂尖 Web Design Skill，不再被鎖在 Anthropic 的產品裡，而是成為人人可用的開源生產力工具。
六大核心機制：如何用結構化 Prompt 封裝 Web Design Skill
1. Anti-AI-Cliché 清單（反 AI 陳腔濫調）
這套 web design skill 內建了一份明確的「設計禁止清單」，強迫 AI 避開低階的視覺雷區：
| 禁止 | 替代方案 |
|---|---|
| 紫粉藍漸變背景 | oklch 感知均勻色彩推導 |
| Inter / Roboto / Arial 字型 | Plus Jakarta Sans、Sora、Outfit 等 |
| emoji 充當圖標 | 專業佔位符 [icon] + 幾何形狀 |
| 左邊框強調卡片 | 透過間距和字級層次創造視覺重心 |
| 杜撰統計數字 | 主動向使用者索取真實資料 |
2. oklch 色彩系統
傳統 HSL 有個致命問題：相同亮度值的不同色相，看起來亮度完全不同（黃色 50% 遠比藍色 50% 亮）。這是許多不具備專業 web design skill 的開發者常犯的錯誤。
oklch 是感知均勻的色彩空間 — 相同亮度值在人眼中真的一樣亮。本專案強制 AI 使用 oklch 推導色彩，確保調色盤的和諧度與無障礙網頁設計（Accessibility）的合規性。
--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 定義完整的設計系統 Token：
- 色彩調色盤（主色 / 次色 / 中性色 / 強調色）
- 字型體系（標題 / 內文 / 程式碼）
- 間距系統（基礎單位和倍數）
- 圓角策略、陰影層級、動效風格
這一步強制 AI「先思考設計決策，再動手寫 code」，避免邊寫邊猜色，是極為關鍵的工程化 web design skill。
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，將許多高階的 web design skill 直接模組化：
- 響應式投影片引擎（1920×1080，自動縮放）
- iPhone / 瀏覽器裝置框架
- Tweaks 即時參數調整面板
- 動畫時間軸引擎（含緩動函數庫）
- oklch 色彩 × 字型配對參考表
深度分析：為什麼傳統的 Web Design Skill 在 AI 時代需要被「重構」？
在過去，前端工程師或 UI/UX 設計師的 web design skill 主要體現在對 CSS 屬性的熟練度、切版速度、以及對 Figma 等設計軟體的操作熟練度上。然而，隨著 Cursor、Claude Code 等 AI 輔助程式撰寫工具的普及，手寫程式碼的物理門檻已被降到最低。此時，真正能拉開專業差距的網頁設計能力，已從單純的「手藝執行」升級為「設計系統（Design System）的架構與約束能力」。
現代優秀的網頁設計不再只是追求炫目的特效，而是講求系統的嚴謹性與可維護性。例如，理解如何透過 oklch 色彩空間避免色彩斷層、如何在高對比度模式下保持可讀性，以及如何透過嚴格的間距比例創造和諧的視覺節奏。將這些高階的美學知識轉譯為「AI 可以理解並嚴格執行的結構化規則（如 SKILL.md）」，就是當前最稀缺、最前沿的 web design skill。這不僅能大幅縮短與 AI 協作時的微調地獄，更能確保產品輸出具備高標準的專業視覺質感。
安裝方式
your-project/
├── .agents/skills/web-design-engineer/
│ ├── SKILL.md # 主技能定義（~400 行）
│ └── references/
│ └── advanced-patterns.md # 程式碼模板庫（~500 行）
放進去後，AI Agent 在收到視覺或前端相關需求時便會自動啟用，讓你的開發助手瞬間滿載專業級的 web design skill。
色彩 × 字型配對速查（經典設計美學模板）
| 風格 | 主色 | 字型配對 | 適合 |
|---|---|---|---|
| 現代科技 | 藍紫 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]專業標記
結果令人驚艷，傳統 AI 的廉價感一掃而空，Anti-AI-Cliché 檢查全數高標通過。
關鍵洞察
-
設計品味是可編碼的。Claude Design 證明了一份精心設計的系統提示詞能顯著提升 AI 輸出的視覺品質。ConardLi 將這份品味開源，讓所有人都能受益並轉化為實用的團隊技能。
-
「先宣告設計系統再寫 code」 這個步驟看似簡單，卻是品質的關鍵分水嶺。它強制 AI 從「邊寫邊猜」轉為「先想後做」，將頂尖的 web design skill 深度融入工程工作流中。
-
反模式清單比正面指引更有效。告訴 AI「不要用紫粉漸變」比告訴它「使用好看的色彩」更精確、更有約束力。這與我們系統治理中「禁止行為 > 建議行為」的原則一致。
本質上，這是一次「將隱性知識（設計品味）顯性化為可執行規則」的工程實踐 — 正是 AI 時代「知識蒸餾」與 web design skill 轉型的典型範式。
想讓你的 AI 告別「土味設計」？
這套 Web Design Skill 是完全開源的，任何人都能直接使用。但更重要的是背後的思維：設計品味是可以被編碼並複製的。
如果你也在探索 AI 輔助設計的可能性，並希望提升自己的 web design skill，歡迎追蹤我的最新分享：
- Facebook 粉專：漫遊數位 — AI 工具實測與設計工程分享
- GitHub 倉庫 — 直接取用 Web Design Skill 專案
- 留言告訴我：你用 AI 做過最滿意的網頁設計是什麼？遇到過最大的痛點又是什麼？
