设计定稿后生成开发交付规格文档（布局/token/状态/响应…

当设计已可交付给工程实现时，用它产出一份覆盖布局、design token、组件 props、交互状态、响应式断点、边界情况与动画细节的完整 handoff 规格文档。

适用场景

解决思路

1. 执行 `/design-handoff $ARGUMENTS`，参数传入 Figma URL 或设计描述，为 @$1 生成交付规格。
2. 若参数中提供了 Figma URL，就从 Figma 拉取设计；否则基于给出的文字描述或截图来工作。
3. 编写视觉规格：精确尺寸（padding、margin、width）、design token 引用（颜色、字体、间距）、响应式断点与行为、组件变体与状态。
4. 编写交互规格：click/tap 行为、hover 状态、过渡与动画（duration、easing）、手势支持（swipe、pinch、long-press）。
5. 编写内容规格：字符数上限、截断行为、空状态、加载状态、错误状态。
6. 覆盖边界情况：内容的最小/最大值、国际化文本（更长的字符串）、慢速连接、数据缺失。
7. 覆盖无障碍：焦点顺序、ARIA 标签与 role、键盘交互、屏幕阅读器播报。
8. 遵循原则「不要假设」：凡是没写明的，开发者只能靠猜，所以全部指定清楚。
9. 遵循原则「用 token，不要用数值」：引用 `spacing-md` 而不是 `16px`。
10. 遵循原则「展示所有状态」：default、hover、active、disabled、loading、error、empty。
11. 遵循原则「说明为什么」：例如说明「移动端折叠是因为用户主要单手操作」，帮助开发者做出正确判断。
12. 按给定的 markdown 模板输出，包含这些小节：Overview（这个页面/功能做什么、用户场景）、Layout（栅格系统、断点、响应式行为）、Design Tokens Used 表格（Token / Value / Usage，如 `color-primary`、`spacing-md`、`font-heading-lg`）、Components 表格（Component / Variant / Props / Notes）、States and Interactions 表格（Element / State / Behavior，如 CTA 按钮 hover 背景加深 10%、loading 显示 spinner 并禁用、表单 error 红色边框加下方错误信息）、Responsive Behavior 表格（Breakpoint / Changes，如 Desktop >1024px、Tablet 768-1024px、Mobile <768px）、Edge Cases（empty state、long text 截断规则、loading 骨架或 spinner、error 状态外观）、Animation / Motion 表格（Element / Trigger / Animation / Duration / Easing）、Accessibility Notes（焦点顺序、需要的 ARIA 标签、键盘交互）。
13. 若连接了设计工具：从 Figma 拉取精确测量、token 和组件规格，导出资源并生成完整规格表。
14. 若连接了项目管理工具：把这份 handoff 关联到实现 ticket，并按规格的每个小节创建子任务。
15. 提示用户分享 Figma 链接，以便拉取精确测量、token 和组件信息。
16. 提示用户主动提到边界情况（例如「100 条数据会怎样」），以便把边界条件写进规格。
17. 提示用户说明技术栈（例如「我们用 React + Tailwind」），以便给出相关的实现说明。

适用边界 · 注意事项

• 设计仍处于探索/概念阶段、尚未定稿时，规格会频繁失效。
• 任务完全不涉及 UI（如纯后端、数据处理），没有可交付的界面规格。
• 既没有设计稿/截图、又无法提供设计描述，且未连接设计工具，此时拿不到精确测量与 token。