前言¶

設計系統落地後，真正的問題是持續漂移：組件庫裏慢慢出現無人認領的樣式、PR 裏的 color 值和 Token 表對不上、不同頁面的間距體系各寫一套。靠人工 review 很難全覆蓋，於是有人把這類檢查做成了 Skill。下面介紹 SkillHub 上的「設計系統審計助手」，它可以在對話式編碼工具裏直接對 UI 做一致性審查。

這是什麼¶

設計系統審計助手是一個基於通用 SKILL.md 格式的社區 Skill，座標 @user_c562f70c/design-system-auditor，版本 1.0.0，由社區發佈者 user_c562f70c 維護，來源標記爲 community，分類 design-media。它解決的問題是：在開發過程中用自然語言發起，自動完成 UI 一致性審查、設計 Token 規範生成、組件庫遵守情況檢查、涉及樣式的 PR 審閱，而不必在多個工具之間來回切換。

頁面信息顯示評分 100000、下載 881、安裝 0，標籤 requires_api_key=false，即不需要額外配置 API Key 即可使用。

核心功能¶

官方簡介列出的能力有四項：

1、UI 一致性審查：檢查頁面或組件在顏色、間距、字號、圓角等視覺規範上的一致性。
2、設計 Token 規範生成：從現有樣式中整理出 Token 定義，輸出規範化的 Token 清單。
3、組件庫遵守情況檢查：對照設計系統約束，覈查組件庫中的實現是否越界，例如直接寫死數值、繞過 Token。
4、涉及樣式的 PR 審閱：在 PR 場景下重點看樣式改動是否符合設計系統約定。

另外支持 Material Design、Ant Design 等主流設計系統，也支持自定義系統的搭建，即可以把團隊自己的設計規範作爲審計基準。

安裝與啓用¶

截至成稿，預抓取的頁面資料中沒有給出可直接覈對的安裝命令或客戶端專屬配置項，因此這裏不寫出未經覈實的命令。可用的入口是 SkillHub 頁面：

https://www.skillhub.cn/skills/user_c562f70c/design-system-auditor

以及 API 地址：

https://api.skillhub.cn/user_c562f70c/design-system-auditor

啓用方式按通用 SKILL.md Skill 的慣例：將 Skill 加載到支持該格式的客戶端（Cursor、Codex CLI、Claude Code 等），即可在對話中調用。是否需要 API Key 的字段爲 requires_api_key=false。具體的安裝命令建議以官方頁面最新說明爲準，本頁未提供可驗證的安裝命令，故不列出。

典型用法¶

下面按官方簡介描述的四類工作流說明使用方式，命令以客戶端實際支持的形式爲準。

1、審查 UI 一致性。把待審查的頁面路徑或組件目錄交給 Skill，讓它輸出不一致項清單，再逐條對照設計規範修正。
2、生成 Token 規範。針對還沒有 Token 體系的項目，讓它從現有樣式中歸納顏色、間距、字號等 Token，形成可維護的規範文件。
3、檢查組件庫遵守情況。在組件庫目錄下發起檢查，讓它找出繞過 Token、寫死數值或偏離設計系統的實現。
4、審閱樣式 PR。在 PR 審查環節讓它專門針對樣式改動給出是否符合設計系統約定的結論，作爲人工 review 的補充。

如果團隊用的是自建設計系統，先把自定義規範提供給 Skill，再按上面的順序執行。

適用場景與注意¶

適合的場景：已有或準備落地設計系統的前端團隊；需要對組件庫和樣式 PR 做一致性把關的項目；使用 Material Design、Ant Design 或自建規範的項目。

需要注意的地方：

1、審計結果依賴提供的設計規範是否完整、準確，規範本身缺失時 Token 生成和遵守情況檢查只能作爲參考。
2、它檢查的是樣式層面的一致性，不替代功能測試和視覺迴歸測試。
3、該 Skill 爲社區來源，版本 1.0.0，安裝數目前爲 0，採用前建議在測試項目上先驗證一遍輸出質量。
4、頁面未提供可覈實的安裝命令，啓用前需確認客戶端對 SKILL.md 格式的支持情況。

小結¶

設計系統審計助手把 UI 一致性審查、Token 規範生成、組件庫遵守檢查和樣式 PR 審閱收斂到一個 Skill 裏，適合在對話式編碼工具中按需調用。它的價值在於把重複的一致性覈對工作交給工具，而不是替代設計系統的人工決策。官方地址：https://www.skillhub.cn/skills/user_c562f70c/design-system-auditor。