# {{pageTitle}} 设计规格

> 来源: {{sourceFile}} | 平台: {{platform}} | 页面数: {{screenCount}} | 生成: {{date}}

## 页面索引

| 页面 | 截图 | 路由 |
|------|------|------|
{{#each screens}}
| {{label}} | ![{{file}}](./screenshots/{{file}}) | {{route}} |
{{/each}}

## 一、Token 映射

| 原型值 | 项目 Token | 状态 |
|--------|-----------|------|
{{#each tokenMap}}
| {{prototypeValue}} ({{key}}) | {{tokenRef}} | {{statusIcon}} |
{{/each}}

> 状态标记: ✅ confirmed 直接使用 | ⚠️ pending 需人工复核 | ❌ unmatched 需硬编码或新建 Token

## 二、页面结构

{{#each screens}}
### {{ordinal}}. {{label}}

![{{label}}](./screenshots/{{file}})

布局层级（从上到下）：

{{layoutDescription}}

{{/each}}

## 三、组件映射

| 原型元素 | 推荐组件 | 来源 | 备注 |
|----------|---------|------|------|
{{#each componentMap}}
| {{prototypeElement}} | {{component}} | {{source}} | {{notes}} |
{{/each}}

{{#each newComponents}}
> ⚠️ **需新建**: {{name}} — {{reason}}
{{/each}}

## 四、交互规格

| 元素 | 交互 | 触发 | 反馈 | 备注 |
|------|------|------|------|------|
{{#each interactions}}
| {{element}} | {{type}} | {{trigger}} | {{feedback}} | {{notes}} |
{{/each}}

## 五、状态变体

{{#each stateVariants}}
- **{{name}}**: {{description}}
{{/each}}

## 六、样式清单

{{styleSummary}}

---

> 此规格由 design-handoff skill 自动生成。LLM 实施时请：
> 1. 先阅读截图建立视觉印象
> 2. 按 Token 映射表使用项目 Token（✅ 标记的直接用）
> 3. 优先使用"组件映射"中列出的已有组件
> 4. 参考"交互规格"实现对应的交互逻辑
> 5. "需新建"的组件参考截图和布局描述从头实现