design-auditor

design-auditor

目录占位条目 — 完整技能：Ashutos1997/claude-design-auditor-skill

决策树

1. 是否已安装完整技能？

   • 全局：f=~/.agents/skills/design-auditor/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • 项目：f=.agents/skills/design-auditor/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
   • installed → 技能已安装为 design-auditor，调用它并继续
   • pointer → 转到第 2 步

2. 检测范围，然后安装：

   [ -e ~/.agents/skills/design-auditor ] && echo "global" || echo "project"
   

   全局：

   npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -g -y
   

   项目：

   npx skills add Ashutos1997/claude-design-auditor-skill --skill design-auditor -y
   

   Claude Code： 发送一条以 ! 开头的命令作为聊天消息，即可在不离开对话的情况下运行该命令。

注意事项

• 需要： Figma MCP 服务（可选，仅用于审查 Figma 链接；没有它时，技能会要求提供截图或代码）
• 许可证： 仓库中没有 LICENSE 文件

安装后调用

• 技能名称：design-auditor
• 触发短语："design audit"、"design score"、"19 categories"、"design-auditor"、"design quality check"

功能

全面的设计审查技能，可从 19 个专业类别评估设计：排版、颜色／对比度、间距、视觉层次、一致性、WCAG 无障碍性、表单、动效／动画、深色模式、响应式设计、加载状态、空状态、错误状态、微文案、i18n／RTL 支持、层级／阴影、图标、导航、设计令牌、伦理设计与暗黑模式，以及 Nielsen 启发式原则。它会生成 0-100 分的评分，并按严重程度排列问题，让影响最大的问题优先呈现。可审查代码（HTML、CSS、React、Vue、Tailwind）和截图；连接 Figma MCP 服务后，也可审查 Figma 链接。回复语言为英语或韩语，以匹配请求。上游 SKILL.md 文件较大（约 160 KB），因此触发时会占用大量上下文。

不适用场景

• 仅审查无障碍性时——请使用 fixing-accessibility 进行有针对性的 WCAG 检查
• 编写 WCAG 专项合规文档时——请使用 wcag-audit-patterns