我把 Claude Design 做成了 Skill，人人都能成為頂級網站設計師

作者：code秘密花園

日期：2026年4月22日上午12:30

來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點高亮

將 Claude Design 的頂級設計邏輯封裝成 Skill，讓 AI 從「能用」進化到「精緻」的專業設計師水平。

Claude Design 的核心競爭力在於其 420 行系統提示詞，將 AI 定位為「專家設計師」而非助手。
高質設計的關鍵在於「去 AI 味」，包括禁用 Inter 字體、避免紫粉漸變、拒絕無意義的 Emoji 堆砌。
引入 oklch 色彩系統與字體配對表，確保視覺呈現具備雜誌級的專業質感與色彩和諧度。
採用「先問後做」與「宣告設計系統」的工作流，在編碼前對齊風格，大幅降低重做成本。
實測證明，封裝後的 Skill 在排版節奏、細節剋制力與品牌感上，顯著優於原生模型的輸出。

值得記低

Skill github.com

web-design-engineer Skill

封裝了 Claude Design 核心設計哲學的 Skill，支持 Codex、Cursor 等工具。

工具 github.com

Easy Agent

從零開發企業級 Agent 的開源項目，參考 Claude Code 的 Harness 實踐。

整理重點

Claude Design 的靈魂：AI 是主導者，人是審閲者

Claude Design 之所以讓 Figma 股價大跌，不單是因為它能寫代碼，而是它徹底翻轉了協作邏輯。傳統工具是人畫圖 AI 輔助，而它是 AI 生成、人來審閲。其系統提示詞將 AI 定位為「專家設計師」，用戶則是「經理」。

整理重點

如何去除「AI 味」？一份專業設計清單

很多 AI 生成的網頁一眼就能看穿，是因為它們過度依賴漸變背景、大圓角卡片和 Inter 字體。Claude Design 通過顯式禁令，強迫 AI 跳出舒適區。

不要用爛大街的字體（如 Inter、Roboto），改用 Plus Jakarta Sans 或 Space Grotesk；禁止用 Emoji 充當圖標。

此外，引入 oklch 色彩空間是神來之筆。相比傳統 HSL，oklch 能確保在改變色相時保持感官亮度一致，避免 AI 生成刺眼或不和諧的配色。

整理重點

提煉精華：打造 web-design-engineer Skill

作者將這套邏輯封裝成約 400 行的 Skill，重點在於強化「設計系統先行」的原則。在寫第一行代碼前，AI 必須先用 Markdown 宣告配色、字體與間距決策。

設計系統宣告範例 markdown

## Design System
- Palette: oklch(0.10 0.015 250) [Ink], oklch(0.78 0.13 65) [Ember]
- Typography: Instrument Serif (Headings), Space Grotesk (Body)
- Spacing: Fluid scale using clamp()
- Components: Minimalist cards with 4px border-radius

這種「v0 半成品策略」讓用戶在細節完善前就能糾偏，比直接輸出一個「平庸的成品」更有價值。

整理重點

可行動的設計原則：一千個 No 換一個 Yes

最後，永遠不要為了填滿空間而塞入無意義的內容。留白也是設計，每個元素都必須證明自己存在的理由。

一、Claude Design 是什麼？

2026 年 4 月 17 日，Anthropic 發佈了 Claude Design。

這個產品上線當天，Figma 股價大跌。

Claude Design 由 Opus 4.7 驅動，提供給 Pro、Max、Team、Enterprise 訂閲者使用。

它的界面很簡潔：左邊聊天，右邊畫布。

你描述你想要什麼，它就在右邊畫出來。

你可以通過對話、行內評論、直接編輯、甚至它自動生成的調節滑桿去反覆修改。

聽起來像一個 "AI 版 Figma" ？

Anthropic 設計團隊的 Ryan Mather 發推說了一句關鍵的話：

不要用對待畫布工具的方式來用 Claude Design，它更像 Claude Code。

這句話是理解 Claude Design 的關鍵。

傳統設計工具的邏輯是 — 人在畫布上操作，AI 輔助加速。

Claude Design 反過來 — AI 是主要的生成者，人是主要的審閲者。

這個區別落到產品上，產生了幾個具體差異。

第一，輸出是可運行的代碼。

連結可以點，標籤可以切，版本可以 DIFF。這跟 "生成一張漂亮的 UI 圖" 完全是兩碼事。

第二，它理解你的代碼庫。

你上傳代碼庫之後，它會讀組件結構、框架模式、文件組織。

