前言¶
前端或设计协作里，常见做法是肉眼对稿、在 IM 里圈几处色差或间距问题。问题一多，检查项容易漏记，结论也难沉淀成可检索的验收记录。下面介绍 SkillHub 社区技能「视觉验收技能」，把《视觉验收》PDF 中的 VA-* 检查点做成可执行的验收流程，并输出带计分与标注的 HTML 报告。
这是什么¶
「视觉验收技能」是 SkillHub 上由发布者 user_521ba876 维护的 Agent Skill（坐标 @user_521ba876/visual-acceptance-check，当前版本 1.0.4，分类 design-media，来源 community）。它面向「设计稿 + 实现页面」的对照验收：输入 MasterGo 设计稿链接，以及开发页面截图（或登录后可访问的页面 URL 截图），按《视觉验收》PDF 全量 VA- 检查点逐项判定，从设计 DSL 提取基准值，对每点给出 pass / fail / na 并计分，在差异处做 bbox 标注，最后生成 HTML 验收报告*。
SkillHub 页面标注 requires_api_key=false，即按官方说明安装使用时不依赖额外 API Key 配置。
核心功能¶
依据 SkillHub 与已抓取元数据，可核实的能力包括：
- 设计稿侧：接受 MasterGo 设计稿链接，从 DSL 提取视觉基准（尺寸、样式等用于对照的语义数据）。
- 实现侧：接受页面截图，或需要登录后才能截到的页面 URL 对应截图。
- 检查体系：对照《视觉验收》PDF 中的 VA-* 全量检查点，逐条验收而非只比一张整图。
- 结果形态：每条检查点 pass / fail / na、汇总计分，对问题区域 bbox 标注，输出 HTML 报告。
当用户提到视觉验收、MasterGo、设计稿链接、上传截图、页面截图、视觉差异、全量检查点、验收报告等意图时，Agent 可按 Skill 描述触发该技能。
安装与启用¶
Skill 基于通用 SKILL.md 格式。官方提供两种安装入口：用 SkillHub CLI 装到当前 Agent 的 skills 目录，或把安装提示词交给 AI 按文档执行。
1. 安装 SkillHub CLI（未安装时）¶
先确认本机是否已有 CLI：
command -v skillhub && skillhub --version
未安装时，可按 SkillHub 安装文档执行完整安装（CLI + 默认 Skill）：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash
若只需 CLI：
curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only
2. 安装「视觉验收技能」¶
安装时必须用 --dir 指向当前 Agent 实际读取的 skills 目录；否则默认会装到 ./skills/，Agent 可能识别不到。
skillhub install @user_521ba876/visual-acceptance-check --dir <你的 Agent skills 目录>
SkillHub 文档中给出的常见路径示例：
- Cursor：
~/.cursor/skills/ - Claude Code：
~/.claude/skills/ - Codex：
~/.codex/skills/或项目下的.agents/skills/
也可直接向 AI 发送官方提示词，让其按安装说明完成安装：
请根据 https://skillhub.cn/install/skillhub.md，安装 `@user_521ba876/visual-acceptance-check`。
安装后按你所用客户端的要求刷新或重启 Agent，使新 Skill 被加载。
典型用法¶
官方简介未给出固定 CLI 子命令，典型交互流程可归纳为：
- 在对话中说明要做视觉验收，并提供 MasterGo 设计稿链接（须可被技能访问解析）。
- 提供开发环境页面截图；若页面需登录，先完成登录再截图，或提供登录后可访问 URL 的截图。
- 让 Agent 按《视觉验收》VA- 检查点全量执行对照，等待 HTML 报告*（含 pass/fail/na、计分与 bbox 标注）。
示例提示（可按项目改写）：
用视觉验收技能验收这一屏：设计稿 https://<mastergo-设计稿链接>；
实现截图见附件（或：登录后页面截图见附件）。
按 VA-* 全量检查点出 HTML 验收报告。
适用场景与注意¶
适合谁：需要在发版或提测前做结构化 UI 验收的前端、设计协作或 QA；希望检查项与《视觉验收》PDF 对齐、并留下 HTML 归档的团队。
使用前提：
- 设计稿来源在官方描述中为 MasterGo；请使用可解析的 MasterGo 链接，并保证 DSL 提取所需权限与网络可达。
- 实现侧以截图为主；登录态页面需自行保证截图与当前验收版本一致。
- 全量 VA-* 检查点意味着工作量比「扫一眼」大，适合正式验收节点而非每次保存都跑一遍。
社区信息：SkillHub 元数据显示评分 100000、下载 812（以页面抓取为准，会随时间变化）。未在官方简介中写明的能力（例如其他设计工具链）不应默认支持。
结尾¶
「视觉验收技能」把设计 DSL 基准、页面截图与《视觉验收》VA-* 检查点串成一条可计分、可标注、可出 HTML 报告的 Agent 流程，适合替代零散肉眼对稿。安装与详情见 SkillHub：
- 技能页：https://www.skillhub.cn/skills/user_521ba876/visual-acceptance-check
- API 元数据地址：https://api.skillhub.cn/user_521ba876/visual-acceptance-check
