| name | ui-verification |
| description | 通用 UI 验收技能。验收必须以「实际页面效果 vs 设计稿」为准，必须使用浏览器工具 (Browser) 查看目标页面，通过页面截图与设计稿截图比对、或页面元素与 .pen 设计稿元素比对等落地方式完成验收，并产出问题清单与反思。 |
UI 验收
核心原则
最终验收标准：以实际运行页面的效果与 UI 稿（.pen 或 Figma） 进行比对得出结论，而不是仅凭代码或分析清单推断。
工具选择：优先使用 Cursor 的 Browser（@Browser），仅当不在 Cursor 或 Browser 不可用时使用 Playwright MCP。详见 rules/tools-browser-navigation.md。
比对方式：必须进行可落地的比对之一或组合：页面截图 vs 设计稿截图，或页面元素 vs 设计稿元素。详见 rules/tools-design-guidelines.md。
验收顺序：从上到下 → 从左到右 → 从外到里。先按顺序过一遍 P0（布局、层级、内容-文字与图片），再逐项比对 P1/P2 维度。详见 rules/comparison-*.md。
使用时机
当需要做「UI 还原验收」时使用本技能：
- 实现完成后，需要对照设计稿检查还原度
- 需要产出一份可追踪的 UI 问题清单，并据此修复与再验证
- 需要做「分析不足反思」，反哺设计稿分析（design-analysis）
前置条件
- 有可访问的实现页面：本地或目标环境已启动；在 Cursor 中优先用
@Browser 打开目标 URL
- 有设计稿可对照：
.pen（Pencil 设计稿）或 Figma 链接可访问
- 有分析清单（推荐）：
docs/样式还原/<名称>-UI分析清单.md 可作为比对时的检查项
若尚未有分析清单但已有设计稿，可先使用 .agents/skills/design-analysis/SKILL.md 产出分析清单。
目标产出
- UI 问题清单：
docs/样式还原/<名称>-UI问题清单.md（详见 rules/workflow-problem-list.md）
- 分析不足反思（可选）：反哺 design-analysis（详见
rules/workflow-reflection.md）
工作流程（5步）
- 使用浏览器工具查看实际页面：在 Cursor 中优先使用
@Browser，获取实际页面可比对信息。详见 rules/tools-browser-navigation.md 和 rules/tools-design-guidelines.md
- 实际页面与设计稿比对：截图比对或元素级比对，按 P0/P1/P2 维度逐项比对。详见
rules/comparison-*.md
- 产出 UI 问题清单：将差异点记录到问题清单。详见
rules/workflow-problem-list.md
- 修复与再验证：先修 P0，再 P1，再 P2；修复后必须再次使用 Browser 工具验证。详见
rules/tools-browser-navigation.md
- 反思分析不足（可选）：将「哪些问题是因为分析没做到位」总结下来，反哺 design-analysis。详见
rules/workflow-reflection.md
快速参考
编写时的设计常识（应在实现阶段遵循）
rules/writing-page-container-width.md - 页面容器宽度规则rules/writing-list-layout.md - 横向列表布局规则rules/writing-element-completeness.md - 元素展示完整性规则rules/writing-alignment.md - 对齐方式规则
常见错误模式（验收时特别关注）
rules/errors-page-container-width.md - 页面容器宽度限制rules/errors-grid-container-width.md - Grid 容器宽度问题rules/errors-css-priority.md - CSS 优先级覆盖rules/errors-flex-layout.md - Flex 布局问题rules/errors-flex-column-width.md - 换行后列宽不一致rules/errors-alignment.md - 对齐方式错误rules/errors-button-dimensions.md - 按钮尺寸问题rules/errors-button-position.md - 按钮定位问题
比对维度（P0 级，验收时不得遗漏）
rules/comparison-layout.md - 布局比对rules/comparison-hierarchy.md - 层级比对rules/comparison-content-text.md - 文字内容比对rules/comparison-content-image.md - 图片内容比对
工具使用指南
rules/tools-browser-navigation.md - 浏览器工具打开页面rules/tools-design-guidelines.md - 设计稿工具使用（Pencil/Figma）
工作流程模板
rules/workflow-problem-list.md - UI 问题清单文档结构rules/workflow-reflection.md - 反思分析不足模板rules/workflow-checklist.md - 快速检查清单
与其它技能的关系
- design-analysis：依赖其产出的「UI 分析清单」；验收后的反思用于完善该技能
- create-proposal：提案中若包含「实现后进行 UI 还原验收」，可引用本技能执行验收
- create-route / create-component：修复问题时可能涉及路由或组件的样式与结构修改
相关规范
.agents/skills/design-analysis/SKILL.md - 设计稿分析（产出分析清单）.agents/skills/create-proposal/SKILL.md - 创建提案（可引用本技能做实现后验收）.agents/rules/09-样式规范.md - 设计稿颜色提取