第三，它會主動提問、給多方案、自檢自糾。

整套協作模式跟以前任何設計工具都不一樣。

Ryan Mather 一個人同時負責 Anthropic 的 7 條產品線。這在兩個月前不可能。

有團隊反饋說，以前在別的工具裏需要 20 多輪提示才能搞定的複雜交互，在 Claude Design 裏 2 輪就搞定了。

用這個工具和直接用 Claude Code 編寫網頁有啥區別呢？

其實關鍵的變量還是：提示詞工程。

Claude Design 之所以強，一半歸功於 Opus 4.7 的模型能力，另一半歸功於那套精心設計的系統提示詞。

Claude Design 發佈不到 24 小時，安全大佬 Pliny the Liberator 就在 X 分享它的完整系統提示詞。

接下來我們就來仔細拆解這套提示詞，到底有哪些是我們值得借鑑的地方。

二、拆解 Claude Design 的系統提示詞

Claude Design 的系統提示詞大約 420 行，信息密度極高。我們把裏面最核心、最有價值的設計理念提煉出來，逐一解讀。

2.1 角色定位：設計師 + 工匠 + 產品經理

You are an expert designer working with the user as a manager. You produce design artifacts on behalf of the user using HTML.

開頭第一句，定義了一個非常精妙的協作關係：AI 是設計師，用戶是產品經理。

注意它沒有說 "你是一個 AI 助手"。它說 "你是一個專家設計師，用戶是你的經理"。

這個微妙的角色倒轉帶來兩個效果：AI 會更主動地做決策（設計師該有的判斷力），同時會在關鍵節點徵求用戶意見（向經理彙報）。

緊接着下一句也很關鍵：

HTML is your tool, but your medium and output format vary. You must embody an expert in that domain: animator, UX designer, slide designer, prototyper, etc.

HTML 是工具，但你的身份要隨任務切換。做動畫時你是動效設計師，做原型時你是 UX 設計師，做幻燈片時你是 Deck 設計師。這意味着 AI 不會用"做網頁"的思維去做一切——比如不會給幻燈片加導航欄，不會給動畫加頁腳。

很多人寫提示詞時，角色定義停留在 "你是一個前端開發者"。

Claude Design 告訴我們：好的角色定位應該是動態的 — 根據具體任務切換專業身份。

2.2 工作流：先問後做，儘早出活

Claude Design 定義了一套六步流程：

理解需求（問清楚再動手）
探索現有資源
制定計劃
搭建文件結構
完成並驗證
極簡總結

這裏面有兩個值得注意的細節。

第一個：什麼時候問，什麼時候直接做？

提示詞明確給出了判斷標準：

make a deck for the attached PRD → ask questions
make a deck with this PRD for Eng All Hands, 10 minutes → no questions; enough info was provided
turn this screenshot into an interactive prototype → ask questions only if intended behavior is unclear from images

這套判斷邏輯背後的原則是：信息充足就幹活，信息不足才提問。

這聽起來很常識，但絕大多數提示詞做不到這一點——要麼永遠先問一大堆，要麼從不提問直接硬幹。

Claude Design 還給出了提問的具體建議：至少問 10 個問題、提供多選和自由輸入的選項、覆蓋變體方向、視覺偏好等。

第二個：極簡總結的要求。

Summarize EXTREMELY BRIEFLY — caveats and next steps only.

只說注意事項和下一步，不贅述自己做了什麼。

這個原則同樣精闢 — 代碼已經在那裏了，你為什麼還要用文字複述一遍你做了什麼？

2.3 去除 AI 味的秘訣

這是整份提示詞中我認為最有價值的部分之一。

Claude Design 給出了一份明確的 "避免 AI 味的清單"：

不要過度使用漸變背景
不要隨便使用 Emoij
不要用帶左側彩色邊框的圓角卡片
不要用 SVG 硬畫複雜圖形（用佔位符，索取真實素材）
不要用爛大街的字體：Inter、Roboto、Arial、Fraunces、system-ui
不要堆砌無意義的數據和圖標（"data slop"）

這份清單堪稱一面照妖鏡。

回想一下你見過的 AI 生成網頁 — 是不是清一色的紫粉藍漸變、Inter 字體、大圓角卡片、emoji 充當圖標、假數據滿天飛？

這些元素單獨看都沒什麼問題，但當 AI 反覆使用它們，就形成了一種強烈的"AI 味"。

