Web Design Skill 學習筆記
Claude Design 是什麼？
Claude Design 是 Anthropic 發佈的設計工具，發佈當天直接導致了 Figma 股價暴跌。
核心理念： 左邊打字，右邊直接出設計稿（本質上是可運行的網頁，不是圖片）
與傳統設計工具的區別
| 維度 | 傳統設計工具（如 Figma） | Claude Design |
|---|---|---|
| 主導者 | 人在畫布上操作，AI 輔助提速 | AI 是主要生成者，人負責審核 |
| 輸出物 | 設計圖/圖片 | 真實可運行的代碼 |
| 交互方式 | 手動繪製 | 文字描述 → 自動生成 |
| 版本管理 | 需手動操作 | 鏈接可點擊，標籤可切版本 |
本質： Claude Design 更像 Claude Code（設計師版），而不是 AI 版 Figma。
核心提示詞拆解（6 大要點）
視頻對 Claude Design 洩露的提示詞進行了深度拆解，提煉出 6 個核心設計原則：
角色定位 —— 動態身份切換
提示詞原文要旨： “你是一個專家設計師，而用戶是你的產品經理”
關鍵洞察：
- ❌ 不要說"你是一個 AI 助手"
- ✅ 建立設計師 ↔ 產品經理的協作關係
兩個好處：
- AI 決策更果斷 — 設計師本身應該有判斷力，不用事事請示
- 關鍵點會來問你 — 因為用戶是產品經理，最終由用戶拍板
動態身份切換：
- 做動畫 → 動效設計師
- 做原型 → UX 設計師
- 做 PPT → Deck 設計師
💡 啟示： 很多人的提示詞只寫一句"你是個前端開發者"就完事了。好的角色定位應該是動態的，根據具體任務靈活切換身份。
工作流 —— 六步流程
|
|
細節一：提問的藝術（什麼時候該問？什麼時候直接幹？）
問題： 很多 Agent 要麼先問你一堆問題，要麼啥也不問悶頭就幹。
Claude Design 的策略：
- 輸入 “幫我做個 PPT” → 先問幾個問題（信息不足）
- 輸入 “幫我做個 PPT，全運會馬上要用，10 分鐘” → 直接開幹（緊急場景，信息充分）
💡 啟示： 根據上下文的緊迫程度和信息完整度，靈活決定是提問還是執行。
細節二：總結原則
- ✅ 只說關鍵注意事項和下一步動作
- ❌ 不要復述自己已經做了什麼
💡 啟示： 這個原則可以有效避免 AI 產生大量廢話。
去除 AI 味（最有價值的部分）
典型的 AI 生成網頁特徵：
- 紫粉藍漸變背景
- 大圓角卡片
- Emoji 當圖標
- 到處堆砌假數據
- 左側彩色邊框的圓角卡片
- 爛大街的字體
- 無意義的數據和圖標堆砌
這就像文章裡通篇都是"此外"“值得注意的是"“綜上所述"一樣，一眼就能聞出來是 AI 寫的。
Claude Design 的做法： 列出一份完整的"雷區清單”，逐條告訴 AI 不能走這些老套路。
字體推薦也很講究：
- 明確列出千萬不能用的字體 + 替代方案
- 推薦小眾但品質很高的字體
色彩系統 —— OKLCH 色彩空間
配色策略優先級：
|
|
為什麼用 OKLCH 而不是 HSL？
| HSL | OKLCH | |
|---|---|---|
| 感知均勻性 | ❌ 不均勻（同亮度值，黃色比藍色亮很多） | ✅ 均勻 |
| AI 配色效果 | 數值沒問題但看著不舒服 | 保持亮度和色度不變，只轉色相，顏色自然和諧 |
💡 啟示： OKLCH 這個看似很小的細節，能讓網頁的高級感直接提升一個檔次。
內容原則 —— “用 1000 個 NO 換一個 YES”
引用喬布斯經典名言。
AI 做網頁的傳統毛病： 恨不得把空間全塞滿 — Hero、特性、評價、數據、FAQ、聯繫方式……一股腦全上，但每塊都平庸。
Claude Design 的態度：
- 每個元素都得證明自己為什麼應該在那裡
- 如果覺得頁面空 → 可能是排版問題，用留白來解決
- 一個大膽的留白 > 十個湊數的板塊
驗證機制 —— 子 Agent 檢查
原理： 開發完成後，fork 出一個獨立的子 Agent 對網頁做全面檢查。
為什麼要獨立的子 Agent？
- 同一個上下文裡的 AI 容易"自我感覺良好”
- 獨立的子 Agent 沒有"感情包袱"，更容易發現問題
驗證內容：
- 是否有 AI 味特徵？
- 配色是否和諧？
- 字體是否恰當？
- 布局是否有創意？
Skill 文件的核心優化
Skill 文件在 Claude Design 提示詞的基礎上，做了三個關鍵優化：
先說設計系統再寫代碼
在開始編碼之前，要求 AI 明確列出：
- 配色方案
- 字體選擇
- 間距系統
- ……
為什麼？ 如果不說清楚，AI 會默默自己做決定直接寫代碼。等你看到成品時，如果方向不對只能推翻重來。提前說出來，還沒寫代碼就能糾偏。
儘早輸出最小可用版本
- 要求 AI 先拿出一個帶假設和佔位符的粗糙 V0 版本
- 一個粗糙的 V0 > 花幾倍時間做出精雕細琢的 V1
為什麼？ 如果整個方向都錯了，V1 做得再精緻也全白幹了。
額外補充
- 補充了更多去除 AI 味的條目
- 增加了幾套經過驗證的字體和配色參考對照表
- 附帶 reference 文件（典型代碼模板，來源於提示詞中的 “copy study the component” 部分）
效果對比演示
測試環境：Cursor + Claude 4.7（有 Skill vs 無 Skill）
太空探索博物館線上展覽頁
| 無 Skill | 有 Skill | |
|---|---|---|
| 配色 | 青紫粉漸變，典型 AI 霓虹感 | OKLCH 定義，接近雜誌印刷的深沉色調 |
| 字體 | 比較老套 | 標題和正文都有特點，科技感十足 |
| 布局 | 標準 Hero + 卡片，教科書式落地頁 | 非傳統卡片式，有創意感 |
| 動畫 | 有星空和行星動畫，但堆砌了大量發光特效 | 舒適、有創意感 |
| 總體 | 有太空感，缺少創意 | 像非常有經驗的設計師的傑作 |
獨立攝影師個人作品集（極簡提示詞）
| 無 Skill | 有 Skill | |
|---|---|---|
| 設計風格 | 深色背景 + 霓虹發光 + 半透明卡片，老套 | 虛構了一位北歐攝影師，從頭設計完整視覺風格 |
| 文案 | 滿滿的 AI 感 | — |
| 情感表達 | 攝影師本該有的自由感完全沒體現 | 像在翻一本高端攝影畫冊 |
| 決策策略 | 直接開幹，沒問問題 | 主動提問了配色傾向、核心元素等 |
最終結論
|
|
Skill 裡的每條規則單獨看效果不大，但加起來就會產生質變。這就是從"能用"到"好看"、從"完整"到"精緻"、從"合格"到"有風格"的差距。
核心知識點速查
| # | 知識點 | 一句話總結 |
|---|---|---|
| 1 | 動態角色定位 | 根據任務靈活切換 AI 身份，而不是一句"你是前端"了事 |
| 2 | 工作流六步法 | 理解需求→探索資源→制定計劃→搭建結構→完成驗證→簡要總結 |
| 3 | 提問的藝術 | 根據信息完整度和緊迫度決定是提問還是直接幹 |
| 4 | 去除 AI 味 | 列出雷區清單，禁用漸變/Emoji/大圓角卡片等老套路 |
| 5 | OKLCH 配色 | 感知均勻的色彩空間，比 HSL 更能產生和諧配色 |
| 6 | 內容克制 | 每個元素都要證明自己存在的理由，大膽留白 |
| 7 | 子 Agent 驗證 | 用獨立上下文檢查，避免"自我感覺良好" |
| 8 | 先說設計系統再寫代碼 | 提前暴露設計決策，避免方向性錯誤 |
| 9 | 快速出 V0 | 粗糙但快速的原型 > 精緻但方向錯誤的成品 |