Agent Skills
返回列表
视觉验收

视觉验收

设计多媒体 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_521ba876/visual-acceptance-check。

技能介绍

设计还原验收的问题

视觉验收常常卡在“看起来差不多”：间距、圆角、阴影、字体层级、组件缺失很难逐条复核；文案差异也可能混进正式需求，导致开发、设计和测试结论不一致。

技能如何工作

该技能以设计工具链接和开发截图为输入，按 24 项 VA-* 检查点执行还原度检查。

  • 设计基准：从 Figma、MasterGo、Pixso 等链接拉取 DSL，生成 design-baseline.json，记录 frame 尺寸、tokens、components、icons。
  • 视口对齐：开发截图宽度需与设计帧保持在 2% 误差内，否则只做布局级验收，px 级项目标记 untested。
  • 采图与登录：H5 页面优先使用生产链接、移动端 UA 和 frame 宽度采图；登录页判定为 blocked_login，不对登录墙计分。
  • 检查点走查：按 L1 布局、L2 Token、L3 样式分层检查；fail 项需要设计 DSL 依据、实际截图或 CDP 选择器，并包含 bbox_px。
  • 报告输出：生成 24 行 ledger、HTML 报告、差异点裁剪图、设计链接与开发页并排展示。

适用边界与注意点

该技能适合有设计稿链接、开发截图或可登录 URL 的前端视觉验收。仅上传截图但不拉取设计 DSL 时，多项检查会落入 untested。复检不能因为“看起来接近”或对话语气改判；文案差异应区分观察项、正式需求和 fail。

使用场景

  • 前端提测后，用 Figma 链接和同宽 H5 截图逐页核对间距、圆角、字体，并输出 24 项验收 ledger。
  • 设计稿链接指向整页 Frame，开发截图同宽，需要按 VA-* 检查点判定模块缺失和 px 级 Token 差异。
  • 内网 H5 页面需要复用 Cursor 已登录标签采图，避免登录墙计分，并生成带 bbox 标注的 HTML 报告。
  • 复检时对某条 fail 有异议，需要依据 design DSL、CDP 选择器和 corrections 证据重新判定。

适合人员

  • 负责前端视觉还原验收的 QA，需要把设计稿与开发页逐点核对并输出可追溯 ledger。
  • 做 H5 或 Web 应用上线验收的产品设计，需要确认间距、圆角、阴影和组件缺失。
  • 需要在 Cursor 或 Chrome 里复用登录态采图的前端工程师，需要稳定生成可追溯标注报告。
  • 负责设计还原标准落地的 UED，需要把 24 项 VA-* 检查点转成团队可执行流程。