拆解 Claude 的前端設計 Skill
整理版優先睇
拆解 Claude 前端設計 Skill：五條原則脱離 AI 味
呢篇文章係拆解 Anthropic 開源嘅 frontend-design Skill，目前安裝量超過 90 萬。作者係一位熟悉 AI 生成介面嘅技術寫手，佢想解決嘅問題係：點解 AI 生成嘅前端頁面成日都好模板化、冇辨識度？整體結論係呢條 Skill 透過角色設定、視覺語言從項目長出、五條設計原則、校準機制同剋制方法，令 Claude 生成嘅介面更有個性。
文章開頭點出典型 AI 生成頁面嘅問題：紫色漸變、圓角按鈕、空洞標語，換個產品名就係另一個網站。跟住介紹 Anthropic 開源嘅 Skill，目標係脱離「AI 味」。篇幅唔長但信息密度高，拆解咗五個層面：角色先行、視覺語言從項目長出、五條設計原則、校準機制同剋制執行。
作者認為呢條 Skill 唔止係設計規範，而係教 AI 一套「有判斷力嘅輸出」嘅思維方式。例如用身份設定替代規則清單、先理解項目再決定設計、指出模型自身慣性等。最後提及安裝量證明市場對呢種方法嘅認可。
- Skill 開篇用角色設定（小型設計工作室主理人）代替設計規範，令 AI 先思考客戶背景而非直接套模板。
- 視覺語言應該從項目本身長出：先了解產品工具、用戶、場景，再用資訊決定字體、顏色、佈局。
- 五條設計原則包括：首屏要有觀點、字體要搭配多種、結構元素要傳遞信息、動效要剋制、文案係設計材料。
- 校準機制列出三種常見 AI 視覺慣性模式（暖米底、黑底熒光綠、報紙風），並用兩輪工作法修正。
- 最後引用 Chanel「出門前拿掉一件配飾」，強調一個頁面只留一個記憶點，其餘收斂，並確保移動端可訪問。
GitHub 開源 Skill 原始碼
Anthropic 官方 frontend-design Skill 倉庫，包含完整 Prompt 同設計原則。
Claude 插件安裝頁面
可直接將呢條 Skill 加入 Claude 使用。
角色先行：建立身份
Skill 開篇唔係設計規範，而係一段角色設定：假設你係一家小型設計工作室嘅主理人，俾客戶否定過好幾個方案，理由都係「太似模板」。呢個設定令 AI 由「完成任務」切換到「做設計」嘅心態。冇角色設定嘅 AI 會直接套標準結構；帶咗角色設定嘅 AI 會先問產品係乜、俾邊個用、有咩視覺記憶點。
角色設定令 AI 由「完成任務」切換到「做設計」
視覺語言從項目長出
Skill 要求 Claude 動手前先搞清楚產品本身：用咩工具、面向邊類人、日常接觸啲乜。視覺語言嘅答案藏喺呢啲資訊入面，唔喺模板庫。
視覺語言嘅答案藏喺產品資訊入面，唔喺模板庫
- 精釀啤酒：酒標風格，用銅器發酵、橡木桶陳年，6.2% ABV。
- SaaS 數據工具：直接顯示「Query 任意數據源，幾秒出答案」，連結 Postgres、Snowflake。
- 兩套視覺差異由產品屬性決定，唔係設計師亂揀。
五條設計原則
字體係設計嘅一部分，唔係背景。AI 生成頁面成日撞樣，因為用同一套系統字體。Skill 建議至少搭配兩到三種字體：標題用襯線斜體，正文用無襯線，Mono 留畀數據。
字體應該有自己嘅表達，唔係沉默地承載文字
結構元素（如編號、分割線）要傳遞信息。如果內容係並列關係，編號就係裝飾。操作步驟先需要按順序編號。
編號只喺內容有先後順序時先有意義
動效過多會強化「AI 感」。一個精心編排嘅瞬間，比四散嘅效果更有力量。
一個精心編排嘅瞬間，比四散嘅效果更有力量
文案係設計材料。用用戶聽得明嘅詞命名，按鈕寫清楚操作結果，報錯講解決方法，空白頁引導下一步。
文案嘅地位同顏色、間距一樣高
- 用用戶聽得明嘅詞，唔暴露系統細節。
- 按鈕寫清楚操作結果，例如「保存更改」而唔係「提交」。
- 報錯唔道歉，直接講發生咩同點樣修復。
- 空白頁引導下一步，唔係情緒表達。
校準機制：列舉慣性路徑然後繞開
Skill 直接列出三種當前 AI 最常見嘅視覺慣性模式：暖米底 + 粗襯線 + 陶土色、黑底 + 熒光綠、報紙風 + 髮絲線 + 密排。呢啲風格本身冇問題，但出現次數太高，而且同項目無關，係訓練數據嘅慣性。
呢三種風格係訓練數據嘅慣性，唔係刻意設計
- 1 第一輪：出方案，決定色彩、字體、佈局、簽名元素。
- 2 第二輪：自查，逐項審視如果放喺其他項目都成立，就係慣性產物，要修改。
剋制執行：一個記憶點就夠
Skill 引用 Chanel 名言：「出門前照鏡，拎走一件配飾。」一個頁面只留一個記憶點，其他全部收斂。避免堆疊漸變、玻璃擬態、大圓角、陰影、邊框光、粒子動畫等。
一個頁面只留一個記憶點，其他全部收斂
基礎質量要求：移動端可訪問、鍵盤焦點可見、尊重用戶動效偏好設置。呢啲唔係賣點，但必須做到。
1. 用身份設定替代規則清單
2. 先理解項目內容，再決定設計形式
3. 指出模型自身嘅慣性，讓模型主動迴避
4. 把表達慾望集中在一個點上，其餘全部剋制
5. 把文案視為設計材料嘅一部分Claude 係點樣做前端設計嘅
拆解 Anthropic 開源嘅 Frontend Design Skill
用 AI 生成過前端頁面嘅人，應該都會有個感受：成品用得，但係辨識度係零。紫色漸變、圓角按鈕、放諸四海而皆準嘅空洞標語，換個產品名就係另一個網站。
Anthropic 喺 GitHub 開源咗一條叫frontend-design嘅 Skill，目前安裝量超過 90 萬。呢條 Skill 嘅目標好明確：等 Claude 生成嘅前端界面擺脱「AI 味」。
全文唔夠 1500 個英文詞，信息密度好高。以下係對佢嘅逐層拆解。
角色先行：落筆之前先建立身份
Skill 嘅開篇唔係設計規範，而係一段角色設定：
假設你係一間細型設計工作室嘅主理人。呢間工作室嘅口碑係，畀任何客做嘅方案，都唔會同人撞，一眼就認得出。
緊接住，Skill 補充咗一個關鍵信息：呢個客已經否咗幾個方案，理由都係「太似模板」。佢畀錢買嘅就係一個有辨識度嘅嘢。
前者係完成任務，後者係做緊設計。Skill 用幾句話完成咗心態層面嘅切換。
視覺語言應該從項目裏面生出來
Skill 明確要求 Claude 喺動手之前先將產品本身搞清楚。用緊乜架生，面向邊班人，日常接觸嘅係啲乜嘢。視覺語言嘅答案收埋喺呢啲信息裏面，唔喺模板庫度。
一個似酒標，一個似產品說明板。兩套視覺語言嘅差異唔係邊個規定，而係各自嘅產品屬性決定嘅。
五條設計原則：核心得一句話
每一條都係反對偷懶同套公式。
一、首屏要有觀點
Skill 點名咗一種好多人用嘅套路：大數字 + 小標籤 + 漸變背景色。
「10x」換成任何產品都得，「23 分鐘變 47 秒」係呢個產品自己嘅故事。除非漸變大數字真係最合適嘅選擇，否則呢個唔係表達，係偷懶。
二、字體係設計嘅一部分，唔係背景
AI 生成嘅頁面之所以個個都一個樣，字體選擇係重要原因之一。次次都用同一套系統字體，梗係一樣樣啦。
Skill 建議至少配兩到三種字體，分別負責標題、正文、數據註釋三個角色。字體應該有自己嘅表達，而唔係靜靜雞承載文字。
三、結構元素要傳遞資訊
AI 生成嘅頁面成日出現 01 / 02 / 03 呢啲編號。Skill 嘅判斷係：只有當內容本身真係有先後順序嗰陣，編號先有意義。
呢個原則同樣適用於分割線、標籤、眉標等結構性元素：佢哋嘅存在應該幫人理解內容，而唔係填滿視覺空白。
四、動效過多會強化「AI 感」
Skill 提出咗一個值得留意嘅判斷：過多嘅動效本身就會令界面睇起嚟似 AI 生成。
一個精心編排嘅瞬間，比起四圍散落嘅效果更加有力量。有時做得少比做得多難，但效果更好。
五、文案係設計材料
呢個係一個成日被忽略嘅維度。Skill 將文案嘅地位提升到同顏色、間距同一級別。
Skill 喺呢個部分畀嘅幾條原則：
用用戶聽得明嘅詞命名，唔好暴露系統實現細節。
按鈕要寫清楚操作結果，例如「保存更改」而唔係「提交」。
報錯唔使道歉，講清楚發生咩事同點樣修復。
空白頁面唔係情緒表達，而係引導用戶下一步操作。
校準機制：列出 AI 嘅慣性路徑，然後繞開
呢個係成條 Skill 最值得注意嘅部分。Skill 直接列出咗目前 AI 生成設計最常見嘅三種視覺模式：
呢三種風格本身冇問題，喺合適嘅項目裏面完全成立。問題在於佢哋出現嘅頻率太高，而且同項目內容無關，係訓練數據入面形成嘅慣性。
Skill 嘅應對策略係兩輪工作法：
剋制本身就係能力
Skill 引咗 Chanel 一句話：
一個頁面淨係留一個記憶點，其他全部收斂。
此外，Skill 亦提及咗一啲基礎質量要求：流動裝置可訪問、鍵盤焦點可見、尊重用戶對動效嘅偏好設定。呢啲唔應該拎嚟當賣點，但係必須做到。
寫喺表面之下嘅方法論
呢條 Skill 嘅標題係前端設計，但佢實際做緊嘅係教 AI 一套「有判斷力嘅輸出」嘅思維方式。
呢套寫法嘅適用範圍唔限於前端設計。任何需要 AI 產出有辨識度、有判斷力嘅場景，都可以參考呢種結構。
90 萬嘅安裝量說明咗市場嘅判斷。
REFERENCES
github.com/anthropics/skills/blob/main/skills/frontend-design
claude.com/plugins/frontend-design
Claude 是怎麼做前端設計的
拆解 Anthropic 開源的 Frontend Design Skill
用 AI 生成過前端頁面的人，應該都會有一個感受：成品能用，但辨識度為零。紫色漸變、圓角按鈕、放之四海而皆準的空洞標語，換個產品名就是另一個網站。
Anthropic 在 GitHub 開源了一條名為frontend-design的 Skill，目前安裝量超過 90 萬。這條 Skill 的目標很明確：讓 Claude 生成的前端界面脱離「AI 味」。
全文不到 1500 個英文詞，信息密度很高。以下是對它的逐層拆解。
角色先行：在下筆之前先建立身份
Skill 的開篇不是設計規範，而是一段角色設定：
假設你是一家小型設計工作室的主理人。這家工作室的口碑在於，給任何客戶做的方案，都不會跟別人撞，一眼就能認出來。
緊接着，Skill 補充了一個關鍵信息：這個客戶已經否掉了好幾個方案，理由都是「太像模板」。他付費買的就是一個有辨識度的東西。
前者是完成任務，後者是在做設計。Skill 用幾句話完成了心態層面的切換。
視覺語言應該從項目里長出來
Skill 明確要求 Claude 在動手之前先把產品本身搞清楚。用的是什麼工具，面向什麼人羣，日常接觸的是什麼樣的東西。視覺語言的答案藏在這些信息裏，不在模板庫裏。
一個像酒標，一個像產品說明板。兩套視覺語言的差異不是誰規定的，是各自的產品屬性決定的。
五條設計原則：核心只有一句話
每一條都在反對偷懶和套公式。
一、首屏要有觀點
Skill 點名了一種被大量使用的套路：大數字 + 小標籤 + 漸變背景色。
「10x」換成任意產品都能成立，「23 分鐘變 47 秒」是這個產品自己的故事。除非漸變大數字確實是最合適的選擇，否則這不是表達，是偷懶。
二、字體是設計的一部分，不是背景
AI 生成的頁面之所以都長一個樣，字體選擇是重要原因之一。每次都是同一套系統字體，當然長得一樣。
Skill 建議至少搭配兩到三種字體，分別承擔標題、正文、數據註釋三個角色。字體應該有自己的表達，而不只是沉默地承載文字。
三、結構元素要傳遞信息
AI 生成的頁面中經常出現 01 / 02 / 03 這樣的編號。Skill 的判斷是：只有當內容本身確實存在先後順序時，編號才有意義。
這個原則同樣適用於分割線、標籤、眉標等結構性元素：它們的存在應該幫助理解內容，而不是填滿視覺空白。
四、動效過多會強化「AI 感」
Skill 提出了一個值得注意的判斷：過多的動效本身就會讓界面看起來像是 AI 生成的。
一個精心編排的瞬間，比四處散落的效果更有力量。有時候少做比多做難，但效果更好。
五、文案是設計材料
這是一個容易被忽略的維度。Skill 把文案的地位提升到了和顏色、間距同一級別。
Skill 在這個部分給出的幾條原則：
用用戶聽得懂的詞命名，不暴露系統實現細節。
按鈕要寫清楚操作結果，比如「保存更改」而不是「提交」。
報錯不道歉，說清楚發生了什麼以及怎麼修復。
空白頁面不是情緒表達，是引導用戶下一步操作。
校準機制：列出 AI 的慣性路徑，然後繞開
這是整條 Skill 裏最值得注意的部分。Skill 直接列出了當前 AI 生成設計最常見的三種視覺模式：
這三種風格本身沒有問題，在合適的項目裏完全成立。問題在於它們出現的頻率太高，而且和項目內容無關，是訓練數據裏形成的慣性。
Skill 的應對策略是兩輪工作法：
剋制本身就是能力
Skill 引用了 Chanel 的一句話：
一個頁面只留一個記憶點，其他全部收斂。
此外，Skill 也提及了一些基礎質量要求：移動端可訪問、鍵盤焦點可見、尊重用戶對動效的偏好設置。這些不應該被拿來當作賣點，但必須做到。
寫在表面之下的方法論
這條 Skill 的標題是前端設計，但它實際在做的事情是教 AI 一套「有判斷力的輸出」的思維方式。
這套寫法的適用範圍不限於前端設計。任何需要 AI 產出有辨識度、有判斷力的場景，都可以參考這種結構。
90 萬的安裝量說明了市場的判斷。
REFERENCES
github.com/anthropics/skills/blob/main/skills/frontend-design
claude.com/plugins/frontend-design