怎么把公司里的設(shè)計(jì)規(guī)范變成skill？

群里有人問我怎么把公司的設(shè)計(jì)規(guī)范寫成skills？這是一個(gè)很實(shí)際的好問題，今天就詳細(xì)的聊一下我到底怎么弄的。

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

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

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

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

我也不知道方法成不成熟，先把我目前的經(jīng)驗(yàn)毫無保留地分享出來。

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

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

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

說到這里我想多說幾句。如果你啥也不給，讓AI自由發(fā)揮，出來的東西大概率是那種千篇一律的Inter字體加紫色漸變加白色背景的標(biāo)準(zhǔn)AI味設(shè)計(jì)。說白了，就是 AI會(huì)優(yōu)先落到統(tǒng)計(jì)學(xué)上最常見、最安全的那類解法上，所以每次出來的東西看起來會(huì)有明顯的同質(zhì)化傾向。

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

AI也是一樣的道理。

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

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

第一步，把現(xiàn)有的設(shè)計(jì)資產(chǎn)規(guī)范先整理好。

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

像騰訊云這個(gè)規(guī)范跟組件庫都在figma里，但如果你只把這個(gè)鏈接發(fā)給claude的話，它是沒辦法識(shí)別的。

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

導(dǎo)出后，你會(huì)得到一堆設(shè)計(jì)規(guī)范pdf。

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

打開Claude，把收集到的設(shè)計(jì)規(guī)范文檔，圖片啥的往對(duì)話框里一丟，然后跟它說

幫我把這些設(shè)計(jì)規(guī)范整理成一個(gè)SKILL.md文件，用于約束AI生成符合我們品牌規(guī)范的UI。

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

很正常，初稿就是初稿，肯定還是要調(diào)優(yōu)的，沒有一遍就搞定的skill。

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

第三步，人工校對(duì)和補(bǔ)充，這一步最關(guān)鍵。

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

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

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

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

整體風(fēng)格追求清晰高效的企業(yè)級(jí)質(zhì)感，以中性色為主基調(diào)，界面干凈、信息層級(jí)分明、沒有多余的裝飾。品牌色騰訊藍(lán)作為唯一的強(qiáng)調(diào)色貫穿交互元素，整體給人的感覺是穩(wěn)健、專業(yè)、不張揚(yáng)。

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

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

比如要寫主色 #0052D9 用于核心交互元素和品牌強(qiáng)調(diào)，成功色 #2BA471 用于成功狀態(tài)和正向反饋，錯(cuò)誤色 #D54941 僅用于錯(cuò)誤狀態(tài)和危險(xiǎn)操作。這個(gè)僅用于三個(gè)字特別重要，它告訴AI這個(gè)顏色的使用邊界在哪。

如果只寫一串色值不說用途，AI就會(huì)隨機(jī)混著用。警告紅可能出現(xiàn)在某個(gè)裝飾圖標(biāo)上，品牌色可能被拿去當(dāng)背景色鋪滿整個(gè)頁面，看著就不對(duì)。

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

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

主按鈕，背景#0052D9，文字#FFFFFF，圓角8px，高度80rpx，內(nèi)邊距左右32rpx，字號(hào)32rpx字重500。禁用狀態(tài)背景色變?yōu)?D4E3FC，文字色變?yōu)?A6C4F7。

這種級(jí)別的細(xì)節(jié)AI才能真正用上。卡片、導(dǎo)航欄、輸入框、彈窗，每個(gè)高頻組件都按這個(gè)思路來寫一遍。

寫到這你可能已經(jīng)覺得有點(diǎn)煩了，一個(gè)一個(gè)組件地?fù)竻?shù)，跟寫說明書似的。但我跟你說，上面那些都是基本功，下面這塊才是真正的大殺器。

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

你想想你們公司設(shè)計(jì)評(píng)審的時(shí)候最常被打回來的問題是什么？那些就是你要寫在這里的東西。

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

這些禁區(qū)寫得越具體，AI犯錯(cuò)的概率就越低。我自己的經(jīng)驗(yàn)是，不能做清單對(duì)輸出質(zhì)量的提升甚至比要做什么更大。因?yàn)锳I大多數(shù)時(shí)候能做對(duì)大方向，但特別容易在細(xì)節(jié)上踩到你們公司的紅線。

第四步，測試和迭代。

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

比如我跟claude直接說

幫我設(shè)計(jì)一個(gè)后臺(tái)頁面，檢測流量狀態(tài)，先寫出后臺(tái)的頁面的數(shù)據(jù)邏輯結(jié)構(gòu)，再開始設(shè)計(jì)具體頁面效果

然后它就能自動(dòng)調(diào)用剛才做好的skill了。

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

我第一次測的時(shí)候，發(fā)現(xiàn)一個(gè)問題，AI在生成列表項(xiàng)的時(shí)候用品牌藍(lán)做了分割線顏色，但TDesign的分割線應(yīng)該是中性色。我回去在不能做里面加了一條，再試就好了。還有一次，AI給按鈕用了16px的圓角，但TDesign移動(dòng)端按鈕標(biāo)準(zhǔn)是8px。這種問題你不測根本發(fā)現(xiàn)不了。

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

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

所以這是一個(gè)不斷補(bǔ)漏的過程。每發(fā)現(xiàn)一個(gè)偏差，就回去補(bǔ)一條規(guī)則。跑上三五輪之后，你會(huì)發(fā)現(xiàn)AI的輸出越來越靠譜了。

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

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

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

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

具體來說，我覺得目前最實(shí)際的提效場景有三個(gè)。

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

一個(gè)是批量生成重復(fù)頁面。很多App里有大量結(jié)構(gòu)類似的頁面，比如不同運(yùn)動(dòng)類型的詳情頁、不同時(shí)間維度的數(shù)據(jù)頁。這些頁面骨架都差不多，以前要一個(gè)個(gè)做，現(xiàn)在可以讓AI基于規(guī)范批量生成，你只做差異化調(diào)整就行。

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

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

所以我覺得，目前是真的可以把它當(dāng)一個(gè)特別聽話但缺少審美直覺的助手。你負(fù)責(zé)判斷，它負(fù)責(zé)執(zhí)行。你告訴它規(guī)則越多越清楚，它執(zhí)行得就越好。

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

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

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

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

說到底，AI工具的天花板的關(guān)鍵還是要看你喂給它的上下文質(zhì)量。

這篇文章里講的方法不一定是最優(yōu)解，我自己也還在摸索。如果你也在搞類似的事情，歡迎來群里一起聊。或者你試了之后發(fā)現(xiàn)哪里不對(duì)，也在評(píng)論區(qū)說說，大家一起把這條路趟出來。

不管你承不承認(rèn)，AI發(fā)展的趨勢已經(jīng)無法阻擋，現(xiàn)在到它真正能落地的時(shí)間已經(jīng)不遠(yuǎn)了。

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

來源 | 彩云譯設(shè)計(jì)（ID：caiyunyisheji）

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

內(nèi)容僅代表作者獨(dú)立觀點(diǎn)，不代表早讀課立場