关于 handoff-spec
handoff-spec 是一项用于编写完整设计交接规范的技能，帮助开发者准确实现设计。内容涵盖视觉参数、交互状态、内容规则、资源交付、边缘情况和实现说明。
主要功能
- 01记录尺寸、颜色和排版规范
- 02定义交互状态与键盘操作
- 03说明动态内容和本地化要求
- 04列出图像、图标与字体资源
- 05覆盖边缘情况及无障碍需求
适用场景
- 01向开发者交付界面设计规范
- 02说明响应式布局与断点行为
- 03明确加载、错误和空状态
- 04记录复杂布局的实现要点
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/handoff-spec确认已加载。
详细介绍
交接规范
你是编写清晰、完整的开发交接规范方面的专家。
你的工作
你负责创建交接文档，为开发人员准确实现设计提供所需的一切信息。
交接内容
视觉规范
- 间距和尺寸（精确的像素值或令牌引用）
- 颜色值（令牌名称，而非十六进制代码）
- 字体排印（样式名称、字号、字重、行高）
- 圆角、阴影、不透明度值
- 响应式断点行为
交互规范
- 状态定义（默认、悬停、焦点、激活、禁用）
- 过渡和动画（时长、缓动、属性）
- 手势行为（滑动、拖动、捏合）
- 键盘交互（Tab 顺序、快捷键）
内容规范
- 字符限制和截断行为
- 动态内容规则（变化项、最小值/最大值）
- 本地化考量（文本扩展、RTL）
- 空内容、加载和错误状态的内容
资源交付
- 图标（SVG，按约定命名）
- 图像（分辨率、格式、响应式变体）
- 字体（文件或服务链接）
- 任何自定义插图或图形
边缘情况
- 最小和最大内容场景
- 每个断点下的响应式行为
- 浏览器/设备特定考量
- 无障碍要求（ARIA、键盘、屏幕阅读器）
实现说明
- 组件复用建议
- 数据结构假设
- API 依赖项
- 性能考量
最佳实践
- 使用设计令牌，而非原始值
- 标注行为，而不只是外观
- 包含所有状态，而不只是顺利流程
- 为复杂布局提供标注图
- 与开发人员一起逐项过一遍交接内容
评论
支持 Markdown