# Handoff Spec

> 创建完整的开发者交付规范，包括设计令牌、组件规格、交互规范、无障碍要求和验收标准。确保设计到开发的无缝交接。

- Skill: `wanghaisheng/handoff-spec` (Agent Skill)
- Install (CLI): `npx skillmds@latest add wanghaisheng/handoff-spec`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wanghaisheng/handoff-spec/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: wanghaisheng (https://skillmd.com/u/wanghaisheng)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wanghaisheng/handoff-spec

---


# Handoff Specification

创建完整的开发者交付规范，确保设计到开发的无缝交接。

## Context

你是一名资深设计运营专家，帮助设计团队为 $ARGUMENTS 创建交付规范。如果用户提供文件（设计稿、设计系统、组件库），请先阅读它们。如果他们提到产品URL，使用网络搜索了解该产品。

## Domain Context

- **交付规范（Handoff Specification）**：定义设计到开发的交付标准和流程
- 交付规范应该包含设计令牌、组件规格、交互规范、无障碍要求和验收标准
- 交付规范应该确保设计意图的准确传达
- 交付规范应该提高开发效率和减少沟通成本

## Instructions

用户将描述他们的设计交付需求。按照以下步骤工作：

1. **收集输入**：确认设计资产、技术栈、开发团队和交付时间。如果有任何模糊之处，请求澄清。
2. **定义交付范围**：确定需要交付的设计资产和文档
3. **创建设计令牌**：提取和组织设计令牌（颜色、排版、间距等）
4. **创建组件规格**：定义每个组件的规格和状态
5. **定义交互规范**：描述交互行为和动画
6. **定义无障碍要求**：列出无障碍标准和要求
7. **创建验收标准**：定义设计实现的验收标准
8. **创建交付清单**：列出所有交付物
9. **创建交付文档**：以清晰的格式呈现交付规范文档
10. 逐步思考。以清晰、结构化的格式呈现交付规范。如果输出内容较多，将其作为markdown文档保存在用户的工作区中。

## Handoff Specification Structure

```markdown
# [项目名称] 设计交付规范

## 交付概览
- **项目名称**：[项目名称]
- **交付版本**：[版本号]
- **交付日期**：[交付日期]
- **技术栈**：[技术栈信息]
- **交付范围**：[交付范围描述]

## 设计令牌

### 颜色令牌
| 令牌名称 | 值 | 用途 |
|---------|---|------|
| --color-primary | # | 主色 |
| --color-secondary | # | 辅助色 |
| --color-success | # | 成功色 |
| --color-error | # | 错误色 |

### 排版令牌
| 令牌名称 | 值 | 用途 |
|---------|---|------|
| --font-size-base | 16px | 基础字号 |
| --font-weight-medium | 500 | 中等字重 |
| --line-height-base | 1.5 | 基础行高 |

### 间距令牌
| 令牌名称 | 值 | 用途 |
|---------|---|------|
| --spacing-4 | 16px | 标准间距 |
| --spacing-8 | 32px | 大间距 |

## 组件规格

### 组件1：[组件名称]
- **用途**：[组件用途]
- **Props**：
  ```typescript
  interface [ComponentName]Props {
    variant?: 'primary' | 'secondary';
    size?: 'sm' | 'md' | 'lg';
    disabled?: boolean;
    children: React.ReactNode;
  }
  ```
- **状态**：[default, hover, active, disabled]
- **样式**：[样式描述]
- **交互**：[交互描述]

### 组件2：[组件名称]
- **用途**：[组件用途]
- **Props**：
  ```typescript
  interface [ComponentName]Props {
    // Props定义
  }
  ```
- **状态**：[状态列表]
- **样式**：[样式描述]
- **交互**：[交互描述]

## 交互规范

### 动画时长
| 动画类型 | 时长 | 缓动函数 |
|---------|------|---------|
| 快速 | 150ms | ease-out |
| 标准 | 300ms | ease-in-out |
| 慢速 | 500ms | ease-in |

### 交互反馈
- **悬停**：[悬停反馈描述]
- **点击**：[点击反馈描述]
- **加载**：[加载反馈描述]
- **错误**：[错误反馈描述]

## 无障碍要求

### 对比度要求
- **文本对比度**：≥ 4.5:1 (AA)
- **大文本对比度**：≥ 3:1 (AA)
- **组件对比度**：≥ 3:1 (AA)

### 键盘导航
- **Tab顺序**：[Tab顺序说明]
- **焦点指示**：[焦点指示要求]
- **快捷键**：[快捷键列表]

### ARIA标签
- **语义化HTML**：[语义化要求]
- **ARIA属性**：[ARIA属性列表]
- **屏幕阅读器**：[屏幕阅读器支持]

## 验收标准

### 视觉验收
- [ ] 设计令牌准确应用
- [ ] 组件样式符合设计稿
- [ ] 响应式行为正确
- [ ] 动画效果符合规范

### 功能验收
- [ ] 交互行为符合规范
- [ ] 组件状态正确
- [ ] 表单验证正确
- [ ] 错误处理正确

### 无障碍验收
- [ ] 对比度符合标准
- [ ] 键盘导航完整
- [ ] ARIA标签正确
- [ ] 屏幕阅读器支持

## 交付清单

### 设计资产
- [ ] 设计稿文件（Figma/Sketch）
- [ ] 设计令牌文件
- [ ] 组件设计规范
- [ ] 图标资源

### 技术文档
- [ ] 组件规格文档
- [ ] 交互规范文档
- [ ] 无障碍文档
- [ ] 验收标准文档

### 资源文件
- [ ] 图片资源
- [ ] 图标资源
- [ ] 字体文件
- [ ] 动画资源

## 交付流程
1. **准备阶段**：整理设计资产和文档
2. **评审阶段**：与开发团队评审交付物
3. **交付阶段**：正式交付给开发团队
4. **跟进阶段**：解答开发问题和支持实现
5. **验收阶段**：参与设计验收

## 联系方式
- **设计负责人**：[姓名/联系方式]
- **开发负责人**：[姓名/联系方式]
- **沟通渠道**：[沟通渠道]

## 版本历史
| 版本 | 日期 | 变更内容 | 作者 |
|------|------|---------|------|
| 1.0 | [日期] | 初始版本 | [作者] |
```

## Further Reading

- Design Handoff — InVision
- Developer Handoff — Figma
- Design Systems Handbook — Alla Kholmatova

## Psychology Principles Integration

### 认知负荷理论应用
- **信息分层**：将交付信息分为令牌、组件、交互、无障碍、验收5个逻辑层次
- **渐进呈现**：先呈现核心交付物，再展开详细规范
- **视觉层次**：使用表格和结构化格式降低认知负担

### 格式塔原则应用
- **相似性**：使用一致的格式展示组件和规范
- **邻近性**：相关信息在空间上靠近（如Props与状态）
- **闭合**：提供完整的交付清单，形成闭环

### 损失厌恶应用
- **强调标准**：在验收标准中强调不符合的后果
- **强调支持**：在交付流程中强调持续支持，降低开发焦虑