/design-handoff

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

从设计生成全面的开发者交付文档。

用法

/design-handoff $ARGUMENTS

为以下内容生成交付规格说明:@$1

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

包含内容

视觉规格

交互规格

内容规格

边缘情况

无障碍性

原则

  1. 不要假设——如果没有明确说明,开发者就会猜测。说明一切。
  2. 使用令牌,而非值——引用 spacing-md 而不是 16px
  3. 展示所有状态——默认、悬停、激活、禁用、加载、错误、空。
  4. 描述原因——"这在移动端折叠是因为用户主要单手使用"有助于开发者做出正确的判断。

输出

## 交付规格说明:[功能/屏幕名称]

### 概述
[此屏幕/功能的功能、用户上下文]

### 布局
[网格系统、断点、响应式行为]

### 使用的设计令牌
| 令牌 || 用途 |
|-------|-------|-------|
| `color-primary` | #[十六进制] | CTA 按钮、链接 |
| `spacing-md` | [X]px | 区域之间 |
| `font-heading-lg` | [尺寸/粗细/字族] | 页面标题 |

### 组件
| 组件 | 变体 | 属性 | 说明 |
|-----------|---------|-------|-------|
| [组件] | [变体] | [属性] | [特殊行为] |

### 状态和交互
| 元素 | 状态 | 行为 |
|---------|-------|----------|
| [CTA 按钮] | 悬停 | [背景变暗 10%] |
| [CTA 按钮] | 加载 | [旋转指示器、禁用] |
| [表单] | 错误 | [红色边框、下方错误消息] |

### 响应式行为
| 断点 | 变化 |
|------------|---------|
| 桌面端(>1024px) | [默认布局] |
| 平板端(768-1024px) | [变化内容] |
| 移动端(<768px) | [变化内容] |

### 边缘情况
- **空状态**:[无数据时显示的内容]
- **长文本**:[截断规则]
- **加载**:[骨架屏或旋转指示器]
- **错误**:[错误状态外观]

### 动画/动效
| 元素 | 触发条件 | 动画 | 时长 | 缓动 |
|---------|---------|-----------|----------|--------|
| [元素] | [触发条件] | [描述] | [毫秒] | [缓动] |

### 无障碍说明
- [焦点顺序]
- [所需的 ARIA 标签]
- [键盘交互]

如果连接器可用

如果连接了 ~~design tool

如果连接了 ~~project tracker

提示

  1. 分享 Figma 链接——我可以拉取精确的尺寸、设计令牌和组件信息。
  2. 提及边缘情况——"100 个项目时会发生什么?"有助于我规范边界条件。
  3. 说明技术栈——"我们使用 React + Tailwind"有助于我提供相关的实施说明。