mcpField
D
design-qa

design-qa

github.com/plugin87测试与质量3.0k529 次安装1 天前更新
代码仓库

关于 design-qa

design-qa 是用于搭建设计系统与组件自动化及人工质量检查的 Skill。它结合令牌和对比度校验、无障碍审计、视觉回归覆盖，以及发布前人工复核。

主要功能

  1. 01令牌、对比度与硬编码检查
  2. 02自动化无障碍检查
  3. 03测量实际渲染文本的对比度
  4. 04覆盖主题与状态的视觉快照
  5. 05发布前无障碍检查清单

适用场景

  1. 01为提交和拉取请求添加质量门禁
  2. 02发现无障碍与对比度回归
  3. 03跨主题和状态审查视觉变化
  4. 04准备发布前的无障碍签核

安装

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

$npx skills add https://github.com/plugin87/ux-ui-agent-skills --skill design-qa

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

详细介绍

技能：设计 QA

步骤 0：工具包在这里吗？ 此技能会读取工具包中的文件。请检查一次： ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING 仅在出现 KIT_MISSING 时，才表示安装的只有技能文件夹，这是 npx skills add 的行为。请明确说明这一点，告诉用户使用 npx ux-ui-agent-skills init 或安装插件，然后停止。不要臆测无法打开的文件内容。

搭建自动化和手动检查关卡，防止质量退化。

步骤

  1. 阅读 ${CLAUDE_SKILL_DIR}/../../../workflows/design-qa.md（QA 金字塔：令牌/ lint 检查关卡 → 自动化无障碍检查 → 视觉回归 → 手动无障碍检查）。
  2. 优先接入快速检查关卡（每次提交/PR 都运行）：python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py、python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_contrast.py（对令牌配对批量执行 WCAG 检查），以及 python3 ${CLAUDE_SKILL_DIR}/../../../scripts/lint_hardcodes.py <src>（组件代码中不得出现原始 hex/px/时间值）。仓库的 .github/workflows/ci.yml 会运行这些检查。
  3. 添加自动化无障碍检查（axe-core / Pa11y），覆盖每个组件的各个状态（错误/加载中/禁用/展开/已选中）；合并前严重/危急问题必须为零。运行真实渲染对比度检查关卡 node ${CLAUDE_SKILL_DIR}/../../../scripts/gate.mjs measure_render.mjs <file.html>（以及 --dark）。此脚本会在无头 Chromium 中打开页面、禁用过渡效果，并测量每个文本元素实际计算样式与 Alpha 合成后的对比度（可发现静态令牌检查遗漏的问题）。
  4. 添加视觉回归快照，覆盖不同变体 × 尺寸 × 状态 × 浅色/深色模式，以及关键断点和 RTL；冻结动画并使用确定性数据。
  5. 在每次发布时签核手动无障碍检查清单（键盘、屏幕阅读器、400% 重排、200% 文本间距、减少动态效果、强制颜色；${CLAUDE_SKILL_DIR}/../../../accessibility/*）。

验证（完成定义）

  • 未经审查的 PR 无法引入未解决的令牌别名、对比度问题、原始 hex/px 或 axe 违规：每项都有检查关卡拦截。
  • 快照需覆盖深色模式、RTL 和会改变语义的状态，而不仅是理想路径。
  • 已为该版本签核手动无障碍检查清单。

评论

支持 Markdown