Design-acceptance-check

👤 雲斷 📦 v1.0.0 ⭐ 4.5 ⬇️ 249 下載
🎨 設計多媒體 免費

📖 技能介紹


name: design-acceptance-check description: 通過 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-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:視覺(保留原流程)

  1. 識別平臺 → DSL → design-baseline.json(含 source_tool
  2. 視口對齊:dev 與 frame 誤差 ≤2%,否則 L2 px 標 untested
  3. full-checkpoint-checklist.md 走查 V-*(編碼可用 VA-*,報告歸一化為 V-*
  4. 每條 visual failbbox_pxdesign 引 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.pybuild_scores_payload(ledger, findings)。ledger 每個 V/I/A 一行

Step 8:HTML 報告

SKILL="${VA_SKILL_ROOT:-.}"
OUT=reports/design-acceptance-<page>-<timestamp>

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 摘要
選用 正式驗收、有設計連結 僅兩張截圖快速掃一眼

詳見 fidelity-audit-migration.md

輸出檢查

7w4.net提供免費和付費技能下載。

  • [ ] 已執行 acceptance-guardrails.md 開驗前清單
  • [ ] design-baseline.json + report-meta.json
  • [ ] 全部 V/I/A checkpoint 有 pass/fail/na/untested
  • [ ] visual fail 均有 bbox_pxdesign 引 DSL
  • [ ] scores.json 含 visual/interaction/adaptation/total/grade/veto_applied
  • [ ] HTML:三維度分 + 分維 ledger + 極端場景附錄(如有)

🤖 AI 評測

這個 Skill 質量紮實,文件非常詳細,驗收規則清晰,扣分機制設計合理,能有效避免誤判。支援對比設計稿和開發實現,自動生成帶評分的 HTML 報告。不足之處是配置檔案命名有個小問題,以及部分文件較長、較專業,新手需要花時間消化。總體推薦使用。

📊 多維度評分

適應性4.8
規範性4.5
有效性4.6
可靠性4.2
可信度4.8

📁 包含檔案 (32 個)

📄 README.md 3.2 KB
📄 SKILL.md 5.1 KB
📄 acceptance-guardrails.md 7.6 KB
📄 adaptation-checklist.md 2.6 KB
📄 annotation-guide.md 1.7 KB
📄 design-link-baseline.md 4.2 KB
📄 examples.md 1.7 KB
📄 extreme-scenarios.md 2.5 KB
📄 fidelity-audit-migration.md 1.2 KB
📄 figma-baseline.md 2.6 KB
📄 full-checkpoint-checklist.md 5.5 KB
📄 interaction-checklist.md 2.7 KB
📄 mastergo-baseline.md 4 KB
📄 pyproject.toml 398 B
📄 report-generation.md 3.7 KB
📄 report-template.html 882 KB
📄 requirements-dev.txt 46 B
📄 requirements.txt 15 B
📄 rules-reference.md 12.8 KB
📄 scoring-algorithm.md 4.1 KB
📄 scripts/bake-annotations.py 4.2 KB
📄 scripts/build-report-template.sh 728 B
📄 scripts/check-project-size.sh 2.1 KB
📄 scripts/clean-dev-artifacts.sh 495 B
📄 scripts/generate-report.py 8.8 KB
📄 scripts/va_utils.py 15.4 KB
📄 tests/fixtures/report-minimal/checkpoint-ledger.json 277 B
📄 tests/fixtures/report-minimal/design-baseline.json 176 B
📄 tests/fixtures/report-minimal/findings.json 331 B
📄 tests/fixtures/report-minimal/scores.json 325 B
📄 tests/test_report_template.py 3.9 KB
📄 tests/test_va_utils.py 9.2 KB