SuperAPI AI 工具集

handoff-spec

设计与创作

查看项目

更新于 10-16 07:46

技能介绍

用途

Handoff Spec 用于在工程团队接手设计工作时,撰写清晰、完整的开发交接规范。它的目标是把设计意图转化为开发者能够准确实现所需的全部信息,减少沟通成本与实现偏差。

主要能力

该技能产出的交接文档包含以下内容:

视觉规格

  • 间距与尺寸(精确像素值或令牌引用)
  • 颜色值(使用令牌名称,而非十六进制色值)
  • 字体排版(样式名称、字号、字重、行高)
  • 圆角、阴影、透明度数值
  • 响应式断点行为

交互规格

  • 状态定义(默认、悬停、聚焦、激活、禁用)
  • 过渡与动画(时长、缓动、属性)
  • 手势行为(滑动、拖拽、捏合)
  • 键盘交互(Tab 顺序、快捷键)

内容规格

  • 字符限制与截断行为
  • 动态内容规则(哪些内容会变化、最小/最大值)
  • 本地化考虑(文本扩展、RTL 从右到左布局)
  • 空状态、加载状态和错误状态的文案

资源交付

  • 图标(SVG,按约定命名)
  • 图片(分辨率、格式、响应式变体)
  • 字体(文件或服务链接)
  • 自定义插画或图形

边界情况

  • 内容的最小与最大场景
  • 各断点下的响应式行为
  • 浏览器/设备特定注意事项
  • 无障碍要求(ARIA、键盘、屏幕阅读器)

实现说明

  • 组件复用建议
  • 数据结构假设
  • API 依赖
  • 性能考虑

使用方式

当工程团队开始接手设计实现时使用该技能。它会引导生成上述各类规格的交接文档。

最佳实践

  • 使用设计令牌,而非原始数值
  • 标注行为,而不仅是外观
  • 包含所有状态,而不只是正常路径
  • 为复杂布局提供标注图(redlines)
  • 与开发者一起走查交接内容

适用场景

适用于设计到开发的交接阶段,尤其是需要精确实现、涉及多状态、多断点、无障碍要求或复杂交互的项目。

限制

资料未提供该技能的具体安装方式、运行环境、收费模式或平台支持信息,暂未提供。