/design-handoff

如果您看到不熟悉的占位符或需要检查哪些工具已连接，请参阅 CONNECTORS.md。

根据设计生成全面的开发者交接文档。

用法 (Usage)

/design-handoff $ARGUMENTS

为以下内容生成交接规范：@$1

如果提供了 Figma URL，则从 Figma 拉取设计。否则，根据提供的描述或截图进行工作。

包含内容 (What to Include)

视觉规范 (Visual Specifications)

• 精确尺寸（内边距、外边距、宽度）(Exact measurements: padding, margins, widths)
• 设计标记引用（颜色、排版、间距）(Design token references: colors, typography, spacing)
• 响应式断点和行为 (Responsive breakpoints and behavior)
• 组件变体和状态 (Component variants and states)

交互规范 (Interaction Specifications)

• 点击/轻触行为 (Click/tap behavior)
• 悬停状态 (Hover states)
• 过渡和动画（持续时间、缓动函数）(Transitions and animations: duration, easing)
• 手势支持（滑动、捏合、长按）(Gesture support: swipe, pinch, long-press)

内容规范 (Content Specifications)

• 字符限制 (Character limits)
• 截断行为 (Truncation behavior)
• 空状态 (Empty states)
• 加载状态 (Loading states)
• 错误状态 (Error states)

边缘情况 (Edge Cases)

• 最小/最大内容 (Minimum/maximum content)
• 国际化文本（较长的字符串）(International text: longer strings)
• 慢速连接 (Slow connections)
• 缺失数据 (Missing data)

无障碍访问 (Accessibility)

• 焦点顺序 (Focus order)
• ARIA 标签和角色 (ARIA labels and roles)
• 键盘交互 (Keyboard interactions)
• 屏幕阅读器播报 (Screen reader announcements)

原则 (Principles)

1. 不要假设 (Don’t assume) — 如果没有明确说明，开发者就会猜测。请明确说明所有内容。 (If it’s not specified, the developer will guess. Specify everything.)
2. 使用标记，而非具体数值 (Use tokens, not values) — 引用 spacing-md 而不是 16px。
3. 展示所有状态 (Show all states) — 默认、悬停、激活、禁用、加载、错误、空状态。 (Default, hover, active, disabled, loading, error, empty.)
4. 描述原因 (Describe the why) — “由于用户主要单手操作，此部分在移动端折叠” 这样的描述有助于开发者做出正确的判断。 (This helps developers make good judgment calls.)

输出 (Output)

## 交接规范： [功能/屏幕名称] (Handoff Spec: [Feature/Screen Name])

### 概述 (Overview)
[此屏幕/功能的作用、用户使用场景] (What this screen/feature does, user context)

### 布局 (Layout)
[网格系统、断点、响应式行为] (Grid system, breakpoints, responsive behavior)

### 使用的设计标记 (Design Tokens Used)
| 标记 (Token) | 值 (Value) | 用途 (Usage) |
|------------|-------|-------|
| `color-primary` | #[十六进制值 (hex)] | 行动召唤按钮、链接 (CTA buttons, links) |
| `spacing-md` | [X]px | 区块间距 (Between sections) |
| `font-heading-lg` | [尺寸/粗细/字体族 (size/weight/family)] | 页面标题 (Page title) |

### 组件 (Components)
| 组件 (Component) | 变体 (Variant) | 属性 (Props) | 说明 (Notes) |
|-----------|---------|-------|-------|
| [组件名 (Component)] | [变体名 (Variant)] | [属性 (Props)] | [特殊行为 (Special behavior)] |

### 状态与交互 (States and Interactions)
| 元素 (Element) | 状态 (State) | 行为 (Behavior) |
|---------|-------|----------|
| [行动召唤按钮 (CTA Button)] | 悬停 (Hover) | [背景颜色变暗 10% (Background darken 10%)] |
| [行动召唤按钮 (CTA Button)] | 加载 (Loading) | [显示加载指示器，禁用 (Spinner, disabled)] |
| [表单 (Form)] | 错误 (Error) | [红色边框，下方显示错误信息 (Red border, error message below)] |

### 响应式行为 (Responsive Behavior)
| 断点 (Breakpoint) | 变化 (Changes) |
|------------|---------|
| 桌面 (>1024px) (Desktop) | [默认布局 (Default layout)] |
| 平板 (768-1024px) (Tablet) | [变化内容 (What changes)] |
| 移动端 (<768px) (Mobile) | [变化内容 (What changes)] |

### 边缘情况 (Edge Cases)
- **空状态 (Empty state)**: [无数据时显示什么 (What to show when no data)]
- **长文本 (Long text)**: [截断规则 (Truncation rules)]
- **加载 (Loading)**: [骨架屏或加载指示器 (Skeleton or spinner)]
- **错误 (Error)**: [错误状态外观 (Error state appearance)]

### 动画/动效 (Animation / Motion)
| 元素 (Element) | 触发 (Trigger) | 动画 (Animation) | 持续时间 (Duration) | 缓动函数 (Easing) |
|---------|---------|-----------|----------|--------|
| [元素 (Element)] | [触发条件 (Trigger)] | [描述 (Description)] | [毫秒 (ms)] | [缓动类型 (easing)] |

### 无障碍访问说明 (Accessibility Notes)
- [焦点顺序 (Focus order)]
- [所需的 ARIA 标签 (ARIA labels needed)]
- [键盘交互 (Keyboard interactions)]

如果连接器可用 (If Connectors Available)

如果 ~~设计工具 (design tool) 已连接：

• 从 Figma 拉取精确测量值、标记和组件规范
• 导出资源并生成完整的规范表

如果 ~~项目跟踪器 (project tracker) 已连接：

• 将交接文档链接到实现任务
• 为规范的每个部分创建子任务

提示 (Tips)

1. 分享 Figma 链接 (Share the Figma link) — 我可以拉取精确的测量值、标记和组件信息。 (I can pull exact measurements, tokens, and component info.)
2. 提及边缘情况 (Mention edge cases) — “如果有一百个项目会怎样？” 这类问题可以帮助我明确边界条件的规范。 (This helps me spec boundary conditions.)
3. 指定技术栈 (Specify the tech stack) — “我们使用 React + Tailwind” 可以帮助我提供相关的实现说明。 (This helps me give relevant implementation notes.)