codify-design-to-code
SKILL.md
Codify Dev - 设计还原
核心原则
截图看布局,骨架定边界,JSON 取样式。三者协同,缺一不可。 严格遵守代码生产规范 codegen-rules.md
理解三种数据源
| 数据源 | 告诉你什么 | 不告诉你什么 |
|---|---|---|
| 截图 | 视觉效果、颜色感知、间距比例、整体氛围 | 精确数值、层级结构、节点 ID |
| 骨架 | 组件边界、布局方向、重复模式、节点层级 | 具体样式、颜色、字体大小 |
| JSON | 精确 CSS 值、节点属性、资源 ID | 视觉上下文、设计意图 |
截图看布局,骨架定边界,JSON 取样式。三者协同,缺一不可。 严格遵守代码生产规范 codegen-rules.md
| 数据源 | 告诉你什么 | 不告诉你什么 |
|---|---|---|
| 截图 | 视觉效果、颜色感知、间距比例、整体氛围 | 精确数值、层级结构、节点 ID |
| 骨架 | 组件边界、布局方向、重复模式、节点层级 | 具体样式、颜色、字体大小 |
| JSON | 精确 CSS 值、节点属性、资源 ID | 视觉上下文、设计意图 |