UI 截图转前端代码

要解决什么问题

设计稿或截图常以 PNG/JPG 形式存在，但前端实现仍要人工确认区域、组件、配色和间距。直接让模型“看图写代码”容易出现幻觉：文案被编造，颜色用默认值，尺寸随意填数，组件库映射也不稳定。这个技能把 UI 视觉稿转成可审查的结构化中间层，减少从像素到代码之间的猜测。

技能如何工作

技能按 6 个阶段推进：

• 图像读取与多轮分析：先判断模型是否支持多模态；不支持时走 VISION_API_KEY 或让用户补充文字，禁止裸生成。
• 布局拆解：识别 Header、Sidebar、Main Content、Modal 等区域，判断 horizontal、vertical、grid。
• 组件树与 Token：输出组件父子关系，并提取颜色、字体、间距、圆角、阴影等 CSS 兼容 Token。
• 组件库匹配：把按钮、表格、表单、弹窗、分页等映射到目标库 API，减少手写模板。
• DSL 与代码：生成 YAML/JSON DSL，再按 React、Vue、Angular 等目标栈生成 JSX、模板或主题配置。

适用边界

它适合 UI 还原、设计稿转码和前端结构重建，但不替代设计标注。看不清的文本、颜色、尺寸必须标记为待确认，而不是编造。最终产物应附置信度说明，方便人工复核。