Design handoff guide · 更新 2026-06-28

Design QA Checklist：States、Responsive Specs、Accessibility、Assets、Tokens、Copy、Handoff 与工程验收

判断 sketch、Figma frame、Penpot file、Sketch document 或 DESIGN.md spec 是否已经可以进入工程交付，而不是继续停留在设计润色阶段的 review checklist。

Design QA 失败，通常是团队等到实现阶段才发现 states 缺失、spacing 模糊、assets 无 owner、colors 不可访问、content rules 不完整或 token names 已过期。解决办法不是更长的 Figma comment thread，而是一张 designer 与 engineer 在 code 开始前共同 review 的 acceptance checklist。

这份指南把 Excalidraw-style ideation、Figma Dev Mode、Penpot design tokens、Sketch handoff 和 DESIGN.md-style agent-readable specs 连成一个 gate：证明 design artifact 有足够 states、constraints、tokens、content、assets、accessibility notes 和 owner decisions，才能安全进入实现。

RepoDaily 判断

当 developer 可以不靠猜测实现一个 component 或 flow 时，设计才算 engineering-ready。QA gate 应在 design 变成 ticket 前暴露 missing states、responsive behavior、accessibility constraints、token names、asset ownership、copy rules 与 rollback decisions。

RepoDaily fixture evidence：fake handoff packet QA 测试

这不是 Figma、Penpot、Sketch、Excalidraw 或任何设计工具的评测。RepoDaily 做了一个 fake local design handoff packet，用来检查 Design QA Checklist 是否能在工程开始前发现 missing states、responsive rules、accessibility notes、token drift、asset metadata gaps、copy/localization gaps、acceptance-criteria gaps 和 artifact classification 问题。

证据项	Fixture 结果	为什么重要	局限性
本地 handoff QA fixture	8/8 个预期 QA checks 通过。	验证的是 checklist 机制，不是 vendor 或 design-tool 排名。	小型 fake JSON handoff packet；没有导入真实 design file。
State 与 responsive gaps	Incomplete packet 缺少 hover、focus、disabled、loading、error、empty、success、tablet、mobile；fixed packet 已覆盖。	核心 states 或 viewports 仍靠暗示时，design 不应变成 engineering ticket。	Fixture 检查 metadata fields，不渲染 screenshots。
Accessibility gaps	Incomplete packet 缺少 focus order、keyboard behavior、labels、touch target、reduced-motion notes；fixed packet 已补齐。	Accessibility 应该在实现前 review，而不是等代码完成。	没有运行自动 WCAG scanner 或 browser test。
Token 与 asset gaps	Fixture 标记 raw hex/pixel values 和缺失的 icon owner/license/alt/export metadata，然后验证 fixed packet 使用 tokens 和 asset metadata。	Design QA 要把视觉稿转成 implementation-safe contracts。	使用 fake token names 和 fake SVG asset。
Copy 与 acceptance criteria	Fixture 标记缺失的 error、empty、success、localization 与 review criteria，然后生成 acceptance checklist。	Engineers 和 coding agents 需要明确 stop conditions，而不是 “match design”。	没有测试真实 product API 或 analytics implementation。

这节应理解为 RepoDaily 对 Design QA Checklist 的自测，不是任何设计工具的 benchmark。
这个测试支持页面建议：Design QA 应在工程开始前发现 states、responsiveness、accessibility、tokens、assets、copy 和 acceptance criteria 缺口。
这个证据刻意本地化且使用 fake packet，因此证明的是 checklist sanity，不是完整 design-system readiness。

快速矩阵

QA surface	检查什么	好信号	失败信号
States	Default、hover、focus、active、disabled、loading、error、empty、success	每个 interactive element 都有命名 states 和 examples	只有 happy-path desktop frame
Responsive behavior	Breakpoints、reflow、min/max widths、truncation、density、device class	Developer 不用问 designer 就能预测 layout changes	Mobile/tablet behavior 被暗示但没画出来
Accessibility	Contrast、focus order、keyboard behavior、labels、touch target、motion、reduced motion	WCAG-relevant decisions 在 artifact 旁边可见	Color 和 motion choices 只看审美
Tokens and styles	Color、typography、spacing、radius、shadow、icon、motion tokens	Artifact 引用 token names 或 approved style names	Raw hex values 和 manual measurements 驱动实现
Assets	Icons、images、logos、fonts、illustrations、alt text、licensing、export size	Assets 有 owner、export format 和 usage context	Developers 截图或手动裁剪 assets
Copy and localization	Error text、empty-state text、labels、dates、currency、pluralization、truncation	Content rules 绑定 states 和 locales	最终 ticket 仍是 placeholder text
Engineering acceptance	API assumptions、data states、events、analytics、error boundaries、test cases	Handoff 包含 acceptance criteria 和 stop conditions	Ticket 只写 “match design”

Design QA 准备度评分卡

工程交付前，先给一个真实 component 或 flow 打分。

