怎么把公司里的設計規范變成skill？

群里有人問我怎么把公司的設計規范寫成skills？這是一個很實際的好問題，今天就詳細的聊一下我到底怎么弄的。

我之前就說過AI生成UI，現在到底行不行？。現在的AI工具有個問題，就是生成的UI圖咋一看像那么回事，但真正落地還不大行，尤其是當我們的實際項目需求都特別具體，設計規范又非常明確的情況下，用AI去抽卡無異于大海撈針，能得出能用的組合的概率就跟摸彩票沒太多差別。

但老板又天天要我們用AI來提效，總覺得AI是萬能的，這個矛盾到底咋解決？

其實目前AI的發展已經有這個趨勢了，就是結合具體的設計規范定向輸出UI，這樣慢慢往能用的方向上靠，現在Google Stitch之類的AI設計工具就是這么搞的。思路是對的，我們實際在做設計的時候，也會基于規范來做落地方案，只是對于需求的理解，我們會綜合非常多的因素，AI暫時還沒法幫我們判斷一個東西到底行不行。

回到開頭那個問題，具體怎么弄才能把公司的設計規范、UI KIT那些變成skill，真正意義上幫我們做效率提升呢？

我也不知道方法成不成熟，先把我目前的經驗毫無保留地分享出來。

先聊一下這東西到底是什么？

不管是 Google Stitch 的DESIGN.md，還是 Claude 里的SKILL.md，本質上都在做一件差不多的事，就是把原本散落在規范、組件庫和經驗里的規則，整理成AI更容易讀取和執行的文本約束。AI會在相關任務觸發時加載這些內容，并盡量按你定義的規則來生成結果。你可以理解為，這就是給 AI看的設計規范說明書。

這樣搞的話，你就不用每次開一個新對話都重新跟AI解釋一遍我們公司的主色是什么、按鈕圓角用多大、標題字號是多少。你寫一次，以后每次生成都自動帶上這些約束。

說到這里我想多說幾句。如果你啥也不給，讓AI自由發揮，出來的東西大概率是那種千篇一律的Inter字體加紫色漸變加白色背景的標準AI味設計。說白了，就是 AI會優先落到統計學上最常見、最安全的那類解法上，所以每次出來的東西看起來會有明顯的同質化傾向。

但這不是AI不行，是你沒給它足夠的約束。就好比你跟一個新來的設計師說隨便畫個頁面，他也畫不出你想要的東西。但如果你把設計規范和品牌手冊甩給他，情況就會好很多了。

AI也是一樣的道理。

好了，回到正題。假設你有一套成熟的設計規范和組件庫，怎么把它一步步變成你能用的skill？我就用網上公開的騰訊的TDesign figma組件庫用作演示案例吧，利用claude來生成對應的skill。

https://www.figma.com/design/Rtw8x9oiAZN2dPtnHF9ufV/TDesign-for-mobile--Community-?node-id=0-1&p=f&t=4GnyfIxnVTYYZsWr-0

第一步，把現有的設計資產規范先整理好。

可能每個人的習慣不一樣，有些人的規范在figma里，有些是圖片格式，有些是組件庫，有些是pdf品牌手冊，把它們先都整理好。

像騰訊云這個規范跟組件庫都在figma里，但如果你只把這個鏈接發給claude的話，它是沒辦法識別的。

所以，我的辦法是把它們先都導出成pdf文件。

導出后，你會得到一堆設計規范pdf。

第二步，把這些東西丟給Claude，讓它幫你生成初稿。

打開Claude，把收集到的設計規范文檔，圖片啥的往對話框里一丟，然后跟它說

幫我把這些設計規范整理成一個SKILL.md文件，用于約束AI生成符合我們品牌規范的UI。

我自己試的時候，Claude大概兩分鐘就給我吐出了一份初稿。說實話那個初稿還挺像那么回事的，該有的板塊基本都有了，色彩、字體、組件、間距都覆蓋到了。但細節上肯定需要手動調整，比如有些色值它猜錯了，有些組件的狀態描述不夠精確。

很正常，初稿就是初稿，肯定還是要調優的，沒有一遍就搞定的skill。

寫完后，它會輸出一個SKILL.md的文件，你可以下載到本地修改，也可以直接點保存，就直接給你裝好到了claude里。（如果你想要本地的skill.md文件，如果你用不了claude，也可以參考它的格式自己直接寫了，如果需要的話可以微信找我要）

第三步，人工校對和補充，這一步最關鍵。

Claude生成的初稿一定要你自己一條條過。在這里可以改

