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

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

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

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

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

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

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

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

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

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

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

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

AI也是一樣的道理。

好了，回到正題。假設(shè)你有一套成熟的設(shè)計規(guī)范和組件庫，怎么把它一步步變成你能用的skill？我就用網(wǎng)上公開的騰訊的TDesign figma組件庫用作演示案例吧，利用claude來生成對應(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è)計資產(chǎn)規(guī)范先整理好。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第四步，測試和迭代。

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

比如我跟claude直接說

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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