mcpField
D
design-auditor

design-auditor

github.com/borghei设计与 UI1.0k124 次安装1 周前更新
代码仓库

关于 design-auditor

面向 Web UI 设计与前端团队的静态审计技能，可评估设计质量、AI 生成内容特征、WCAG 色彩对比度和设计系统令牌合规性。它输出三项独立等级，并可用于 CI/CD 部署门禁。

主要功能

  1. 01评估 12 类设计指标
  2. 02检测 HTML/CSS 中的 AI 生成模式
  3. 03检查 WCAG AA/AAA 色彩对比度
  4. 04验证 CSS 与设计令牌的符合度
  5. 05输出设计、AI Slop 和无障碍等级
  6. 06支持 CI/CD 评分门禁

适用场景

  1. 01审查 Web UI 的设计质量与原创性
  2. 02检查页面颜色对比度
  3. 03发现 CSS 中偏离设计令牌的值
  4. 04按最低合规分数限制部署

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/borghei/claude-skills --skill design-auditor

安装后在 Claude Code 中输入/design-auditor确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

assets/
design_audit_template.md
sample_audit_data.json
references/
accessibility_checklist.md
ai_slop_patterns.md
audit-workflows-and-operations.md
design_audit_methodology.md
scripts/
ai_slop_detector.py
color_contrast_checker.py
design_scorer.py
design_system_validator.py

详细介绍

设计审查器

执行系统化的 12 类 UI/UX 审查，检测 AI 生成的粗制滥造模式，验证 WCAG 颜色对比度，并检查设计系统令牌合规性。分别生成三项独立评级：设计（A–F）、AI 粗制滥造（A–F）和无障碍（A–F）。

核心能力

  • 全面设计审查 — 分五轮为 12 个加权类别评分，生成设计评级，并提供按优先级排序的建议和基线对比。
  • AI 粗制滥造检测 — 在 HTML/CSS 中标记视觉、文案和结构方面的粗制滥造，并提供置信度分数和针对每项发现的修复建议。
  • 无障碍审查 — 检查 WCAG 颜色对比度（AA/AAA），并建议最接近的合规颜色。
  • 设计系统合规性 — 检测偏离令牌的硬编码颜色、间距、字体、圆角、阴影、z-index 和过渡效果；报告合规百分比。
  • 三项独立评级 — 设计（加权汇总）、AI 粗制滥造（反向评级）、无障碍（WCAG），每项均为 A–F。
  • 操作系统 — 10 项设计原则、包含风险累计器的修复会话规则，以及 CI/CD 门禁。

适用场景

  • 审查 UI/UX 设计的质量、原创性和无障碍性。
  • 检测 HTML/CSS 中 AI 生成的粗制滥造模式。
  • 验证 WCAG 颜色对比度或设计令牌的遵循情况。
  • 根据最低合规分数设置部署或 PR 门禁。

先行确认

开始审查前，请确认以下输入。如果某项缺失或含糊，且会影响结果，请先询问；如果不会影响结果，则使用合理的默认值，并说明所用默认值。

  • 审查类型： 全面设计评分、AI 粗制滥造检测、对比度检查或令牌合规性（决定使用 design_scorer.py、ai_slop_detector.py、color_contrast_checker.py 还是 design_system_validator.py）。
  • 输入材料： 发现项 JSON、HTML/CSS、颜色对或设计令牌文件（各工具所需的输入）。
  • 符合等级／阈值： WCAG AA 或 AAA、粗制滥造置信度阈值，以及最低通过评级（用于设置 --level、--threshold 和门禁）。

针对当前请求，询问最重要的两到三项输入即可，无需询问全部内容。如果用户希望立即获得结果，请直接生成结果，并在开头说明所作假设。

工具

工具用途命令
design_scorer.py将 12 类审查发现转化为三项评级python scripts/design_scorer.py --input findings.json --output report.json --verbose
ai_slop_detector.py检测 HTML/CSS 中 AI 生成的粗制滥造python scripts/ai_slop_detector.py --input page.html --css styles.css --threshold 0.6
color_contrast_checker.py检查 WCAG 颜色对比度（单项／批量）python scripts/color_contrast_checker.py --input color-pairs.json --level AA --suggest-fixes
design_system_validator.py根据设计令牌验证 CSSpython scripts/design_system_validator.py --tokens tokens.json --input src/styles/

所有工具均支持 --format json|text 和用于写入文件的 --output。

参考资料

根据任务加载相应的参考资料——保持此文件精简，按需查阅详细信息：

  • references/audit-workflows-and-operations.md — 快速入门命令、工具概览表、三种工作流（完整审计、AI 糟粕检测、无障碍/设计令牌合规性）、评级表、10 项设计原则、修复会话规则、CI/CD 集成、反模式和故障排查。端到端执行审计时阅读。
  • references/design_audit_methodology.md — 系统化审计方法、启发式评估、格式塔原则、评审框架和反模式。设计评估环节时阅读。
  • references/ai_slop_patterns.md — AI 生成的 UI 模式及其修复指导的完整目录。判断原创性时阅读。
  • references/accessibility_checklist.md — 按 POUR 组织的完整 WCAG 2.1 A/AA/AAA 级检查清单，包含测试方法和修复方案。审计无障碍性时阅读。

范围与限制

涵盖 Web UI（HTML/CSS）的静态设计质量、AI 糟粕、WCAG 对比度和设计令牌合规性审计。不运行实时浏览器、不进行布局渲染测试，也不能替代人工可用性研究。无障碍问题绝不会被列为“低”优先级；WCAG AA 是最低标准。

集成点

技能集成方式
senior-frontend构建完成后对组件库进行设计审计
senior-qa在 QA 流水线中检查无障碍性和设计回归
code-reviewer将审计结果附加到前端 PR 评审中
senior-devops根据最低合规性评分设置部署门禁
product-team/ux-researcher将审计结果用于可用性研究的优先级排序

最后更新： 2026 年 6 月 版本： 2.2.0

评论

支持 Markdown