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