还原设计图（Design to Code）

将设计稿（Figma/Sketch/图片）高保真还原为前端代码，保证布局、间距、字体、颜色与交互一致。

触发场景

• 用户说「还原设计图」「按设计稿实现」「切图」「设计转代码」
• 提供 Figma/Sketch 链接、设计图截图或标注
• 需要实现某个页面/组件的 UI

执行流程

1. 解析设计稿

• 标注：尺寸、间距（padding/margin/gap）、字号与行高、颜色（含透明度）、圆角、阴影、边框
• 层级：组件划分、嵌套关系、可复用模块
• 状态：默认 / hover / focus / disabled / 加载 / 空态 / 错误
• 响应式：断点、不同宽度下的布局变化（栅格、换行、隐藏）