就像一篇文章通篇 "此外"、"值得注意的是"、"綜上所述"、"不是xxx、而是 xxx"，你一眼就知道是 AI 寫的。

Claude Design 通過顯式列出這些雷區，強迫 AI 跳出舒適區。

與之配套的還有一個字體推薦表——重點放在 "你絕對不要用什麼字體"，同時提供更好的替代選擇。

比如推薦 Plus Jakarta Sans、Space Grotesk、Sora、Newsreader 等相對小眾但品質出色的字體。

2.4 oklch 色彩系統：有理論支撐的配色策略

Color usage: try to use colors from brand / design system, if you have one. If it's too restrictive, use oklch to define harmonious colors that match the existing palette. Avoid inventing new colors from scratch.

提示詞的配色策略分三層：

優先用品牌色
不夠用時，用 oklch 色彩空間派生和諧的衍生色
絕對不要憑空發明新的色相

為什麼是 oklch？

傳統的 HSL 色彩空間有個致命缺陷：感知不均勻。

同樣的亮度值，黃色看起來比藍色亮得多。

這導致 AI 用 HSL 隨機生成的配色經常看起來不和諧——技術上"正確"，視覺上卻刺眼。

oklch 是一個感知均勻的色彩空間。

在 oklch 中，相同的亮度值代表人眼感受到的相同亮度。

這意味着你只需要保持亮度（L）和色度（C）不變，改變色相角（h），就能自動得到和諧的色彩搭配。

2.5 內容原則："一千個 No 換一個 Yes"

Do not add filler content. Never pad a design with placeholder text, dummy sections, or informational material just to fill space. Every element should earn its place.

One thousand no's for every yes.

這句話出自喬布斯。用在這裏恰如其分。

AI 做設計時有一個根深蒂固的傾向：填滿空間。

給它做一個落地頁，它恨不得塞進 hero、特性介紹、客戶評價、數據展示、FAQ、聯繫方式 …… 全都有，但是全都很平庸。

Claude Design 的應對策略很直接：

每個元素必須證明自己存在的理由
想加內容？先問用戶
頁面看起來空？那是佈局問題，用版式和留白解決，不是靠塞內容

這背後的設計哲學是：留白也是設計。一個大膽的留白，比十個平庸的板塊更有表現力。

2.6 驗證閉環：不信任自己的輸出

Claude Design 的驗證機制非常嚴謹：

完成後調用 done，展示給用戶並檢查控制枱錯誤
如果有錯誤，修復後再次調用 done
確認無誤後，調用 fork_verifier_agent — 啓動一個獨立的子代理，在自己的 iframe 裏做全面檢查（截圖、佈局、JS 探測）

注意第三步：它會 fork 出另一個獨立的 Agent 來做檢查，避免 "自己審自己" 的確認偏誤。

這裏和我們之前分享過的 Claude Code 在 Harness 上的實踐有同樣的理念。

AI 檢查自己的輸出時，容易陷入"確認偏誤" — 它傾向於認為自己做得沒問題。

用一個全新的上下文來做驗證，能有效打破這種偏誤。

2.7 其他亮點速覽

上下文管理： 提示詞引入了 snip 工具，允許 AI 標記已完成的對話段落為"可刪除"。當上下文壓力增大時，這些段落會被移除，騰出空間。這解決了長對話中上下文窗口溢出的問題 — AI 會主動 "忘掉" 不再需要的信息。

PPT編號規範： 提示詞特別強調PPT編號必須是 1-indexed（從 1 開始），並解釋原因 — "人類不會說第 0 張幻燈片"。這個細節看似瑣碎，但它反映了一個重要原則：AI 的輸出應該適配人類的思維模型，而非機器的實現細節。

設計系統先行： 在寫第一行代碼之前，AI 必須先定義設計系統 — 配色方案、字體、間距、圓角、陰影、動效風格。把這些 Token 化的決策前置，能有效保持全局一致性。這也是專業設計師的標準做法。

Tweaks 面板： 這是一個聰明的 UI 模式 — 在設計中內置一個可調參面板，讓用戶實時切換配色、字體、間距等參數。它把"選擇"的權力交給用戶，同時降低了溝通成本。

三、把 Claude Design 的精華提煉成 Skill

3.1 為什麼要做這個 Skill？

Claude Design 是 Anthropic 的商業產品，基於 Opus 4.7 驅動，功能強大，但是有幾個問題：

國內用戶使用困難（最大的問題，花園老師已經被封了三個賬號了，徹底放棄官方渠道了...）。
沒有 API，你無法把它集成到自己的工作流中。
封閉性，你不能自定義它的行為邏輯。

