作者 Ashutos1997 · Ashutos1997/claude-design-auditor-skill
系統設計審查——排版、對比度、間距、a11y、運動、深色模式、標記、深色圖案——在代碼之前/之後得分為 0-100。
claude-design-auditor-skill 根據 18 條專業規則審核跨格式（Figma、HTML/CSS、React/Vue、螢幕截圖、線框、散文描述）的設計。 輸出是 0-100 分，包含嚴重程度排名的問題、單獨的可訪問性 + 道德分數、代碼修復之前/之後以及可導出的報告（Markdown、Canva、開發移交）。 使用它在開發移交之前對設計進行壓力測試，在 PR 中強制執行品質標準，或對重新設計優先列表進行分類。
%APPDATA%\Claude\claude_desktop_config.json{
"mcpServers": {
"claude-design-auditor-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/Ashutos1997/claude-design-auditor-skill",
"~/.claude/skills/claude-design-auditor"
],
"_inferred": true
}
}
}開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。
{
"mcpServers": {
"claude-design-auditor-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/Ashutos1997/claude-design-auditor-skill",
"~/.claude/skills/claude-design-auditor"
],
"_inferred": true
}
}
}Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。
{
"mcpServers": {
"claude-design-auditor-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/Ashutos1997/claude-design-auditor-skill",
"~/.claude/skills/claude-design-auditor"
],
"_inferred": true
}
}
}點擊 Cline 側欄中的 MCP Servers 圖示，然後選 "Edit Configuration"。
{
"mcpServers": {
"claude-design-auditor-skill": {
"command": "git",
"args": [
"clone",
"https://github.com/Ashutos1997/claude-design-auditor-skill",
"~/.claude/skills/claude-design-auditor"
],
"_inferred": true
}
}
}格式與 Claude Desktop 相同。重啟 Windsurf 生效。
{
"mcpServers": [
{
"name": "claude-design-auditor-skill",
"command": "git",
"args": [
"clone",
"https://github.com/Ashutos1997/claude-design-auditor-skill",
"~/.claude/skills/claude-design-auditor"
]
}
]
}Continue 使用伺服器物件陣列，而非映射。
{
"context_servers": {
"claude-design-auditor-skill": {
"command": {
"path": "git",
"args": [
"clone",
"https://github.com/Ashutos1997/claude-design-auditor-skill",
"~/.claude/skills/claude-design-auditor"
]
}
}
}
}加入 context_servers。Zed 儲存後熱重載。
claude mcp add claude-design-auditor-skill -- git clone https://github.com/Ashutos1997/claude-design-auditor-skill ~/.claude/skills/claude-design-auditor一行命令搞定。用 claude mcp list 驗證，claude mcp remove 移除。
何時使用： 設計已經“完成”，您需要在開發人員開始克隆它之前進行最後的掃描。
結果： 設計到達開發階段時，其主要問題已解決。
何時使用： 您建立了一個對話框/選單/表單控件，並希望儘早發現問題。
結果： 透過可訪問性審查的組件。
何時使用： 您正在規劃重新設計，並且需要從哪裡開始的資料。
結果： 以具體缺陷為支援的重新設計計劃。
審核→Figma-to-code→重新審核代碼
讓運動專家添加/調整動畫，然後運行審核員的運動範圍
| 工具 | 輸入參數 | 何時呼叫 | 成本 |
|---|---|---|---|
| design-audit (SKILL) | asset (Figma URL / image / code) + optional scope | 在移交之前、程式碼審查中或作為重新設計計劃的一部分 | 0 |
審計員遺漏了明顯的問題增加輸入尺寸或提供多個視口/螢幕截圖；啟發式方法的覆蓋範圍較好。
Re-run with extra screenshots令牌警告輸出太多將範圍設定為 18 條規則的子集。
Ask for 'scope: typography + contrast + a11y' only修復破壞了現有的設計系統指示審計員留在您的代幣集中；提供 tokens.json。
Before/after diffs reference token names| 替代方案 | 何時用它替代 | 權衡 |
|---|---|---|
| claude-code-design-skills | 您想要從 Figma 轉向編碼，而不是審核現有工作 | 覆蓋管道的另一側 |
| ai-friendly-web-design-skill | 您需要廣泛的網頁設計指導，而不是嚴格的審核員 | 結構化輸出較少 |
| apple-hig-designer-skill | 您專為 Apple 平台設計 | 平台特定而非通用 |