本帖使用社区开源推广，符合推广要求。我申明并遵循社区要求的以下内容：

• 我的帖子已经打上 开源推广 标签： 是


• 我的开源项目完整开源，无未开源部分： 是


• 我的开源项目已链接认可 LINUX DO 社区： 是


• 我帖子内的项目介绍，AI生成、润色内容部分已截图发出： 是


• 以上选择我承诺是永久有效的，接受社区和佬友监督： 是

以下为项目介绍正文内容，AI生成、润色内容已使用截图方式发出

佬友们好！前后折腾小一个月总算搞定了。

image2 生成的ui确实很不错,直接大模型做代码还原，效果很差，尤其原图里大量混杂切图素材时，AI自动区分哪些元素可以用代码原生实现、哪些只能作为静态切图。

之前看到这位同学的分析 [【设计图完美转code/figma】焚诀来了！我把自己炼成了skill！]，开源了一套设计图转代码的 Skill 方案。实际上手体验后发现，整套效果高度依赖模型本身能力，基本属于抽卡式输出。没手动微调 bbox 框选区域，我另起思路做了一款高度可自定义的 Figma 插件（项目实现思路和原 Skill不一样，感兴趣的朋友可以对比研究）。下面演示就沿用老哥文中的同一张示例图。

简介

开源地址： GitHub - 50kg/image-to-slice: AI 拆图、被遮挡背景补齐、人工校准、导入可编辑 Figma 图层、导出 HTML/CSS · GitHub 求star

下面用一个完整案例说明工具的主流程

1. 原始平面图

下图是由 Image2 生成的原始平面 UI 图。按钮、文字、图标、商品、装饰和背景仍然压在同一张图片里。

2. AI 拆图、人工校准与遮挡区域确认

点击顶部 AI拆图 后，AI 会给出三类辅助判断：可直接裁出的切图资产、适合保留为完整图片的背景候选，以及更适合用代码或 Figma 原生节点表达的代码层

3. AI 补齐被遮挡的完整背景（可选）

4. 人工复审整理切图资产

4.1 AI 图层导入预览

4.2 导入可编辑 Figma 图层

确认预览后，点击 导入此设计稿到 Figma。默认使用普通 DOM 捕获，将当前 HTML 预览转换为 Figma 图层。这条路径适合常规文字、图片、纯色、圆角、阴影和基础布局，速度更快，不依赖服务端 Chromium。导入后的 Frame 可继续在 Figma 内查看、选择和编辑图层。

4.3 下载 HTML

在 AI 图层导入预览中点击 下载 HTML，即可下载

剩下的部署详细部署教程就不放在帖子了，可以去github看详细的README ME。

另外，求一份重庆主城Android、前端或ai coding全栈岗，8年经验可独立开发，求内推求介绍、离职状态可随时到岗，感谢朋友们了。