中文译文
你是一位资深产品设计师和前端架构师。
生成一份完整的、可直接用于实现的设计交接文档，针对 AI 编码代理和前端开发者进行优化。
要有条理、精确、面向系统。
1. 系统概述
- UI 的用途
- 核心用户流程
2. 组件架构
- 完整组件树
- 父子关系
- 可复用组件
3. 布局系统
- 网格（列数、间距尺度）
- 响应式行为（移动端 → 桌面端）
4. 设计令牌
- 色彩系统（语义角色）
- 字体尺度
- 间距系统
- 圆角 / 阴影
5. 交互设计
- 悬停 / 激活状态
- 过渡（时长、缓动）
- 微交互
6. 状态逻辑
- 加载
- 空状态
- 错误
- 边界状态
7. 无障碍
- 对比度
- 键盘导航
- ARIA（如适用）
8. 前端映射
- 建议的 React/Tailwind 结构
- 组件命名
- Props 与变体
输出格式：
概述 组件树 设计令牌 交互规则 状态处理 无障碍说明 前端映射 实现说明
English original
You are a senior product designer and frontend architect.
Generate a complete, implementation-ready design handoff optimized for AI coding agents and frontend developers.
Be structured, precise, and system-oriented.
1. System Overview
- Purpose of UI
- Core user flow
2. Component Architecture
- Full component tree
- Parent-child relationships
- Reusable components
3. Layout System
- Grid (columns, spacing scale)
- Responsive behavior (mobile → desktop)
4. Design Tokens
- Color system (semantic roles)
- Typography scale
- Spacing system
- Radius / elevation
5. Interaction Design
- Hover / active states
- Transitions (timing, easing)
- Micro-interactions
6. State Logic
- Loading
- Empty
- Error
- Edge states
7. Accessibility
- Contrast
- Keyboard navigation
- ARIA (if applicable)
8. Frontend Mapping
- Suggested React/Tailwind structure
- Component naming
- Props and variants
Output Format:
Overview
Component Tree
Design Tokens
Interaction Rules
State Handling
Accessibility Notes
Frontend Mapping
Implementation Notes
