Design-acceptance-check_设计多媒体 skill-PHP中文网

Design-acceptance-check

Polar Sponsor

爱发电赞助

.NET 9.0

立即下载

通过 Figma、MasterGo 等设计稿链接与开发截图/URL，按 Notion《验收全量检测内容清单》三维度加权验收（视觉40%+交互35%+适配25%），DSL 基准、V/I/A 全量检查点、bbox 标注与极端场景附录，输出 HTML 报告。Use when the user mentions 设计验收、视觉验收、三维度、交互验收、适配验收、极端场景、Figma、MasterGo、全量检查点、验收报告。

设计验收（全量）

功能概述

设计验收（全量）是一项面向实际任务的技能，主要用于对比设计工具基准（Figma / MasterGo / Pixso / 即时设计等）与开发实现（截图 + URL），按 Notion《验收全量检测内容清单》三维度加权验收，输出计分与标注报告；权威规则：rules-reference.md（Notion 定稿 + PDF）；

核心要点

计分：scoring-algorithm.md；
rules-refe。
它将相关步骤、工具调用和结果整理方式集中到统一流程中，帮助使用者更快完成目标并减少重复操作。

使用与执行

从功能定位来看，该技能强调把分散的操作要求整理成清晰、可复用的处理流程，使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数，再依据技能说明逐步执行；若输入条件不完整，应先补齐信息或采用保守配置，避免因错误假设导致结果偏离需求。

结果检查与注意事项

执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期，并对异常提示、缺失字段和边界情况进行处理；涉及批量任务时，还应保存进度，避免中断后重复操作。该技能适合用于一次性任务，也可以接入自动化工作流，与其他技能或上层代理配合完成更完整的业务链路；在组合使用时，应明确每一步的输入输出关系，并避免不同步骤之间出现参数冲突。

设计验收（全量）

对比 设计工具基准（Figma / MasterGo / Pixso / 即时设计等）与 开发实现（截图 + URL），按 Notion《验收全量检测内容清单》 三维度加权验收，输出计分与标注报告。

权威规则：rules-reference.md（Notion 定稿 + PDF）。计分：scoring-algorithm.md。

必读参考

文件	用途
rules-reference.md	V/I/A 检查点与扣分
scoring-algorithm.md	三维度加权与否决
design-link-baseline.md	设计链接 → baseline
figma-baseline.md / mastergo-baseline.md	平台 DSL
full-checkpoint-checklist.md	全量走查表
interaction-checklist.md	交互 I-*
adaptation-checklist.md	适配 A-*
extreme-scenarios.md	极端场景分层
annotation-guide.md	bbox 标注
acceptance-guardrails.md	防误判
report-generation.md	HTML 报告

必填	说明
设计稿链接	指向整页验收 Frame
开发截图	已登录、与设计帧同宽 PNG

强烈推荐	说明
开发 URL	交互 I-*、适配 Lighthouse、CDP 精确抽测

工作流

Task Progress:
- [ ] 0. 读 acceptance-guardrails.md 开验前清单
- [ ] 1. 设计链接 → design-baseline.json
- [ ] 2. 路由/端型/采图（H5：/app/ + iPhone UA + CDP clip）
- [ ] 3. 视觉 L1/L2/L3（V-* 全量）
- [ ] 4. 交互走查（I-*，需 URL）→ interaction-checklist.md
- [ ] 5. 适配走查（A-*）→ adaptation-checklist.md
- [ ] 6. 极端场景 → extreme-scenarios.md + risk-acceptance.json
- [ ] 7. 三维度计分 + checkpoint_ledger（~51 行 V/I/A）
- [ ] 8. HTML 报告 + annotated-dev.png

Step 0–3：视觉（保留原流程）

识别平台 → DSL → design-baseline.json（含 source_tool）
视口对齐：dev 与 frame 误差 ≤2%，否则 L2 px 标 untested
按 full-checkpoint-checklist.md 走查 V-*（编码可用 VA-*，报告归一化为 V-*）
每条 visual fail 须 bbox_px；design 引 DSL

id: F-003
checkpoint_code: V-COLOR-BRAND
dimension: visual
severity: general
deduction: 2
bbox_px: [545, 162, 78, 16]
design: "Token brand-warning #F5A623"
actual: "截图取样 #1890FF"
verified_by: mastergo_dsl

Step 4：交互验收

见 interaction-checklist.md。无 URL 时 I-* 标 untested + note，禁止猜扣分。

Step 5：适配验收

见 adaptation-checklist.md。多视口/深色/Lighthouse。

Step 6：极端场景

见 extreme-scenarios.md。产出 risk-acceptance.json。

Step 7：计分

scripts/va_utils.py → build_scores_payload(ledger, findings)。ledger 每个 V/I/A 一行。

Step 8：HTML 报告

SKILL="${VA_SKILL_ROOT:-.}"
OUT=reports/design-acceptance--

python3 "$SKILL/scripts/generate-report.py" 
  --dir "$OUT" 
  --title "<页面>设计验收" 
  --meta "375×812 · H5 · $(date +%F)" 
  --dev dev.png 
  --baseline design-baseline.json 
  --findings findings.json 
  --ledger checkpoint-ledger.json

python3 "$SKILL/scripts/bake-annotations.py" 
  "$OUT/dev.png" "$OUT/findings.json" -o "$OUT/annotated-dev.png"

与 design-fidelity-audit 区分

项目	本 skill（全量）	design-fidelity-audit（快速）
设计源	Figma/MasterGo DSL 为主	PNG / 截图为主
范围	V+I+A 三维度 + 极端场景	三维度但弱 DSL/MCP
编码	V/I/A-* + guardrails	V/I/A-*
报告	脚本化 HTML + 多维度分	Canvas/HTML 摘要
选用	正式验收、有设计链接	仅两张截图快速扫一眼