design-pass 是做什么的？
目标：$ARGUMENTS
工具包：${CLAUDE_SKILL_DIR}/../ui-audit/scripts/ · 检查清单：${CLAUDE_SKILL_DIR}/reference/review-checklist.md
1. 基线（在触碰代码之前）
确保开发服务器正在运行（如有必要，在后台启动；切勿运行生产构建），然后执行：
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs http://localhost:<port> --pages <path> --widths 375,768,1440 --dark --out /tmp/design-pass/before
2. 修补前的审核
- 找出目标渲染的每个组件，以及渲染相同模式的所有其他位置（通过 grep 类字符串和组件名称）。
- 在编写新组件之前，先复用现有的基本元素（按钮、卡片、模态框、章节标题）。如果相同的标记出现 2 次以上，则将其提取出来，然后一次性重新样式。
- 仅按需构建。除非被要求，否则不添加新的章节、徽标、切换开关或动画。
- 仅使用项目令牌。如果某个值不在缩放范围内，则使用最近的步骤，或提出一个新的令牌（参见
design-ref）。
3. 应用
按照检查清单逐步进行：层次结构、每个视图一个主要操作、间距缩放、字体缩放、空/加载/错误状态，以及移动端输入框≥ 16 像素。
4. 验证
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/audit.mjs http://localhost:<port> --pages <path> --widths 375,768,1440 --dark --out /tmp/design-pass/after
node ${CLAUDE_SKILL_DIR}/../ui-audit/scripts/diff.mjs /tmp/design-pass/before /tmp/design-pass/after
- 阅读每个宽度在亮色和暗色模式下的“after”截图。检查差异 PNG 文件中目标范围以外的非预期更改。
- 灰度检查：使用
--inject "document.documentElement.style.filter='grayscale(1)'"重新运行一个宽度。 - 然后完整运行一次
ui-audit宽度集，并进行类型检查 + lint（无需构建）。 - 如果项目保持 Figma 文件与代码同步，则在同一任务中更新相应的帧。
退出条件
- 没有横向滚动，与之前相比没有新的对比度或 axe 发现。
- 差异显示更改仅限于预期区域。
- 没有重复现有组件的新组件，并且没有未要求的 UI。
- 已检查暗色模式，或确认项目中没有暗色模式。
- 类型检查和 lint 通过。
- 向用户提供简短摘要，以及 1–2 个值得查看的截图路径。