Codify Dev – 设计转代码

核心原则

截图看布局，骨架定边界，JSON 取样式。三者协同，缺一不可。

还原质量 = 视觉还原 + 代码质量

两者缺一不可。视觉完美但代码硬编码，不算完成还原。

严格遵守代码生成规范 codegen-rules.md

理解三种数据源

协同使用：

• 截图 + 骨架 → 理解设计意图，规划组件拆分
• 骨架 + JSON → 精确实现，确保不遗漏节点
• 截图 + JSON → 验证还原效果

工作流程

Step 1. 建立视觉认知（如有截图）

用户上传截图时：

• 识别主要区域和层级关系
• 观察视觉模式（重复元素、对齐方式）
• 注意装饰细节（阴影、圆角、渐变）

无截图时跳过此步，直接进入 Step 2。

Step 2. 获取结构骨架

curl -s -X POST http://127.0.0.1:13580/get_design \
  -H "Content-Type: application/json" \
  -d '{"node_id": "节点ID", "mode": "skeleton"}'

骨架标记速查：

• [H]/[V] → flex æ°´å¹³/垂直布局
• ×N → 重复 N 次，只实现模板
• ID → 关键节点，可单独获取
• : → 简单子节点，合并显示
• ICON → 需要下载 SVG 的图标节点
• TEXT "..." → 文本节点及内容预览

Step 3. 复杂度判断 + 实现追踪（强制检查点）

获取骨架后，必须输出以下内容：

## 实现追踪

**复杂度**：简单 / 复杂（层级 X，区域 N 个）
**路径**：A（整体实现）/ B（分步实现）

| # | 区域 | 节点 ID | 子节点顺序（按骨架） | 状态 |
|---|------|---------|---------------------|------|
| 1 | 区域 A | 1 | 1-1 → 1-2 → 1-3 | [ ] |
| 2 | 区域 B | 2 | 2-1 → 2-2 | [ ] |

判定规则：

路径 B 约束：

• 禁止：判断为复杂后一次性生成所有代码
• 必须：阅读文档并执行 phased-workflow.md 逐个组件实现，每完成一个更新状态为 [✓]

完成条件：所有区域状态为 [✓] 才算实现完成。

Step 3.5 接口设计（强制）

生成代码前，先设计组件输入接口。

核心原则：区分「业务数据」和「UI 文案」

示例：商品卡片
- 商品名、价格、图片 → Props（业务数据）
- "立即购买"、"已售罄" → 硬编码（UI 文案）

重复结构：×N 设计为数组 Props

预览验证：在调用层传入 mock 数据（值来自设计稿）

输出接口定义后再生成代码。

Step 4. 路径 A：整体实现（仅限简单设计）

如果Step 3 判断为复杂，则跳过此步骤，阅读并按照phased-workflow.md执行复杂设计。

curl -s -X POST http://127.0.0.1:13580/get_design \
  -H "Content-Type: application/json" \
  -d '{"node_id": "节点ID"}'

获取 JSON 后，遵循 codegen-rules.md 生成代码。

Step 5. 下载资源

禁止跳过此步骤。禁止用 emoji/占位符/纯色代替图标和图片。

资源识别：

强制要求：

• 必须下载组件代码中使用到的图标和图片背景等资源
• 对于 RECTANGLE + object-fit: cover 的隐式图片，用节点 ID 下载 PNG

下载命令：

node skill/scripts/download-assets.cjs --nodes '[
  {"nodeId":"123:456","outputPath":"/path/to/icon.svg","format":"svg"},
  {"nodeId":"789:012","outputPath":"/path/to/bg.png","format":"png"}
]'

Step 6. 终态验证（强制）

禁止跳过。禁止在此步骤前宣布”实现完成”。

必须输出：

1. 追踪表最终状态（更新 Step 3 的表格）
2. 完成检查：

3. 未完成说明（如有 [ ]）：列出原因，询问是否继续

验证规则：

• 禁止：存在 [ ] 时输出”已完成”或”完成总结”
• 必须：明确告知未完成项，询问用户是否继续

参考文档

错误处理