fix(skills): Step 7 改为 design-handoff 自行实施,不再调用 huashu-design
原因: huashu-design 是纯设计 skill,加实施模式会导致人格冲突、 SKILL.md 膨胀、约束倒灌。design-handoff 已有 SPEC+截图+Token 映射, 直接在当前会话实施代码更自然。
This commit is contained in:
@@ -1,14 +1,14 @@
|
||||
---
|
||||
name: design-handoff
|
||||
description: 设计交付编排器 — 调用 huashu-design 设计原型、解析生成 SPEC、再调用 huashu-design 实施代码,覆盖从需求到实现的完整流程
|
||||
description: 设计交付编排器 — 调用 huashu-design 设计原型、解析生成 SPEC,再由本 skill 根据 SPEC 实施代码,覆盖从需求到实现的完整流程
|
||||
---
|
||||
|
||||
# 设计交付编排器 (design-handoff)
|
||||
|
||||
编排 huashu-design 完成从需求到代码实现的完整流程:
|
||||
编排从需求到代码实现的完整流程:
|
||||
1. 调用 huashu-design 设计 HTML 原型
|
||||
2. 解析原型生成 SPEC.md + 截图 + Token 映射
|
||||
3. 调用 huashu-design 根据 SPEC 实施代码
|
||||
3. 根据 SPEC 直接实施代码(不调用 huashu-design)
|
||||
|
||||
## 触发词
|
||||
|
||||
@@ -121,31 +121,26 @@ node .claude/skills/design-handoff/scripts/infer-interactions.mjs <html文件路
|
||||
|
||||
将前 5 步数据组装为 SPEC.md,输出到 `docs/design/{原型名}/SPEC.md`。
|
||||
|
||||
### Step 7: 实施代码(全流程自动)
|
||||
### Step 7: 实施代码
|
||||
|
||||
调用 huashu-design 根据 SPEC 实施代码:
|
||||
根据 Step 1-6 产出的 SPEC.md、截图和 Token 映射,**在当前会话中直接实施代码**。
|
||||
|
||||
```
|
||||
Skill("huashu-design", "请根据以下设计规格实现代码。
|
||||
**实施流程:**
|
||||
|
||||
设计规格文件: docs/design/{原型名}/SPEC.md
|
||||
截图参考: docs/design/{原型名}/screenshots/
|
||||
Token 映射: docs/design/{原型名}/tokens.json
|
||||
1. **读取 SPEC.md** — 获取 Token 映射、组件清单、交互行为、未匹配项
|
||||
2. **读取截图** — 对照截图确认视觉还原度
|
||||
3. **创建/修改文件** — 在 `apps/miniprogram/src/pages/` 下实现 Taro 页面
|
||||
4. **验证** — `pnpm build` 编译通过 + 长者模式适配
|
||||
|
||||
实现要求:
|
||||
1. 严格按照 SPEC.md 中的 Token 值(var(--tk-*)))设置样式
|
||||
2. 使用映射的组件库组件(参见 SPEC.md 组件清单)
|
||||
3. 实现所有交互行为(参见 SPEC.md 交互行为章节)
|
||||
4. 未匹配的 Token 需确认后补充到 .design/tokens.yml
|
||||
5. 遵循项目代码规范(CLAUDE.md)")
|
||||
```
|
||||
**实施规则:**
|
||||
|
||||
**关键要求传递给 huashu-design:**
|
||||
- 读取 SPEC.md 中的 Token 映射,用 `var(--tk-*)` CSS 变量
|
||||
- 使用组件库中已有组件(ContentCard, PrimaryButton, SectionTitle 等)
|
||||
- 实现交互行为(点击、滚动、表单提交等)
|
||||
- 输出到正确的页面目录(如 `apps/miniprogram/src/pages/xxx/`)
|
||||
- 遵循长者模式适配要求
|
||||
- 样式使用 `var(--tk-*)` CSS 变量,不硬编码数值
|
||||
- 使用组件库已有组件(ContentCard, PrimaryButton, SectionTitle 等),参见 `defaults/components.yml`
|
||||
- 交互行为按 SPEC.md 第 4 节实现
|
||||
- 遵循 CLAUDE.md 中的小程序代码规范
|
||||
- 长者模式:字号 ≥ 22px,间距按 elder 值
|
||||
- 未匹配的 Token 需与用户确认后再补充到 `.design/tokens.yml`
|
||||
- 新建组件时遵循 `feedback-component-consistency` 原则:不适配则新建,不外部覆盖
|
||||
|
||||
---
|
||||
|
||||
@@ -216,7 +211,7 @@ Variant: {patient | doctor}
|
||||
Token 匹配: {matched}/{total} ({unmatched} 未匹配)
|
||||
组件: {total} ({new} 需新建)
|
||||
交互: {数} 项
|
||||
下一步: 调用 huashu-design 实施代码
|
||||
下一步: 根据 SPEC 实施代码(Step 7)
|
||||
============================================================
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user