這里我分享一下最容易出問題的幾個地方。

一個是氛圍描述。很多人上來就甩色值甩字號，但AI不知道你這些數字組合起來應該是什么什么感覺。你得在文件最開頭用幾段話描述整體的視覺氛圍。

比如TDesign的氛圍可以這么寫，大意是說

整體風格追求清晰高效的企業級質感，以中性色為主基調，界面干凈、信息層級分明、沒有多余的裝飾。品牌色騰訊藍作為唯一的強調色貫穿交互元素，整體給人的感覺是穩健、專業、不張揚。

這段話里沒有一個具體數值，但AI讀完就能建立一個判斷的基調了。后面它在生成的時候遇到兩個方案選哪個，就會往這個方向靠。你公司的設計語言給人什么整體感覺？把它用大白話寫出來就行，不用寫得很文藝但要具體。高端大氣不具體，大面積留白加深色系、產品圖片高清無背景，這才具體。

然后是顏色。顏色不能只給色值，得給每個顏色分配角色。

比如要寫主色 #0052D9 用于核心交互元素和品牌強調，成功色 #2BA471 用于成功狀態和正向反饋，錯誤色 #D54941 僅用于錯誤狀態和危險操作。這個僅用于三個字特別重要，它告訴AI這個顏色的使用邊界在哪。

如果只寫一串色值不說用途，AI就會隨機混著用。警告紅可能出現在某個裝飾圖標上，品牌色可能被拿去當背景色鋪滿整個頁面，看著就不對。

字體這塊我建議寫得越詳細越好。不只是字體名和字號，行高、字重、字間距全都寫上。這些參數差一點，出來的排版質感就差很遠。我之前偷懶少寫了行高，AI生成出來的標題松松垮垮的，一眼就不對勁。后來補上了，出來的效果瞬間就有那味了。所以這塊千萬別嫌煩。

組件樣式要逐個寫清楚。拿按鈕舉例，不能只寫主按鈕用品牌色，得寫成類似這樣的描述

主按鈕，背景#0052D9，文字#FFFFFF，圓角8px，高度80rpx，內邊距左右32rpx，字號32rpx字重500。禁用狀態背景色變為#D4E3FC，文字色變為#A6C4F7。

這種級別的細節AI才能真正用上。卡片、導航欄、輸入框、彈窗，每個高頻組件都按這個思路來寫一遍。

寫到這你可能已經覺得有點煩了，一個一個組件地摳參數，跟寫說明書似的。但我跟你說，上面那些都是基本功，下面這塊才是真正的大殺器。

然后是最容易被忽略但我覺得最有價值的一塊，就是什么不能做。

你想想你們公司設計評審的時候最常被打回來的問題是什么？那些就是你要寫在這里的東西。

比如不要在淺色卡片上用淺色文字，不要給圓角組件加直角陰影，不要把品牌藍用在非交互元素的裝飾上，不要把底部導航超過5個tab，正文不要居中對齊，功能色不能混用，成功綠只用于正向反饋、錯誤紅只用于負向反饋。

這些禁區寫得越具體，AI犯錯的概率就越低。我自己的經驗是，不能做清單對輸出質量的提升甚至比要做什么更大。因為AI大多數時候能做對大方向，但特別容易在細節上踩到你們公司的紅線。

第四步，測試和迭代。

skill寫完放好了，別急著覺得大功告成，得拿幾個真實需求去測一測。

比如我跟claude直接說

幫我設計一個后臺頁面，檢測流量狀態，先寫出后臺的頁面的數據邏輯結構，再開始設計具體頁面效果

然后它就能自動調用剛才做好的skill了。

等把頁面生成出來后，看看它生成的顏色對不對？字體層級對不對？按鈕樣式是不是你要的？

我第一次測的時候，發現一個問題，AI在生成列表項的時候用品牌藍做了分割線顏色，但TDesign的分割線應該是中性色。我回去在不能做里面加了一條，再試就好了。還有一次，AI給按鈕用了16px的圓角，但TDesign移動端按鈕標準是8px。這種問題你不測根本發現不了。

地址在這里，大家也可以看看，感覺也還行吧。

https://claude.ai/public/artifacts/c8bca3cf-5a4a-4c6c-b509-ed9e61f3d117

所以這是一個不斷補漏的過程。每發現一個偏差，就回去補一條規則。跑上三五輪之后，你會發現AI的輸出越來越靠譜了。

好了，說了半天步驟，到底搞完之后能怎么提效呢？

