Web Design Skill：逆向工程 Claude Design，讓任何 AI 都能做出頂級網頁

來源：ConardLi YouTube + GitHub
研究日期：2026-04-23

問題：為什麼 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「不要用紫粉漸變」比告訴它「使用好看的色彩」更精確、更有約束力。這與我們系統治理中「禁止行為 > 建議行為」的原則一致。