以 skill 自身的术语
从设计中生成开发者交接文档,面向设计已准备好交付工程、需要规格说明书的团队。将其指向一个 Figma URL,或退而使用描述或截图,它会依次处理视觉规格、交互规格、内容规格、边界情况与无障碍要求。
输出是一份 Markdown 交接规范(Handoff Spec),包含概述、布局、使用的设计 token、组件、状态与交互、响应式行为、边界情况,以及动画与运动、无障碍说明等章节。它遵循四条原则:明确指定一切而非假设、引用 token 而非原始数值、展示每种状态、并解释行为背后的原因。
它产出什么
- 一份设计 token 表格,列出每个 token 及其数值和用途。
- 一份组件表格,给出每个组件的变体、props 以及特殊行为说明。
- 一份动画与运动表格,记录元素、触发条件、动画、时长和缓动函数。
工作方式
- 01确定设计来源
提供 Figma URL 意味着设计将从 Figma 中提取;若没有,则 skill 会基于文字描述或截图来工作。
- 02明确视觉细节
精确的内边距、外边距和宽度,颜色、字体和间距的设计 token 引用,响应式断点,以及组件的变体与状态。
- 03明确交互细节
点击和轻触行为、悬停状态、手势支持,以及记录了时长和缓动函数的过渡效果。
- 04覆盖内容与边界情况
字符限制、截断、空状态、加载与错误状态,以及最小与最大内容量、更长的多语言字符串、慢速网络连接和数据缺失的情况。
- 05补充无障碍细节
焦点顺序、ARIA 标签与角色、键盘交互,以及屏幕阅读器播报内容。
- 06按模板输出规范
最终结果会按照该文件的章节与表格结构写成一份 Markdown 交接规范(Handoff Spec)。