● 社群
Ashutos1997
⚡ 即開即用
Claude Design Auditor
作者 Ashutos1997 · Ashutos1997/claude-design-auditor-skill
系統設計審查——排版、對比度、間距、a11y、運動、深色模式、標記、深色圖案——在代碼之前/之後得分為 0-100。
claude-design-auditor-skill 根據 18 條專業規則審核跨格式（Figma、HTML/CSS、React/Vue、螢幕截圖、線框、散文描述）的設計。 輸出是 0-100 分，包含嚴重程度排名的問題、單獨的可訪問性 + 道德分數、代碼修復之前/之後以及可導出的報告（Markdown、Canva、開發移交）。 使用它在開發移交之前對設計進行壓力測試，在 PR 中強制執行品質標準，或對重新設計優先列表進行分類。
為什麼要用
核心特性
- 18 個審核類別 — 版式、對比、間距、層次結構、一致性、a11y、表單、運動、深色模式、反應式、狀態、副本、i18n/RTL、標高、影像、導航、標記、道德
- 多種輸入格式：Figma、HTML/CSS、React/Vue、螢幕截圖、線框、散文
- 0-100 分，嚴重性標籤，單獨的 a11y + 道德分數
- 每個修復之前/之後的程式碼範例
- 導出：Markdown、Canva、開發人員移交
即時演示
實際使用效果
claude-design-auditor-skill.replay
▶ 就緒
使用場景
實戰用法： Claude Design Auditor
何時使用： 設計已經“完成”，您需要在開發人員開始克隆它之前進行最後的掃描。
步驟
-
調用審核員
審核此 Figma 連結：<url>。 範圍：全面。✓ 已複製
→ 參考18條規則的評分+排名問題
-
修復批評者
應用 Figma 中最嚴重的 5 個修復；顯示之前/之後。✓ 已複製
→ 每個修復之前/之後的預覽
-
導出切換
匯出帶有令牌和 a11y 註解的開發切換降價。✓ 已複製
→ Markdown 準備投入票
結果： 設計到達開發階段時，其主要問題已解決。
注意事項
- 將比數視為目標 — 分數衡量的是對規則的遵守，而不是品味。 使用結果列表，而不僅僅是數字
何時使用： 您建立了一個對話框/選單/表單控件，並希望儘早發現問題。
步驟
-
貼上組件來源
審核此 React Dialog 元件，範圍：可訪問性 + 動作。✓ 已複製
→ 調查結果引用了 WCAG 標準，並明確了要更改的範圍
-
應用程式修復
使用建議的修復程式修補組件；保持API不變。✓ 已複製
→ Diff 尊重現有 API
結果： 透過可訪問性審查的組件。
注意事項
- 審核員對品味的過度追求（例如，a11y 模式中的風格挑剔） — 將範圍明確限制為 a11y + 運動
何時使用： 您正在規劃重新設計，並且需要從哪裡開始的資料。
步驟
-
Feed 畫面或 URL
審核 app.<url> 的前 10 個螢幕。 以嚴重程度總結發現結果。✓ 已複製
→ 帶有熱點的跨螢幕匯總
-
挑選排序
→ 計劃與發現相關，而不是氛圍
結果： 以具體缺陷為支援的重新設計計劃。
組合
與其他 MCP 搭配，撬動十倍槓桿
審核→Figma-to-code→重新審核代碼
審核Figma，轉換為React，然後重新審核React以驗證奇偶性。✓ 已複製
讓運動專家添加/調整動畫，然後運行審核員的運動範圍
為每個 Motion-dev 添加彈簧動畫；然後審核運動+減少運動的行為。✓ 已複製
claude-design-auditor-skill +
figma透過 MCP 拉取 Figma 資產、審計並寫回評論
對於每個標記的幀，添加 Figma 註釋來總結發現。✓ 已複製
成本與限制
運行它的成本
- API 配額
- 沒有任何
- 每次呼叫 Token 數
- 大——螢幕截圖和長程式碼區塊占主導地位
- 費用
- 自由的
- 提示
- 積極擴大範圍（僅限 a11y，或僅限排版）以實現快速迭代；全面的審計是像徵性的。
安全
權限、密鑰、影響範圍
憑證儲存： 沒有任何;如果 Figma URL 是私有的，請透過圖像導出進行共享或在適當範圍內使用 Figma MCP。
資料出站： 該技能沒有網路出口；您的圖像和程式碼保留在聊天中。
- 綠色分數≠好的設計。 審計員執行規則；產品與市場的契合度、品牌和情感由您來判斷。
- 道德/暗模式類別是啟發式的。 用作討論的提示，而不是作為法庭判決。
故障排查
常見錯誤與修復
審計員遺漏了明顯的問題
增加輸入尺寸或提供多個視口/螢幕截圖；啟發式方法的覆蓋範圍較好。
驗證： Re-run with extra screenshots
令牌警告輸出太多
將範圍設定為 18 條規則的子集。
驗證： Ask for 'scope: typography + contrast + a11y' only
修復破壞了現有的設計系統
指示審計員留在您的代幣集中；提供 tokens.json。
驗證： Before/after diffs reference token names
替代方案
Claude Design Auditor 對比其他方案
| 替代方案 | 何時用它替代 | 權衡 |
|---|
| claude-code-design-skills | 您想要從 Figma 轉向編碼，而不是審核現有工作 | 覆蓋管道的另一側 |
| ai-friendly-web-design-skill | 您需要廣泛的網頁設計指導，而不是嚴格的審核員 | 結構化輸出較少 |
| apple-hig-designer-skill | 您專為 Apple 平台設計 | 平台特定而非通用 |