但它的系統提示詞暴露了一個事實：

Claude Design 的核心競爭力，很大程度上來自那套精心設計的 Prompt Engineering。

Opus 4.7 的模型能力是基礎，但讓它穩定輸出高水平設計的，是那 420 行提示詞。

這意味着我們可以做一件事：把這套提示詞的核心理念提煉出來，封裝成一個可複用的 Skill，應用到 Codex、Curosr 或其他支持 SKILL 的工具中。

這就是 web-design-engineer Skill 的由來。

3.2 Skill 的設計思路

我的 Skill 約 400 行，結構如下：

1. 角色定義

此技能將 Agent 定位為頂尖的設計工程師，可以創造優雅、精緻的 Web 作品。
核心理念：目標直指"驚豔"，遠超"能用"的底線。每個像素都有意義，每個交互都經過深思熟慮。

繼承了 Claude Design 的動態角色切換思路 — 根據任務自動變身為 UX 設計師、動效設計師、數據可視化專家。

2. 六步工作流（改良版）

我在 Claude Design 的基礎上做了調整：

步驟	Claude Design	我的 Skill
第一步	理解需求	理解需求（附帶詳細的提問/不提問場景判斷表）
第二步	探索資源	獲取設計上下文（分四個優先級）
第三步	計劃	動手前先宣告設計系統（要求用 Markdown 列出所有設計決策）
第四步	搭建文件	儘早展示 v0 半成品（帶假設和佔位符的最小可展示版本）
第五步	完成	完整構建
第六步	總結	驗證

重點說說第三步和第四步。

第三步：宣告設計系統。

Claude Design 的提示詞裏提到了設計系統，但沒有強制要求在編碼前用自然語言宣告出來。

我加了這個約束。

原因很簡單：如果 AI 在腦子裏默默決定了配色方案然後開始寫代碼，你第一次看到的就是一個完整的頁面。

此時如果方向錯了，推翻重來的成本很高。提前宣告出來，用戶可以在動手前就糾偏。

第四步：v0 半成品策略。

靈感同樣來自 Claude Design 的 "show file to the user early" 理念，但我把它提煉成了更明確的方法論。

v0 包含核心結構 + 配色字體 token + 關鍵模塊佔位，不包含內容細節和完整組件庫。

帶假設和佔位符的 v0，比花 3 倍時間打磨出來的 "完美 v1" 更有價值 — 後者一旦方向錯了就要全推翻。

3. 反 AI 味清淡（擴展版）

在 Claude Design 的基礎上，我補充了更多條目：

千篇一律的漸變按鈕 + 大圓角卡片組合
憑空編造的客戶 logo 牆、虛假的好評數
無意義的 stats / 數字 / 圖標堆砌

同時明確了 emoji 的使用規範：

默認不用 emoji。只有當目標設計系統/品牌本身就用 emoji 時才使用。

沒圖標時用佔位符 — 拿 emoji 當 icon 替身是一種敷衍。

4. 佔位符哲學

這是我在 Claude Design 基礎上提煉出的一個完整方法論：

沒有圖標、圖片、組件時，畫佔位符比硬畫假圖更專業。
- 圖標缺失 → 方塊 + 標籤（如 [icon]、▢）
- 頭像缺失 → 首字母圓形色塊
- 圖片缺失 → 帶 ratio 信息的佔位卡
- Logo 缺失 → 品牌名文字 + 簡單幾何形

佔位符傳遞的信號是"這裏需要真材料"。
假圖傳遞的信號是"我糊弄完了"。

5. 配色 × 字體配對參考表

這是完全新增的內容。我提供了幾套經過驗證的視覺風格起點：

風格	主色	字體組合	適用場景
優雅雜誌風	oklch 暖棕	Newsreader + Outfit	內容平台、博客
高端品牌	oklch 近黑	Sora + Plus Jakarta Sans	奢侈品、諮詢
活潑消費	oklch 珊瑚	Plus Jakarta Sans + Outfit	電商、社交
極簡專業	oklch 青藍	Outfit + Space Grotesk	數據產品、B2B
手作温度	oklch 焦糖	Caveat + Newsreader	餐飲、教育

這些配對的核心邏輯是：給 AI 一個有品位的起點，比讓它自由發揮好得多。

當用戶沒有提供任何設計上下文時，AI 從這些經驗證的組合出發，比默認的 Inter + 藍色按鈕好上幾個檔次。

