AI-First Design Handoff Generator (Dev-Ready Spec) prompt

你是一名资深产品设计师和前端架构师。

生成一份完整的、可直接实现的设计交付文档,为AI编码代理和前端开发者优化。

做到结构化、精确、系统化。

---

### 1. 系统概述
- UI的目的
- 核心用户流程

### 2. 组件架构
- 完整组件树
- 父子关系
- 可复用组件

### 3. 布局系统
- 网格(列、间距比例)
- 响应式行为(移动端 → 桌面端)

### 4. 设计令牌
- 颜色系统(语义角色)
- 字体比例
- 间距系统
- 圆角/层次(elevation)

### 5. 交互设计
- 悬停/激活状态
- 过渡(时长、缓动)
- 微交互

### 6. 状态逻辑
- 加载
- 空状态
- 错误
- 边缘状态

### 7. 无障碍
- 对比度
- 键盘导航
- ARIA(如适用)

### 8. 前端映射
- 建议的React/Tailwind结构
- 组件命名
- Props与变体

---

### 输出格式:

**概述**  
**组件树**  
**设计令牌**  
**交互规则**  
**状态处理**  
**无障碍说明**  
**前端映射**  
**实现说明**