Codify Dev - 设计转代码
核心原则
截图看布局，骨架定边界，JSON 取样式。三者协同，缺一不可。
| 数据源 | 告诉你什么 | 不告诉你什么 |
|---|---|---|
| 截图 | 视觉效果、颜色感知、间距比例、整体氛围 | 精确数值、层级结构、节点 ID |
| 骨架 | 组件边界、布局方向、重复模式、节点层级 | 具体样式、颜色、字体大小 |
| JSON | 精确 CSS 值、节点属性、资源 ID | 视觉上下文、设计意图 |
协同：截图 + 骨架 → 理解意图、规划拆分；骨架 + JSON → 精确实现；截图 + JSON → 验证还原。
工作流程
Step 1. 分析设计结构
获取骨架，理解结构和组件边界：
curl -s -X POST http://127.0.0.1:13580/get_design \
-H "Content-Type: application/json" \
-d '{"node_id": "节点ID", "mode": "skeleton"}'
如果具备图片读取能力，同时获取截图辅助理解设计意图和视觉主次：
node $SKILL_DIR/scripts/download-screenshot.cjs --output "$TMPDIR/design-screenshot.jpg"
根据骨架（+ 截图）规划组件拆分和实现顺序。骨架标记见 design-schema.md，拆分规则见 codegen-rules.md。骨架太大时，按子节点 ID 分步获取 JSON 并逐个实现。
Step 2. 获取 JSON 并生成代码
curl -s -X POST http://127.0.0.1:13580/get_design \
-H "Content-Type: application/json" \
-d '{"node_id": "节点ID"}'
生成代码前阅读 codegen-rules.md。
Step 3. 下载资源
所有图标和图片通过脚本下载，不使用占位符。 资源识别规则见 codegen-rules.md，下载命令见 api.md。
完成前回顾
生成代码后，内部检查：
- 骨架中的关键节点是否都已实现
- 业务数据是否通过 Props 传入（非硬编码）
- 重复结构是否使用数组循环
- 所有资源是否已下载，路径真实
- 资源引用方式是否与项目已有代码一致
参考文档
| 文档 | 何时读取 |
|---|---|
| codegen-rules.md | 生成代码前 |
| design-schema.md | 理解 JSON 结构时 |
| api.md | 调用 API 或下载资源时 |
错误处理
见 api.md 错误格式与错误码。