我自己的感受是，有了設計規范skill之后，AI的輸出從完全不能看變成了大方向沒跑偏，色彩體系對了，字體層級對了，組件樣式大致對了。但細節上還是有問題，間距經常不夠精確，有些組件的狀態處理不到位，交互邏輯上的判斷更是完全靠不住，對需求的理解估計要把完整的prd和交互的線框圖給它才可能會好一些，我目前還沒直接去試，你們可以去試試看。

它更像是幫你跳過了從0到6的部分，但從6到9還是得你自己來。

不過這已經很有價值了。我以前要給一個新項目搭頁面框架，光配色和排版就得花半天去對齊規范。現在有了skill之后，AI兩分鐘就能給我一個基本靠譜的起點，第一次看到它自動用對了我寫的品牌色和字體層級的時候，我是真的有點興奮的，就覺得，還有點意思的。

具體來說，我覺得目前最實際的提效場景有三個。

一個是快速出方案。比如產品經理突然說明天要給老板看一版新的個人中心改版方案，你可以先用skill約束讓AI快速生成三四個方向，然后挑一個最接近的再手動精修。以前這事至少半天，現在一兩個小時能搞定。

一個是批量生成重復頁面。很多App里有大量結構類似的頁面，比如不同運動類型的詳情頁、不同時間維度的數據頁。這些頁面骨架都差不多，以前要一個個做，現在可以讓AI基于規范批量生成，你只做差異化調整就行。

還有一個是設計走查。這個可能很多人沒想到，你可以把skill反過來用。不是讓AI生成，而是讓AI基于你的規范去review已有的設計稿，看哪里不符合規范。我試過截圖丟給Claude讓它對照skill做走查，它確實能發現一些明顯的色值偏差和間距問題。當然細微的體感層面的問題它還是判斷不了，但能幫你先過一遍粗篩。

說實話，目前這套東西還遠遠談不上成熟。AI對設計規范的理解還停留在照著數值來的層面，缺少對上下文和用戶場景的綜合判斷。你讓它按規范出一個頁面，它可以做到顏色對、字號對、組件對，但這個場景下到底應該用卡片還是列表、這個操作應該用彈窗還是跳轉新頁面這種需要設計判斷力的問題，它還是不行。

所以我覺得，目前是真的可以把它當一個特別聽話但缺少審美直覺的助手。你負責判斷，它負責執行。你告訴它規則越多越清楚，它執行得就越好。

回到最開始那個問題，這整件事最大的價值可能不只是提效本身。

就像 MC Dean 在分享自己做 63 個 design skills 時提到的，把設計知識真正編碼出來，會逼著你說清楚自己到底懂什么（原文是https://marieclairedean.substack.com/p/i-built-63-design-skills-for-claude）。這某種程度上，也是在審計你自己作為設計師的能力邊界。你會發現很多你以為自己很清楚的規則，其實從來沒有真正說清楚過。什么叫呼吸感？什么叫高級感的投影？你得把這些模糊的形容詞翻譯成具體的參數，翻譯的過程會逼著你重新審視自己到底在做什么。

這也是為什么我一直覺得，AI不是來替代設計師的，它是來逼我們把模糊的經驗變成清晰的規則的。能把自己的設計直覺翻譯成AI能理解的約束條件，這本身就是一種很稀缺的能力。

可能有小伙伴會覺得，搞這些太麻煩了，還不如直接手動做快。我理解這種感覺。但你想想看，你整理一次設計規范，之后每個項目、每個頁面、每個組件的起點都會變好。而且現在SKILL.md背后的 Agent Skills 體系已經在越來越多的工具中被采用，比如 Claude、Codex、Cursor、OpenClaw 等都支持這類技能包思路。所以一份內容往往可以復用，但不同工具在觸發方式、目錄約定和擴展能力上，細節并不完全一樣，落地時還是要稍微調一下。

說到底，AI工具的天花板的關鍵還是要看你喂給它的上下文質量。

這篇文章里講的方法不一定是最優解，我自己也還在摸索。如果你也在搞類似的事情，歡迎來群里一起聊。或者你試了之后發現哪里不對，也在評論區說說，大家一起把這條路趟出來。

不管你承不承認，AI發展的趨勢已經無法阻擋，現在到它真正能落地的時間已經不遠了。

現在還可以在池塘邊不下場摸魚，但至少也要看看別人有沒有摸到魚。

來源 | 彩云譯設計（ID：caiyunyisheji）

作者 | 彩云Sky ; 編輯 | 蝦餃

內容僅代表作者獨立觀點，不代表早讀課立場