code-format

name	code-format
description	Convert Lanhu HTML/CSS output into project frontend code for Vue, React, or the detected stack, with component reuse and design token mapping.
model	sonnet

code-format

核心原则：优先复用，禁止猜测。禁止省略代码。

模式判断

调用方（design-to-code）会传入意图参数，根据意图选择模式：

意图参数	模式
新建	模式 A：生成新文件
改造:src/pages/xxx/index.vue	模式 B：修改现有文件

执行步骤

1. 读取上下文（动代码前必须全部读完）

按以下优先级查找每类文档，找到第一个即用：

用途	优先	兜底顺序
技术栈	README.md	→ CLAUDE.md → package.json
组件文档	docs/components.md	→ docs/ 下含 "Props"/"组件" 的 .md
编码规范	docs/dev-spec.md	→ docs/ 下含 "命名规范"/"开发规范" 的 .md → 扫描 src/ 推断
交互逻辑	docs/tech-spec.md	→ 无则全部标 TODO

调用方（design-to-code）会传入 CONTEXT_FILES，直接使用传入路径，不必自己查找。

文件缺失时的降级策略见 → fallback-guide.md

2. 分析蓝湖产物

读取 .claude/lanhu-output/<页面名称>/index.html，列出主要 UI 元素（不写代码）。

3. 组件映射

对每个 UI 元素查组件文档：

• 有完全匹配 → 直接用，传正确 props
• 有近似组件 → 用现有组件 + 自定义 class
• 确认没有 → 按 dev-spec 新建，标记为"新增组件"

常见映射失败案例见 → failure-patterns.md

4. 补全交互逻辑

从 docs/tech-spec.md 取：API 路径、状态处理、格式化规则。 找不到的用 // TODO: 待确认 标记，不自行发明。

---

模式 A：新建页面

按步骤 1-4 读取上下文后，生成完整新文件。

输出目录：src/pages/<页面名>/ 或 src/views/<页面名>/（以 dev-spec 为准）。

硬性约束：

• 写完整代码，不允许 // ... rest of component 等占位
• 颜色/间距/字号精确匹配蓝湖数据
• 图片用 assets/ 中的实际文件路径

---

模式 B：改造现有页面

按步骤 1-4 读取上下文后：

额外步骤 B1：读取现有文件

读取调用方传入的现有文件路径（如 src/pages/home/index.vue），完整理解现有代码。

额外步骤 B2：列出变更范围

对比设计稿与现有代码，明确列出（不写代码）：

变更项：
- [新增] 顶部渐变背景区域
- [修改] 余额显示区域：字号从 24px 改为 32px，颜色从 #333 改为 #fff
- [删除] 右上角设置入口
- [保留] 底部 TabBar（现有代码不动）
- [保留] 所有 API 调用逻辑（不动）

等用户确认变更范围后再写代码。

额外步骤 B3：定向修改

只修改变更项，保留：

• 现有业务逻辑（API 调用、事件处理、状态管理）
• 现有注释和 TODO
• 未变更的 UI 区域

每处修改标注原因，格式：// [design-to-code] 按设计稿更新：xxx

---

5. 输出摘要

✓ 生成/修改文件：[列表]
✓ 复用组件：[列表]
⚠ 新增组件：[列表]（需 review）
⚠ TODO 项：[列表]