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

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

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

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

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

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

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

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

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

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

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

AI也是一樣的道理。

好了，回到正題。假設(shè)你有一套成熟的設(shè)計(jì)規(guī)范和組件庫(kù)，怎么把它一步步變成你能用的skill？我就用網(wǎng)上公開(kāi)的騰訊的TDesign figma組件庫(kù)用作演示案例吧，利用claude來(lái)生成對(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里，有些是圖片格式，有些是組件庫(kù)，有些是pdf品牌手冊(cè)，把它們先都整理好。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

組件樣式要逐個(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è)思路來(lái)寫一遍。

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

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

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

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

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

第四步，測(cè)試和迭代。

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

比如我跟claude直接說(shuō)

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

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

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

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

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

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

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

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

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

它更像是幫你跳過(guò)了從0到6的部分，但從6到9還是得你自己來(lái)。

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

具體來(lái)說(shuō)，我覺(jué)得目前最實(shí)際的提效場(chǎng)景有三個(gè)。

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

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

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

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

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

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

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

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

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

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

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

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

現(xiàn)在還可以在池塘邊不下場(chǎng)摸魚(yú)，但至少也要看看別人有沒(méi)有摸到魚(yú)。

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

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

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