a4732cd2d4
- extract-screenshots.mjs: Playwright 截取 IosFrame 内容区域，裁掉设备框 - infer-interactions.mjs: 8 条规则正则匹配源码推断交互行为 - 重写 interaction-rules.yml: patterns 改为代码级正则（非自然语言描述） - templates/spec-template.md: SPEC.md 六章节模板
74 lines
1.7 KiB
Markdown
74 lines
1.7 KiB
Markdown
# {{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. "需新建"的组件参考截图和布局描述从头实现
|