用途:为设计系统搭建自动化与人工的质量门禁,防止质量回退。资料给出了实施步骤与完成判定。
主要能力与用法:
- 先接入快速门禁(每次提交/PR):运行 python3 .claude/skills/_ux-ui-shared/scripts/validate_tokens.py、python3 .claude/skills/_ux-ui-shared/scripts/validate_contrast.py(对令牌配对批量做 WCAG 校验)、python3 .claude/skills/_ux-ui-shared/scripts/lint_hardcodes.py <src>(禁止组件代码中出现原始 hex/px/timing)。仓库的 .github/workflows/ci.yml 会运行这些脚本。
- 加入自动化无障碍检查(axe-core / Pa11y),覆盖每个组件的错误/加载/禁用/展开/选中状态,严重或致命问题为零才可合并。
- 运行真实渲染对比度门禁:node .claude/skills/_ux-ui-shared/scripts/measure_render.mjs <file.html>(以及 --dark);它在无头 Chromium 中打开页面、禁用过渡,测量每个文本元素真实计算样式与 alpha 合成后的对比度,可发现静态令牌检查遗漏的问题。
- 增加视觉回归快照,覆盖变体 × 尺寸 × 状态 × 明暗主题 + 关键断点 + RTL,并冻结动画、使用确定性数据。
- 每次发布签署人工无障碍清单(键盘、屏幕阅读器、400% 回流、200% 文字间距、减弱动效、强制颜色,参见 .claude/skills/_ux-ui-shared/accessibility/*)。
工作流说明:需先阅读 .claude/skills/_ux-ui-shared/workflows/design-qa.md(QA 金字塔:令牌/lint 门禁 → 自动化无障碍 → 视觉回归 → 人工无障碍)。
完成判定:未评审的 PR 无法引入未解决的令牌别名、对比度失败、原始 hex/px 或 axe 违规,每个都有门禁阻断;快照覆盖深色模式 + RTL + 语义变化状态,而非只覆盖正常路径;发布的人工无障碍清单已签署。
限制:资料未提供安装方式、依赖版本、价格、平台支持范围及运行环境要求,暂未提供。