Yueban Image to Code

Yueban Image To Code

目标

把用户提供或当前选中的 UI 图片还原为代码，并导出必要的独立切图资源。

原图就是视觉合同。不要把它重新设计成“更合理”的界面，不要做排版优化，不要主观调整间距。必须先按 750px 宽度等比归一化，再按原图元素的位置、比例、层级、颜色、透明度和样式进行还原。

最高优先级规则

当用户要求“严格等比例缩放至画板宽度精确 750px”时，这条规则高于所有常规前端、设计和响应式建议。

• 整体画板宽度必须精确为 750px。
• 画板高度必须根据原图宽高比自动计算，不能人为设定或优化。
• 所有元素必须使用同一个全局缩放比例。
• 保持所有元素的相对位置、相对大小、层级关系、堆叠顺序、颜色、透明度、阴影、渐变、圆角、描边和样式属性。
• 禁止自动调整任何元素的位置、大小、对齐、间距、排版或视觉层级。
• 禁止重新设计、优化布局、合并独立元素、拉伸素材、改变颜色或简化效果。
• 禁止把图标或位图强行转换为矢量路径。
• 禁止使用相似图标库、相似插画、AI 生成图、CSS 临摹图或占位素材替代原图中的图标/位图。
• 禁止自动创建 Figma/export 的 Slice 对象。只有在需要切图资源时，才按元素边界导出独立 PNG 文件。
• 如果代码优雅性和视觉还原发生冲突，视觉还原优先。

跨目录调用一致性

无论用户在哪个项目文件夹调用本 skill，都必须只以本次用户提供/选中的原图为视觉源。不要沿用其他会话、其他文件夹、旧示例或历史任务里的结构、素材、配色、页面区域和实现假设。