控制项	0 分	1 分	2 分	Owner 问题
State coverage	只有 happy path	画了一些 states	关键 states 全部命名并 review	哪个 state 最可能在 code 中漏掉？
Responsive rules	单个 desktop frame	有 mobile sketch	Breakpoints 和 reflow rules 明确	低于最窄 supported width 时会发生什么？
Accessibility review	未检查	只看 color contrast	Contrast、focus、keyboard、labels、motion、touch targets 都 review	哪个 WCAG risk 仍未解决？
Token alignment	只有 raw values	有部分 style names	引用 approved tokens/styles 且可 export	Code 应该消费哪些 token names？
Asset readiness	Assets 嵌在 mockups 里	附了一些 exports	Asset formats、sizes、licenses、owners 已记录	上线后谁负责 asset updates？
Acceptance criteria	Ticket 指向 design	Comments 里有一些 notes	附上 engineering-ready criteria 和 test cases	什么情况会让这个实现 review 失败？

30 分钟 Design QA 测试计划

把 design artifact 发给工程前使用。

0–5 分钟：分类 artifact

判断 artifact 是 sketch、exploration、system candidate，还是 engineering-ready spec。

成功标准没有人把 ideation 误当 implementation authority。

5–10 分钟：state pass

列出缺失的 default、hover、focus、disabled、loading、error、empty、success states。

成功标准关键 state gaps 可见。

10–16 分钟：responsive 和 accessibility pass

检查 breakpoints、reflow、contrast、focus、keyboard、labels、motion 和 touch targets。

成功标准Design 有命名的 accessibility 与 layout decisions。

16–22 分钟：token 和 asset pass

记录 token names、style names、assets、export formats、licenses 和 owners。

成功标准Developer 不需要复制 raw values 或手动裁剪 assets。

22–30 分钟：implementation rehearsal

让 engineer 或 coding agent 在写代码前解释实现步骤和疑问。

成功标准Clarification questions 变成明确 QA fixes 或 acceptance criteria。

Design QA 决策流程

从一个 component family 或 user flow 开始，而不是整个 product redesign。
先分类 artifact：sketch/idea、design exploration、design-system candidate，还是 engineering-ready spec。
先跑 state checklist；missing disabled、loading、empty、error states 是最快阻塞实现的问题。
在 engineering 开始前，review responsive behavior、accessibility constraints、token names、assets、copy 和 analytics。
让一个 engineer 用 artifact 实现最小 slice；每个 clarification question 都是 QA defect。
只有 implementation criteria、owner、rollback path 和 follow-up changes 明确时，artifact 才能升级为工程交付。

场景表

场景	最小 QA checklist	停止条件
Excalidraw sketch 到 product design	先把 sketch 转成 named components、flows、data states 和 token candidates	Sketch 仍被当作 production spec
Figma frame 到 engineering ticket	使用 Dev Mode/handoff artifacts、components、styles、comments、state variants 和 acceptance criteria	Engineer 必须从 static screenshots 猜行为
Penpot self-hosted design system	检查 component naming、tokens、export fidelity、backups 和 developer inspect workflow	Self-hosting 解决了，但 design QA 仍依赖 tribal knowledge
Sketch handoff 到 web implementation	验证 browser-based inspect、asset export、text styles、color variables 和 token download expectations	Mac-only design context 阻挡非 Mac engineering review
DESIGN.md 给 coding agents	把 design rules 转成 agent coding 时可引用的 explicit constraints 和 examples	Spec 已过期或与当前 design file 冲突
Design token change review	运行 token export checklist，并展示 affected components、modes 和 rollback path	Token rename 影响未知

Design QA 风险清单

Happy-path bias

团队只 review 最漂亮的 frame，跳过 error、empty、loading、disabled 和 focus states。

Responsive guesswork

设计文件只展示一个 viewport，工程师被迫发明 breakpoints。

Accessibility afterthought

Contrast、focus order、labels、keyboard behavior 和 motion sensitivity 等到代码完成后才检查。

Token drift

设计看起来一致，但使用的 raw values 无法映射到 production tokens。

Asset ambiguity

Icons、fonts、image crops 和 illustrations 没有 ownership 或 license review 就上线。

Agent misimplementation

如果 spec 不明确，coding agents 会自信实现 stale 或 under-specified design rules。

实施模式

One-slice handoff

先在一个 component family 或 flow 上跑 checklist，再推广到整个 design system。

Clarification log

实现过程中每个 engineer question 都变成 design artifact 的新 QA item。

State table before ticket

Code 开始前，把 state matrix 附到 ticket；不要让 states 只存在 comments 里。

Token and asset manifest

在 design 旁边列出 token names、asset names、export formats、licenses 和 owners。

Accessibility notes beside visuals

把 contrast、focus、keyboard 和 motion decisions 放在 artifact 旁边，不要放到容易遗忘的分离文档里。

Agent-ready spec mirror

如果 coding agents 会实现这次变更，把最终 QA decisions 镜像到 DESIGN.md-style instructions。

常见问题

给准备 handoff 的设计和工程团队提供简短答案。

Design QA 和视觉打磨一样吗？

不一样。视觉打磨问设计是否好看；Design QA 问它是否可以不靠猜测被实现。

Design QA 应该放在哪里？

靠近 artifact 和 ticket：state table、token names、asset manifest、accessibility notes 和 acceptance criteria 应该一起 review。

Excalidraw sketch 能通过 Design QA 吗？

通常不能。它可以启动讨论，但生产 handoff 需要 states、tokens、responsive rules、assets、content 和 acceptance criteria。

这对 coding agents 有什么帮助？

Agents 需要明确 design constraints。QA checklist 能减少 hallucinated spacing、stale tokens、missing states 和 unsupported interactions。

来源

Feedback

这页是否帮助你做出决定？

匿名反馈只用于判断内容是否真正有用。

报告过期或缺失的证据