作者 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 卸载。
何时使用： 设计是“完成”的，您希望在开发人员开始克隆它之前进行最后的扫描。
结果： 设计到达DEV时，其主要问题已经解决。
何时使用： 您构建了一个对话框/菜单/表单控件，并希望尽早发现a11y问题。
结果： 在辅助功能审核中幸存的组件。
何时使用： 您正在计划重新设计，需要有关从哪里开始的数据。
结果： 以混凝土缺陷为后盾的重新设计计划。
审核→Figma到代码→重新审核代码
让运动专家添加/调整动画，然后运行审核员的运动范围
| 工具 | 输入参数 | 何时调用 | 成本 |
|---|---|---|---|
| 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平台设计的 | 特定于平台，而不是通用 |