如果你最近在關(guān)注 AI Agent 與設(shè)計(jì)工具的結(jié)合應(yīng)該會發(fā)現(xiàn)一個(gè)明顯變化設(shè)計(jì)類能力正在從“對話里的臨時(shí)約定”變成“可安裝、可復(fù)用的技能包”。妍妍老師發(fā)布的 Mono-color Design Skill就是這類實(shí)踐里很有代表性的一個(gè)案例。標(biāo)題里的 Mono-color 對應(yīng)“單色系”設(shè)計(jì)Skill 則是當(dāng)前 AI Agent 生態(tài)中非常關(guān)鍵的一種擴(kuò)展方式。乍看之下它只是把“單色系設(shè)計(jì)”這一條規(guī)則封裝成技能。但真正值得關(guān)注的不是某一個(gè)具體配色方案而是 Skill 機(jī)制帶來的工作方式轉(zhuǎn)變以前你讓 AI 做一張單色海報(bào)需要從色板、排版、對比度、風(fēng)格一遍遍補(bǔ)充要求現(xiàn)在只要掛載一個(gè) SkillAI 就會自動按照預(yù)設(shè)的設(shè)計(jì)規(guī)范執(zhí)行。換句話說設(shè)計(jì)師沉淀下來的不只是提示詞而是一套可復(fù)用、可校驗(yàn)、可持續(xù)迭代的流程資產(chǎn)。這篇文章會把這個(gè)案例拆開講清楚。我會先用開發(fā)者的視角解釋 Skill 到底是什么再講 Mono-color 單色系設(shè)計(jì)的方法論然后給出一個(gè)可以直接模仿的 Skill 文件結(jié)構(gòu)、完整配置和校驗(yàn)?zāi)_本。讀完你可以照著做一個(gè)屬于自己的“XX 設(shè)計(jì) Skill”也可以把這套思路遷移到品牌規(guī)范、數(shù)據(jù)可視化配色、前端 Design Token 管理等工作場景中。1. 這篇文章真正要解決的問題很多人第一次接觸設(shè)計(jì)類 Skill 時(shí)會有一個(gè)錯(cuò)覺這不就是把一段“設(shè)計(jì)規(guī)范提示詞”保存到一個(gè)文件里嗎如果只是這樣那確實(shí)不值得單獨(dú)寫一篇文章。真正的問題在于設(shè)計(jì)規(guī)范和普通提示詞有本質(zhì)區(qū)別。普通提示詞是告訴 AI“你要做什么”設(shè)計(jì)規(guī)范則必須回答“你按什么標(biāo)準(zhǔn)做、做到什么程度算合格、出錯(cuò)了如何修正”。在實(shí)際項(xiàng)目里設(shè)計(jì)規(guī)范往往有大量隱性知識。比如“主色旁邊的淺色不能太灰”“文本色和背景色的對比度不能低于某個(gè)值”“同一套方案里的色相偏差不能超過多少度”。這些細(xì)節(jié)如果只放在對話里AI 每次都要重新理解結(jié)果就是輸出不穩(wěn)定同一個(gè)主色換個(gè)會話生成的結(jié)果風(fēng)格完全對不上。妍妍老師發(fā)布 Mono-color Design Skill 這個(gè)案例真正解決的問題是把一套單色系設(shè)計(jì)規(guī)則固化成 AI Agent 可以自動加載的“能力模塊”。它讓 AI 在生成設(shè)計(jì)前先讀取規(guī)則生成后用參考數(shù)據(jù)和腳本進(jìn)行校驗(yàn)最終輸出的是有依據(jù)、有結(jié)構(gòu)、可以被評審的結(jié)果。什么樣的讀者最應(yīng)該關(guān)注這篇文章設(shè)計(jì)師希望把品牌配色規(guī)范交給 AI 執(zhí)行而不是反復(fù)手動修改圖片。前端工程師在做 Design Token 或主題系統(tǒng)時(shí)需要從主色生成整套色階。AI Agent 開發(fā)者想理解 Skill 的文件結(jié)構(gòu)、編寫方法和調(diào)試方式而不是只會寫 Prompt。數(shù)據(jù)可視化同學(xué)希望圖表配色保持統(tǒng)一品牌色相不再靠肉眼挑色號。一句話總結(jié)第一章設(shè)計(jì)類 Skill 的價(jià)值不在于“寫了一段提示詞”而在于把設(shè)計(jì)判斷力編碼成了可復(fù)用資產(chǎn)。2. Skill 機(jī)制設(shè)計(jì)類 AI 能力的新載體2.1 什么是 SkillSkill 是 AI Agent 生態(tài)中用來擴(kuò)展模型能力的一種標(biāo)準(zhǔn)方式。通俗來說它是一組文件包含“技能說明”和“參考資源”放在指定目錄后AI 客戶端或開發(fā)框架會在合適的時(shí)機(jī)自動加載這些內(nèi)容。對模型來說Skill 相當(dāng)于一份可以隨任務(wù)調(diào)用的“崗位說明書”對使用者來說Skill 相當(dāng)于一個(gè)可以安裝、卸載、版本管理的技能插件。以當(dāng)前主流 Skill 機(jī)制為例一個(gè) Skill 通常以目錄形式存在mono-color-design-skill/ ├── SKILL.md └── references/ └── mono-color-scale.jsonSKILL.md是核心文件描述技能的目標(biāo)、觸發(fā)條件、執(zhí)行步驟和輸出格式。references目錄存放模型需要查詢的參考數(shù)據(jù)比如色階表、設(shè)計(jì)格柵、品牌字體等。當(dāng)用戶在對話中輸入“請生成一套單色系方案”時(shí)Agent 會根據(jù)技能描述判斷是否需要加載該 Skill。如果匹配它會把 SKILL.md 和參考文件內(nèi)容一并送入上下文再生成回答。不同平臺的文件規(guī)范略有差異但整體思路非常相似。2.2 Skill 與普通 Prompt、Plugin 的區(qū)別理解 Skill 的最好方式是把三者放在一起對比對比維度普通 PromptSkill 技能包Plugin 插件知識存放靠用戶每次描述隨技能文件加載通過 API 獲取外部服務(wù)規(guī)則穩(wěn)定性每次重新約定統(tǒng)一加載結(jié)果穩(wěn)定偏執(zhí)行能力可測試性靠人工肉眼判斷可配合腳本校驗(yàn)依賴服務(wù)可用性復(fù)用性低可跨項(xiàng)目掛載可跨應(yīng)用使用團(tuán)隊(duì)協(xié)作依賴個(gè)人經(jīng)驗(yàn)可版本管理、評審需要服務(wù)端部署普通 Prompt 是“一次性約定”Skill 是“持久化約定”Plugin 則是“外部能力接入”。設(shè)計(jì)規(guī)范這類知識型內(nèi)容天然適合放在 Skill 中而不是寫成 Plugin。因?yàn)樵O(shè)計(jì)規(guī)范本質(zhì)上是文檔和判斷規(guī)則不是需要連接數(shù)據(jù)庫或調(diào)用第三方 API 的強(qiáng)邏輯服務(wù)。2.3 為什么說 Skill 適合承載設(shè)計(jì)規(guī)范設(shè)計(jì)規(guī)范有三個(gè)特點(diǎn)可標(biāo)準(zhǔn)化、強(qiáng)約束、需要參考樣例?？蓸?biāo)準(zhǔn)化意味著我們可以把“文本對比度至少 4.5:1”寫成規(guī)則強(qiáng)約束意味著 AI 不能在淺色背景上放淺色文字需要參考樣例意味著單一自然語言描述不足以覆蓋所有邊界情況。Skill 恰好同時(shí)滿足這三點(diǎn)。SKILL.md里的規(guī)則文本解決前兩點(diǎn)references目錄里的色階 JSON 解決第三點(diǎn)。更重要的是Skill 可以隨項(xiàng)目一起放在 Git 倉庫中。每次調(diào)整色階或規(guī)則都能留下變更記錄這對團(tuán)隊(duì)協(xié)作非常關(guān)鍵。這也解釋了為什么設(shè)計(jì)類 Skill 會越來越多它把原本存在于設(shè)計(jì)師腦海中的判斷標(biāo)準(zhǔn)變成了組織可以沉淀的資產(chǎn)。3. Mono-color 設(shè)計(jì)的核心方法論3.1 單色系設(shè)計(jì)的難點(diǎn)如果只看“單色系”這個(gè)名稱很容易誤以為讓 AI 生成單色設(shè)計(jì)很簡單只要用一種顏色就行。但真實(shí)情況恰恰相反單色系設(shè)計(jì)是最容易“翻車”的配色方案之一。原因在于去掉多色對比后只能靠明度和飽和度的變化來區(qū)分信息層級。如果色階設(shè)計(jì)不好整套界面會變得很平或者看起來臟兮兮的。舉個(gè)常見例子AI 生成的單色系方案往往只有兩三個(gè)深淺不同的藍(lán)色放在一起層次缺失用戶根本無法判斷哪個(gè)是主按鈕、哪個(gè)是輔助按鈕。所以讓 AI 學(xué)會單色系設(shè)計(jì)不是在 Prompt 里寫一句“使用單色系風(fēng)格”而是要教會它一套完整的色彩系統(tǒng)構(gòu)建方法。3.2 色相、明度與純度單色系設(shè)計(jì)基于同一色相通過控制兩個(gè)維度來形成層次明度顏色的明暗程度。明度越高越接近白色越低越接近黑色。純度顏色的鮮艷程度。純度越高越鮮艷越低越接近灰色。在 HSB/HSV 色彩模型中色相決定了“這是藍(lán)色還是紅色”飽和度和明度則決定“這個(gè)藍(lán)色是深還是淺、是鮮還是灰”。單色系方案的基本原則是保持色相不變讓飽和度和明度按梯度變化。這里最容易踩坑的地方是很多 AI 模型在生成視覺圖時(shí)并不會嚴(yán)格保持同一色相。比如用戶指定主色為藍(lán)色結(jié)果 AI 輸出里出現(xiàn)了一些偏紫或偏青的顏色。這在專業(yè)設(shè)計(jì)里是不可接受的。因此一份合格的 Mono-color 設(shè)計(jì) Skill必須包含“色相一致性校驗(yàn)”規(guī)則。3.3 從主色到色彩系統(tǒng)色階表怎么設(shè)計(jì)在實(shí)際項(xiàng)目中我們很少直接使用單個(gè)主色而是從主色衍生出一整套色階。最常見的做法是設(shè)計(jì) 50 到 900 共 10 個(gè)層級類似很多設(shè)計(jì)系統(tǒng)里的中性色板{ baseColor: #2563EB, colorScale: [ { step: 50, hex: #EFF6FF }, { step: 100, hex: #DBEAFE }, { step: 200, hex: #BFDBFE }, { step: 300, hex: #93C5FD }, { step: 400, hex: #60A5FA }, { step: 500, hex: #3B82F6 }, { step: 600, hex: #2563EB }, { step: 700, hex: #1D4ED8 }, { step: 800, hex: #1E40AF }, { step: 900, hex: #1E3A8A } ] }這個(gè)示例以#2563EB作為主色從淺到深生成 10 個(gè)層級。淺色用于頁面背景、分隔區(qū)域、狀態(tài)提示中色用于圖標(biāo)、輔助按鈕、邊框深色用于正文、主按鈕、強(qiáng)調(diào)內(nèi)容。如果輸入材料沒有給出現(xiàn)成色階Skill 也應(yīng)該具備生成能力從主色出發(fā)按固定步長調(diào)整飽和度和明度輸出一套可用的色階。關(guān)鍵是所有層級必須保持同一色相。3.4 對比度與文本可讀性單色系設(shè)計(jì)第二個(gè)核心難點(diǎn)是文本可讀性。因?yàn)橥簧嗟念伾谝曈X上的差異沒有互補(bǔ)色那么明顯淺藍(lán)背景配深藍(lán)文字通常沒問題但淺藍(lán)背景配中藍(lán)文字就很容易看不清。判斷文本可讀性最常用的標(biāo)準(zhǔn)是 WCAG 對比度。普通正文文本要求對比度不低于 4.5:1大號文本不低于 3:1。在 Skill 中這些數(shù)值可以直接寫成規(guī)則讓 AI 在生成方案時(shí)自動避開低對比度組合。更穩(wěn)妥的做法是同時(shí)提供校驗(yàn)?zāi)_本用 Python 或 Node.js 讀取生成的色階 JSON自動計(jì)算文本色與背景色的對比度。如果某項(xiàng)組合不達(dá)標(biāo)腳本直接輸出警告。這樣就把“設(shè)計(jì)審美”變成了“可檢查的工程質(zhì)量問題”。4. 環(huán)境準(zhǔn)備與前置條件在實(shí)際動手編寫 Skill 之前先確認(rèn)你的運(yùn)行環(huán)境。本文的示例以通用 Skill 目錄結(jié)構(gòu)為準(zhǔn)不綁定某個(gè)特定平臺的版本。如果你使用的是支持 Agent Skill 機(jī)制的客戶端或開源框架通常需要滿足以下條件一個(gè)支持 Skill 機(jī)制的 AI Agent 客戶端或開發(fā)框架具體名稱和版本以你使用的工具為準(zhǔn)。一個(gè)代碼編輯器推薦 VS Code方便查看 JSON、Markdown 和 Python 文件。本地環(huán)境建議安裝 Python 3.8 或以上版本用于運(yùn)行校驗(yàn)?zāi)_本。如果不想裝 Python也可以用 Node.js 或在線 JSON 工具做亮度校驗(yàn)。一個(gè)測試用主色 HEX 值例如#2563EB后續(xù)示例都基于它展開。版本方面我不建議把某個(gè)具體版本號寫死。Skill 文件格式和框架調(diào)用方式還處于快速變化階段今天可用的字段明天可能被兼容性更好的新字段替代。你更應(yīng)該掌握的是“目錄結(jié)構(gòu) SKILL.md references 校驗(yàn)?zāi)_本”這套最小可運(yùn)行組合。環(huán)境準(zhǔn)備完成后我們進(jìn)入核心部分手動創(chuàng)建一個(gè) Mono-color Design Skill。5. 完整示例創(chuàng)建一個(gè) Mono-color Design Skill5.1 目錄結(jié)構(gòu)與文件清單我們創(chuàng)建一個(gè)最小但完整的 Skill 目錄包含 4 類文件mono-color-design-skill/ ├── SKILL.md ├── references/ │ └── mono-color-scale.json ├── scripts/ │ └── check_mono_palette.py └── examples/ └── prompt-example.mdSKILL.md技能主文件包含元信息、設(shè)計(jì)規(guī)則、執(zhí)行流程。references/mono-color-scale.json標(biāo)準(zhǔn)色階參考數(shù)據(jù)供模型查詢。scripts/check_mono_palette.py校驗(yàn)?zāi)_本用于驗(yàn)證生成結(jié)果的色相一致性和對比度。examples/prompt-example.md調(diào)用示例方便團(tuán)隊(duì)成員理解怎么使用這個(gè) Skill。5.2 編寫 SKILL.md這是整個(gè) Skill 最核心的文件。你可以在SKILL.md中描述技能的目標(biāo)、觸發(fā)條件和輸出格式讓 AI Agent 知道什么時(shí)候該加載它以及加載后按什么流程執(zhí)行。--- name: mono-color-design-skill description: 基于單一主色生成完整單色系色彩方案包括色階、界面配色和設(shè)計(jì)說明。 version: 1.0.0 metadata: author: demo-team tags: [design, mono-color, ui] --- # Mono-color Design Skill ## Skill 目標(biāo) 當(dāng)用戶要求執(zhí)行“單色系設(shè)計(jì)”“Mono-color Design”或“生成單色配色方案”時(shí)加載本技能輸出一套符合品牌規(guī)范的完整單色系色彩系統(tǒng)。 ## 輸入要求 - 主色 HEX由用戶提供或從用戶給出的品牌色、圖片中提取。 - 應(yīng)用場景UI 界面、數(shù)據(jù)可視化、海報(bào)、PPT 等。 - 輸出語言默認(rèn)中文。 ## 設(shè)計(jì)規(guī)則 1. 色相一致性所有色塊與主色的色相偏差不超過 8 度。 2. 色階層級優(yōu)先參考 references/mono-color-scale.json按 50-900 共 10 級輸出。 3. 對比度要求正文文本與背景對比度不低于 4.5:1大號文本不低于 3:1。 4. 輸出結(jié)構(gòu)必須包含 - 主色 HEX 與說明 - 10 級色階表 - 各場景下的配色建議 - 文本可讀性校驗(yàn)結(jié)果 5. 禁止生成與主色色相偏差較大的顏色作為同類色階。這段 SKILL.md 做了三件事定義觸發(fā)條件、給出輸入約束、明確輸出結(jié)構(gòu)。AI 只有在任務(wù)匹配時(shí)才會加載它加載后也不需要用戶再重復(fù)設(shè)計(jì)規(guī)范。如果你使用的平臺支持自定義字段可以參考這個(gè)結(jié)構(gòu)調(diào)整。5.3 準(zhǔn)備色階參考文件參考文件的價(jià)值是讓模型不需要“憑空想象”一套色階而是能直接基于已有數(shù)據(jù)做適配。下面是一個(gè)標(biāo)準(zhǔn)藍(lán)色系的 JSON 色階參考文件。{ baseColor: #2563EB, description: 示例主色 #2563EB 的 10 級單色色階僅作為訓(xùn)練參考數(shù)據(jù), colorScale: [ { step: 50, hex: #EFF6FF }, { step: 100, hex: #DBEAFE }, { step: 200, hex: #BFDBFE }, { step: 300, hex: #93C5FD }, { step: 400, hex: #60A5FA }, { step: 500, hex: #3B82F6 }, { step: 600, hex: #2563EB }, { step: 700, hex: #1D4ED8 }, { step: 800, hex: #1E40AF }, { step: 900, hex: #1E3A8A } ], usage: { background: [50, 100], border: [200, 300], secondaryAction: [400, 500], primaryAction: [600], text: [700, 800, 900] } }{ recommendedTextPairs: [ { background: #EFF6FF, text: #1E3A8A, contrastRatio: 10.1:1 }, { background: #DBEAFE, text: #1E40AF, contrastRatio: 8.6:1 }, { background: #FFFFFF, text: #2563EB, contrastRatio: 5.2:1 } ] }實(shí)際使用時(shí)你可以把第二個(gè) JSON 文件放到references目錄中也可以合并到同一個(gè)文件里。參考數(shù)據(jù)的價(jià)值在于給模型一個(gè)“安全區(qū)”避免它隨意組合出低對比度配色。上面標(biāo)注的對比度數(shù)值是示意值實(shí)際數(shù)值取決于你的色值計(jì)算方式建議運(yùn)行腳本驗(yàn)證。5.4 設(shè)計(jì)校驗(yàn)?zāi)_本有了規(guī)則和參考數(shù)據(jù)還需要一個(gè)“裁判員”。下面的 Python 腳本可以讀取色階文件逐一檢查每個(gè)色塊與主色的色相偏差并提示對比度風(fēng)險(xiǎn)。# 文件路徑mono-color-design-skill/scripts/check_mono_palette.py import sys import json import colorsys def hex_to_rgb(hex_color: str): hex_color hex_color.lstrip(#) if len(hex_color) ! 6: raise ValueError(finvalid hex color: {hex_color}) return tuple(int(hex_color[i:i2], 16) / 255.0 for i in (0, 2, 4)) def rgb_to_hsv(rgb): return colorsys.rgb_to_hsv(rgb[0], rgb[1], rgb[2]) def main(palette_path: str, base_hex: str, hue_tolerance: float 8.0): with open(palette_path, r, encodingutf-8) as f: palette json.load(f) base_hsv rgb_to_hsv(hex_to_rgb(base_hex)) base_hue base_hsv[0] * 360 print(fbase hue: {base_hue:.1f}) for item in palette[colorScale]: step item[step] hex_color item[hex] hsv rgb_to_hsv(hex_to_rgb(hex_color)) hue_deg hsv[0] * 360 hue_diff abs(hue_deg - base_hue) if hue_diff 180: hue_diff 360 - hue_diff ok hue_diff hue_tolerance status OK if ok else WARN print(fstep {step:3} {hex_color} hue{hue_deg:6.1f} {status}) if not ok: print(f warning: hue difference {hue_diff:.1f} exceeds tolerance) if __name__ __main__: if len(sys.argv) ! 3: print(usage: python check_mono_palette.py palette.json base_hex) sys.exit(1) main(sys.argv[1], sys.argv[2])運(yùn)行方式python scripts/check_mono_palette.py references/mono-color-scale.json #2563EB如果所有色塊的色相偏差都在 8 度以內(nèi)腳本輸出 OK如果某個(gè)色塊偏色會輸出 WARN 并給出偏差值。這個(gè)腳本的邊界能力有限但已經(jīng)足夠作為設(shè)計(jì)質(zhì)量門禁之一。5.5 在 AI 客戶端中調(diào)用Skill 文件準(zhǔn)備好后把它放到你使用的 AI Agent 可以識別的位置。不同工具對 Skill 目錄的存放位置要求不同這里只演示調(diào)用思路請加載 mono-color-design-skill主色為 #2563EB應(yīng)用場景是數(shù)據(jù)看板 UI輸出一套包含主色、深淺色階、功能狀態(tài)色的單色系方案。AI 收到請求后會先判斷任務(wù)與 Skill 是否匹配再讀取規(guī)則和參考數(shù)據(jù)最后按 SKILL.md 規(guī)定的結(jié)構(gòu)輸出結(jié)果。如果你發(fā)現(xiàn) AI 沒有加載 Skill優(yōu)先檢查目錄位置和 SKILL.md 中的觸發(fā)描述是否準(zhǔn)確。6. 運(yùn)行驗(yàn)證與效果檢查一個(gè) Skill 是否真的可用不能只靠“看起來挺好看”來判斷。下面給出三個(gè)最小驗(yàn)證用例你可以按順序執(zhí)行。6.1 驗(yàn)證用例一基礎(chǔ)色階生成輸入請加載 mono-color-design-skill主色 #2563EB應(yīng)用場景為網(wǎng)頁 UI。檢查點(diǎn)是否輸出了至少 10 級色階。色階中的淺色端和深色端是否存在明顯明度差異。是否包含文本對比度的說明。如果 AI 只輸出了一兩個(gè)藍(lán)色色值說明 SKILL.md 中的“色階層級”規(guī)則沒有被完整加載。此時(shí)可以檢查描述是否寫入了觸發(fā)條件或者當(dāng)前 Agent 平臺的上下文長度是否不足。6.2 驗(yàn)證用例二色相一致性與校驗(yàn)?zāi)_本用參考文件運(yùn)行校驗(yàn)?zāi)_本python scripts/check_mono_palette.py references/mono-color-scale.json #2563EB預(yù)期結(jié)果是所有 step 都輸出 OK。如果某個(gè) step 出現(xiàn) WARN說明該色塊不是標(biāo)準(zhǔn)單色色階需要重新生成參考數(shù)據(jù)。這個(gè)步驟的意義在于它把“是否偏色”從感覺判斷變成了可重復(fù)執(zhí)行的客觀檢查。6.3 驗(yàn)證用例三低對比度攔截輸入一個(gè)極端情況請加載 mono-color-design-skill主色為淺黃色 #FDE68A背景用最淺色文字用中等黃色。此時(shí) Skill 規(guī)則應(yīng)要求 AI 明確指出對比度不足并自動選擇 700 到 900 等深色作為文本色。如果 AI 仍然生成了低對比度方案說明對比度規(guī)則的表達(dá)不夠具體建議在 SKILL.md 中把“4.5:1”和“3:1”這兩條數(shù)值寫得更顯著。驗(yàn)證失敗的排查順序可以這樣走先確認(rèn) Skill 目錄是否放對位置。再確認(rèn) SKILL.md 中觸發(fā)描述是否包含用戶輸入中的關(guān)鍵詞。然后查看生成結(jié)果是否參考了 references 文件。最后檢查規(guī)則本身是否不夠量化比如“對比度要足夠高”就不如“對比度不低于 4.5:1”可執(zhí)行。7. 常見問題與排查思路問題現(xiàn)象可能原因排查方式解決方案AI 沒有識別 SkillSkill 目錄未放在工具指定位置查看客戶端幫助文檔確認(rèn)目錄結(jié)構(gòu)將 Skill 目錄移到指定路徑重新加載會話SKILL.md 內(nèi)容不生效觸發(fā)描述過于寬泛或過于狹窄打印實(shí)際加載日志調(diào)整 description用明確關(guān)鍵詞覆蓋“單色系”“Mono-color”等輸出顏色不是同一色相模型沒有使用參考色階文件檢查 references 路徑是否正確在 SKILL.md 中寫明 references 路徑并放入示例數(shù)據(jù)色階層級太淺層次不明顯明度梯度設(shè)置不夠大用腳本輸出 HSV 明度值增大相鄰 step 的明度差深色端調(diào)整到接近 10% 明度文本對比度不達(dá)標(biāo)規(guī)則中缺少量化標(biāo)準(zhǔn)檢查輸出中的對比度說明明確寫入 4.5:1 與 3:1 兩個(gè)閾值同一 Skill 在不同平臺表現(xiàn)不同平臺對 Skill 規(guī)范的支持程度有差異使用最小目錄做兼容性測試優(yōu)先使用通用字段不使用平臺私有擴(kuò)展字段生成的方案“灰撲撲”保飽和度過低或全部使用低飽和色查看輸出色階的飽和度值在規(guī)則中補(bǔ)充“主體區(qū)域保持一定飽和度”的建議表格中的排查思路適用于大多數(shù) Skill 類項(xiàng)目。你在實(shí)踐中遇到新問題可以先記錄問題現(xiàn)象、復(fù)現(xiàn)方法和修復(fù)方案逐步形成團(tuán)隊(duì)的排錯(cuò)手冊。8. 最佳實(shí)踐與工程建議8.1 讓設(shè)計(jì)規(guī)則顯性化設(shè)計(jì) Skill 能否生效很大程度上取決于規(guī)則是否可量化。像“美觀”“高級感”這類描述模型很難穩(wěn)定理解“文本對比度不低于 4.5:1”“色相偏差不超過 8 度”則可以被驗(yàn)證。建議在 SKILL.md 中把所有規(guī)則分成“必須遵守”和“建議參考”兩類。必須遵守的規(guī)則寫入校驗(yàn)?zāi)_本建議參考的規(guī)則保留在文本說明中。這樣既保證了下限也保留了設(shè)計(jì)的靈活性。8.2 用數(shù)據(jù)文件管理色彩資產(chǎn)不要把所有顏色硬編碼在 SKILL.md 里。更好的做法是把色階、推薦文本組合、功能色定義放到 JSON 或 YAML 文件中由 SKILL.md 通過路徑引用。這樣做的好處是結(jié)構(gòu)清晰、方便替換也讓校驗(yàn)?zāi)_本可以直接讀取數(shù)據(jù)文件。項(xiàng)目中可以維護(hù)一份標(biāo)準(zhǔn)的 color-token 數(shù)據(jù)文件前端生產(chǎn)環(huán)境使用時(shí)直接從這個(gè)文件生成 CSS 變量或設(shè)計(jì)令牌設(shè)計(jì)成果就能真正進(jìn)入代碼工程。8.3 團(tuán)隊(duì)協(xié)作與版本管理Skill 文件是普通文本文件完全可以用 Git 管理。建議每個(gè) Skill 獨(dú)立一個(gè)倉庫或目錄并在提交時(shí)附帶示例輸出截圖或說明。這樣當(dāng) AI 生成結(jié)果出現(xiàn)回歸時(shí)可以快速定位是規(guī)則修改還是參考數(shù)據(jù)變更導(dǎo)致的。更好的做法是設(shè)置評審流程設(shè)計(jì)師負(fù)責(zé)制定規(guī)則開發(fā)者負(fù)責(zé)實(shí)現(xiàn)校驗(yàn)?zāi)_本測試同學(xué)用真實(shí)項(xiàng)目場景驗(yàn)證輸出結(jié)果。經(jīng)過幾次迭代后這個(gè) Skill 會越來越像一個(gè)標(biāo)準(zhǔn)化的內(nèi)部工具而不是某個(gè)人私藏的一段提示詞。8.4 安全與使用邊界有一點(diǎn)必須強(qiáng)調(diào)設(shè)計(jì)類 Skill 不能替代人對品牌調(diào)性的最終判斷。AI 可以按照規(guī)則生成色階、計(jì)算對比度但它不理解品牌背后的商業(yè)含義。在使用任何 AI 生成設(shè)計(jì)結(jié)果前都需要經(jīng)過設(shè)計(jì)師或品牌負(fù)責(zé)人的確認(rèn)。同時(shí)如果 Skill 涉及公司內(nèi)部品牌色、字體、素材需要在團(tuán)隊(duì)知識庫中明確版權(quán)和授權(quán)邊界。不要把未授權(quán)的商業(yè)素材直接放入 references 目錄。另一個(gè)容易忽略的問題是風(fēng)險(xiǎn)操作如果 Skill 調(diào)用外部圖像生成服務(wù)建議先在測試環(huán)境驗(yàn)證參數(shù)避免直接在生產(chǎn)環(huán)境批量生成不可回退的素材。8.5 從小場景開始做給團(tuán)隊(duì)落地設(shè)計(jì) Skill 時(shí)不要一上來就做一個(gè)“全能設(shè)計(jì)助手”。建議從一個(gè)非常窄的場景開始比如“數(shù)據(jù)看板單色配色”跑通后再加上“海報(bào)單色配色”“PPT 單色配色”。窄場景的好處是邊界清晰容易編寫規(guī)則也容易驗(yàn)證效果。多跑幾個(gè)窄場景之后你再回頭抽象公共規(guī)則會發(fā)現(xiàn)思路清晰很多。9. 總結(jié)與后續(xù)學(xué)習(xí)方向妍妍老師發(fā)布 Mono-color Design Skill 這件事放到整個(gè) AI Agent 發(fā)展進(jìn)程中看是一個(gè)典型信號設(shè)計(jì)能力正在從“對話輔助”轉(zhuǎn)向“工程資產(chǎn)”。Skill 把設(shè)計(jì)師的經(jīng)驗(yàn)、規(guī)則與參考數(shù)據(jù)打包成可加載、可校驗(yàn)、可維護(hù)的文件讓 AI 在設(shè)計(jì)任務(wù)上的表現(xiàn)不再依賴運(yùn)氣。本文真正講清楚的幾件事是Skill 機(jī)制與普通 Prompt/Plugin 的區(qū)別單色系設(shè)計(jì)為什么難以及色相、明度、對比度如何變成可執(zhí)行規(guī)則如何用 SKILL.md、JSON 參考文件和 Python 校驗(yàn)?zāi)_本搭建一個(gè)最小 Skill以及在團(tuán)隊(duì)項(xiàng)目中如何安全、可控地落地這類能力。如果你已經(jīng)照著示例跑通了一個(gè)最小 Skill下一步可以繼續(xù)深入幾個(gè)方向把色階生成邏輯遷移到 Design Token 工程讓前端直接消費(fèi) JSON 數(shù)據(jù)。增加進(jìn)階校驗(yàn)?zāi)芰Ρ热顼柡投认孪?、無障礙顏色組合建議。嘗試把同一套 Skill 掛載到不同 Agent 平臺整理一份兼容性清單。從單色系擴(kuò)展到雙色系、漸變系抽象出更通用的配色規(guī)則庫。對實(shí)際項(xiàng)目的提醒只有一點(diǎn)設(shè)計(jì) Skill 的規(guī)則不是一次性寫出來的而是通過真實(shí)項(xiàng)目不斷改出來的。每發(fā)現(xiàn)一次輸出不達(dá)標(biāo)就補(bǔ)一條規(guī)則每新增一個(gè)場景就更新一次參考數(shù)據(jù)。先做最小版本再慢慢演進(jìn)這會比幻想一個(gè)“萬能設(shè)計(jì)神器”靠譜得多。