6. 技術硬規則

繼承了 Claude Design 的三條絕對不能違反的規則：

禁止 const styles = {...}——多組件環境中的全局樣式對象命名衝突是個真實的坑。
跨 babel 腳本不共享作用域——必須顯式掛到 window 上。
禁止 scrollIntoView — 在 iframe 嵌入環境中會破壞外部滾動。

這些都是被真實 bug 驗證過的規則，每一條都有具體的技術原因。

7. 附贈的高級模式庫

Skill 附帶一個 references/advanced-patterns.md 文件，包含：

響應式幻燈片引擎模板
設備模擬框架（iPhone / 瀏覽器窗口）
動畫時間線引擎
設計畫布（多方案對比）
oklch 色彩系統代碼
Chart.js 數據可視化模板

這些模板的定位類似於 Claude Design 的 copy_starter_component — 給 AI 提供高質量的起點腳手架，而非讓它從零開始手搓。

四、實戰對比：Skill 到底帶來了多少提升？

說了這麼多理論，到底有沒有用？

我用同一個提示詞，分別在有 Skill 和沒有 Skill 的情況下生成了兩個頁面，來看看實際效果。

注：以下測試使用的環境是 Cursor + Claude Opus 4.7

4.1 DEMO 1：太空探索博物館

提示詞（完全相同）：

幫我做一個 "太空探索博物館" 的線上展覽首頁。這是一個虛構的博物館，專門展示人類太空探索的里程碑。頁面需要包含：一個震撼的全屏 Hero 區域、4 個核心展覽介紹（如 "登月時代"、"空間站生活"、"火星計劃"、"深空探索"）、一個時間線展示人類太空探索大事記（至少 6 個節點）、參觀預約 CTA 區域、頁腳。整體風格要沉浸感強、有宇宙的深邃感。

無 Skill 版本

模型（Claude Opus 4.7）本身已經很強。

無 Skill 版本用了 Orbitron + Noto Serif SC 的字體組合，有 Canvas 星空背景、CSS 繪製的行星、軌道環、流星動畫。

整體觀感已經很不錯了 — 深色背景、發光效果、漸變文字，太空感是有的。

但仔細看，有幾個典型的"AI 設計"痕跡：

配色偏向 AI 默認審美。 青色（#7cf0ff）、紫色（#b388ff）、粉色（#ff7ad4）這套三色漸變組合，在 AI 生成的太空主題網頁中非常常見。不是不好看，是太常見了。
字體選擇偏傳統。 Orbitron 是一個非常"直覺"的太空字體選擇 — 幾乎所有 AI 做太空主題都會用它。辨識度不夠。

佈局相對標準化。 Hero → 卡片網格 → 時間線 → CTA → 頁腳，是一個教科書式的落地頁結構。安全，但缺少驚喜。
視覺效果靠堆砌。 大量 box-shadow 發光效果、多層漸變背景、CSS 行星動畫 — 視覺衝擊有，但設計感不夠剋制。

有 Skill 版本

帶 Skill 的版本，差異在幾個層面上體現出來。

配色體系完全不同。 用了 oklch 色彩空間定義整套色彩系統 — var(--ink) 是 oklch(0.10 0.015 250)，var(--ember) 是 oklch(0.78 0.13 65)。整個色彩方案更加剋制和高級，沒有濃烈的霓虹感，取而代之的是一種接近雜誌印刷品質的深沉色調。

字體選擇更考究。 Instrument Serif + Space Grotesk + JetBrains Mono 三件套。Instrument Serif 的襯線字做大標題，有雜誌編輯質感；Space Grotesk 做正文，技術感但不冰冷；JetBrains Mono 做輔助信息（座標、編號），自帶科技敍事。

排版手法更成熟。 標題用了文字逐行入場動畫（rise keyframe），每行有微妙的延遲差。Hero 區域底部有一條信息欄 — 左側座標數據、中間描述性文案、右側行動按鈕 — 用 grid 三欄佈局分配。這種編輯感的排版方式很明顯受到了高端雜誌和設計工作室網站的影響。

細節更精緻。 導航欄 logo 是三個同心圓 + 一個 ember 色小圓點（用 CSS ::before 和 ::after 實現），有天體軌道的隱喻。頁面右上角有一組實時座標數據（ISS — LIVE TELEMETRY），作為裝飾性信息元素。整個頁面用 clamp() 做流式排版，間距全部用 CSS 自定義屬性管理。