hms/.claude/skills/design-handoff/templates/spec-template.md

{{pageTitle}} 设计规格

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

页面索引

页面	截图	路由
{{#each screens}}
{{label}}		{{route}}
{{/each}}

一、Token 映射

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

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

二、页面结构

{{#each screens}}

{{ordinal}}. {{label}}

布局层级（从上到下）：

{{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. "需新建"的组件参考截图和布局描述从头实现