用skill做設計規範，迭代設計稿
整理版優先睇
用Claude Skill建立設計規範，AI自動生成界面，只要稍作微調就用得
呢篇文章係由德國留學迴流嘅UIUX設計師陳婉寧撰寫，佢有10年+設計經驗，而家專注分享AI輔助設計嘅方法。文章想解決嘅問題係：點樣令AI跟住公司設計規範去生成界面，而唔係亂畫。佢介紹咗Claude嘅Skill功能──就好似AI嘅操作手冊，可以定義配色、字體、圓角、佈局規則等。佢用自己整嘅blue-wannning Skill做例子，示範咗兩種建立方法：一種係直接將Figma設計規範同典型頁面連結俾Claude讀取，自動生成Skill；另一種係跟住Claude不斷提問，逐步完善規範。
整體結論好實在：只要設計規範夠完整，AI生成嘅B端界面已經接近人工水準，日常簡單嘅界面補充需求可以交給AI做，設計師只需要微調細節。佢仲放咗3年前人手做嘅界面同AI生成嘅對比，證明效果幾好。
最後佢簡單介紹自己，話持續沉澱UIUX文章200+，歡迎讀者加微信交流。成篇文章嘅核心就係教人點樣整一個可用嘅設計規範Skill，提升工作效率。
- 結論：完善嘅設計規範配合Claude Skill，可以令AI自動生成界面，只需微調就能用。
- 方法：有兩種建立Skill嘅途徑──從Figma連結自動生成，或跟住Claude引導逐步完善。
- 差異：自動生成快但依賴Figma MCP；引導式更專業，可以逐步補齊規範細節。
- 啟發：AI唔係取代設計師，而係將重複性工作自動化，設計師可以專注更高層次嘅決策。
- 可行動點：設計師可以即時整理公司現有設計規範，匯入Claude整成Skill，試用喺日常界面需求上。
Skill即係AI嘅操作手冊
Skill就好似你入新公司時HR俾你嗰本《設計規範執行指南》，入面寫明用咩工具、跟咩規範、交付咩格式。而家呢本手冊俾咗AI，佢就會跟住做。
Skill就係AI嘅操作手冊，定義好規範後AI唔會亂畫。
作者用Claude整咗一個叫blue-wannning嘅Skill，入面定義咗配色、字體、圓角、佈局規則等。之後同AI講「幫我做一個B端管理界面」，AI會先讀呢個Skill先開始設計。
方法一：從Figma設計規範自動生成Skill
首先喺Figma整理好成個設計規範，再放幾個典型頁面，然後將Figma文檔連結俾Claude（前提係要駁好Figma MCP）。Claude會自動讀取並生成一個完整嘅Skill檔案。
之後喺提示詞講「使用blue-wannning嘅skill生成界面」，AI就會跟住規範畫。作者比較咗AI生成同3年前人手做嘅界面，發現基本只需稍作微調就可以直接用。
日常簡單嘅B端界面補充需求，用AI完全搞得掂。
方法二：跟住Claude引導逐步完善（更專業）
另一個方法係直接同Claude講想整設計規範Skill，Claude會不斷問問題嚟瞭解你嘅需求，例如用咩顏色、幾大圓角、佈局網格點樣。
呢種方法透過對話逐步建立規範，最終生成嘅Skill會更完整、更專業。
作者建議可以根據Claude俾出嘅Skill框架去修改完善自己嘅設計規範，令Skill更加貼近實際需要。
- 方法一適合已有完整Figma規範嘅團隊，快但依賴MCP連線。
- 方法二適合由零開始或想逐項確認細節嘅設計師，可確保規範冇遺漏。
AI生成 vs 人工製作：相差無幾
作者展示咗3年前人工製作嘅B端界面同AI跟住blue-wannning Skill生成嘅界面對比，發現無論係佈局、配色定係元件細節都好接近，AI版本只需少少微調就可以直接用。
呢個結果證明，只要設計規範夠詳細，AI完全勝任日常界面補充工作。
呢個方法可以大幅釋放設計師時間，尤其係重複性高嘅B端界面迭代，以後可以專注喺更複雜嘅設計決策同用戶體驗優化上。
Skill 簡單講就係 AI 嘅操作手冊。
打個比喻：
當你入職一間新公司，HR 俾你一本《設計規範執行指南》，入面寫住：用咩工具（Figma、藍湖定即時設計），跟咩規範（字型、顏色、間距），俾咩格式（切圖規則、標註要求）。
每次你接到工作嘅設計任務，都會先睇呢本手冊，確保輸出符合公司標準。
Skill 就好似呢本手冊，而 AI 就係入職呢間新公司嘅人，需要跟住呢本手冊一步步去操作。
比如：
我喺 Claude 整咗一個叫 blue-wanning 嘅 skill，入面定義咗呢套產品用咩配色、字型、圓角，掣、表單、卡片係咩樣，界面佈局跟咩網格規則。
當你同 AI 講「幫我做一個 B 端管理界面」，AI 會先讀呢個 Skill，然後跟住入面嘅規範去產生界面，而唔係憑感覺隨便設計一個。
點樣喺 Claude 入面創建 skill，可以睇呢篇：零代碼點樣快速創建 Claude 技能 skill？
跟住開始整呢個設計規範 skill。
整設計規範 skill 嘅方法 1 - 透過現有設計規範同頁面產生
首先喺 Figma 入面整理一套產品嘅設計規範，再放幾個典型頁面。
將呢個文檔嘅連結 Send 俾 Claude，等佢讀取並產生 skill。
需要提前連接好 Figma MCP，具體方法可以睇呢篇：Claude 同 FigJam 打通，快速產生流程圖（可以修改）- UX 交互設計&產品經理
跟住 Claude 自己就整好咗呢份 skill，可以睇下大概結構：有描述、skill 名、品牌名、典型區域尺寸、色彩等。
顏色色值同埋關鍵區域嘅尺寸、色值都有描述說明。右上角撳【save skill】保存。
跟住就可以喺 customize > Skills 度見到啱啱創建嘅 skill 名 blue-wanning。
之後產生界面時要用呢個設計規範，只需喺提示詞中講，用 blue-wanning 嘅 skill 產生界面，就會跟呢個設計規範產生界面。
跟住將產生嘅界面同人工製作嘅界面對比一下，基本上只要稍為微調就可以直接用。
下面係我哋 3 年前人工製作嘅界面，呢個項目係 3 年前做嘅一個項目，可以對比一下：
喺設計規範完善嘅情況下，將佢整成 skill，呢啲日常簡單嘅 B 端界面補充需求，用 AI 完全可以做到。
整設計規範 skill 嘅方法 2 - 根據 Claude 提示一步步補充（更專業）
呢個方法就係根據 Claude 嘅引導一步步整，會做得更加完整、專業。
Claude 會透過不斷問你問題嘅形式去了解你嘅需求。
跟住構建計劃，整 skill 檔案。
可以根據 Claude 俾嘅 skill 框架去修改完善我哋自己嘅設計規範，從而使自己嘅設計規範 skill 更加完善。
ChatGPT Image2 UI 界面設計稿：100% 還原 + 代碼級交付（可落地）
AI 完成 App 首頁 UI 界面 redesign，UX 設計 AI 工作流全流程拆解（超細緻！）
That's all.
我係陳婉寧，德國交互設計專業留學 5 年，用戶體驗設計師，深耕設計領域 10 年+，UIUX 設計教學經驗 3 年+。
持續沉澱 UIUX 設計類文章 200+，朋友圈每日持續分享 UIUX 設計領域乾貨知識，希望用自己嘅設計經驗陪你們一路闖關！
歡迎加我：wanning2755
skill簡單來說就是AI的操作手冊。
打個比方：
當你入職一家新公司，HR 給你一本《設計規範執行指南》，裏面寫着：用什麼工具（Figma、藍湖還是即時設計），遵循什麼規範（字體、顏色、間距），交付什麼格式（切圖規則、標註要求）。
每次你接到工作的設計任務，都會先翻這本手冊，確保輸出符合公司標準。
Skill 就像是這本手冊，而AI就是入職這家新公司的人，需要按照這本手冊去一步步操作。
比如：
我在Claude製作了一個名字叫blue-wannning的skill，裏面定義了這套產品用什麼配色、字體、圓角，按鈕、表單、卡片長什麼樣，界面佈局遵循什麼網格規則。
當你和AI說「幫我做一個B端管理界面」，AI 會先讀這個 Skill，然後按照裏面的規範來生成界面，而不是憑感覺隨便設計一個。
如何在claude裏創建skill，可以看這篇：零代碼如何快速創建Claude技能skill？
接着開始製作這個設計規範skill。
製作設計規範skill的方法1-通過現有設計規範和頁面生成
首先在figma裏整理一套產品的設計規範，再放幾個典型頁面。
把這個文檔的連結發給claude，讓其讀取並生成skill
需提前連接好figma MCP，具體方法可以看這篇：Claude與FigJam打通，快速生成流程圖（可修改）- UX交互設計&產品經理
接着claude自己就把這份skill製作好了，可以看一下大致結構：有描述、skill名稱、品牌名、典型區域尺寸、色彩等等。
顏色色值還有關鍵區域的尺寸、色值都有描述說明。右上角點擊【save skill】保存。
接着就可以在customize>Skills裏看到剛剛創建的skill名稱blue-wanning
後面生成界面時需要使用該設計規範時，只需在提示詞中說，使用blue-wanning的skill生成界面就會按照這個設計規範生成界面。
接着把生成的界面和人工製作的界面對比一下，基本只要稍作微調即可直接使用。
下面是我們3年前人工製作的界面，這個項目是3年前做的一個項目，可以對比一下：
在設計規範完善的情況下，把它製作成skill，這些日常簡單的B端界面補充需求，用AI完全可以做了。
製作設計規範skill的方法2-根據claude提示一步步補充（更專業）
這個方法就是根據claude的引導一步步製作，會做得更加完整、專業。
claude會通過向你不斷問問題的形式瞭解你的需求。
接着構建計劃，製作skill文件。
可以根據claude給的skill的框架去修改完善我們自己的設計規範，從而讓我的設計規範skill更加完善。
chatgpt Image2 UI界面設計稿：100%還原+代碼級交付（可落地）
AI完成App首頁UI界面redesign，UX設計AI工作流全流程拆解（超細緻！）
That's all.
我是陳婉寧，德國交互設計專業留學5年，用戶體驗設計師，深耕設計領域10年+，UIUX設計教學經驗3年+ 。
持續沉澱UIUX設計類文章200+，朋友圈每日持續分享uiux設計領域乾貨知識，希望用自己的設計經驗陪你們一路闖關！
歡迎加我：wanning2755