codify-design-to-code
Installation
SKILL.md
Codify Dev - 设计转代码
核心原则
截图看布局，骨架定边界，JSON 取样式。三者协同，缺一不可。
结构先行，样式后填。 你看不到渲染结果，所有布局正确性只能靠推理。先用截图和骨架确定正确的 DOM 结构，再用 JSON 填充精确样式值。结构错了，样式再精确也白费。
| 数据源 | 告诉你什么 | 不告诉你什么 |
|---|---|---|
| 截图 | 视觉效果、颜色感知、间距比例、整体氛围 | 精确数值、层级结构、节点 ID |
| 骨架 | 组件边界、布局方向、重复模式、节点层级 | 具体样式、颜色、字体大小 |
| JSON | 精确 CSS 值、节点属性、资源 ID | 视觉上下文、设计意图 |
协同：截图 + 骨架 → 理解意图、确定 DOM 结构；骨架 + JSON → 精确实现；截图 + JSON → 验证还原。