拿到一张已经合成好的 UI 设计图时，最麻烦的往往不是看懂界面，而是把它还原成可编辑的图层、可复用的图片素材和能继续开发的 HTML。image-to-slice 把这个问题拆成 AI 识别、人工校正、背景修复、图层复核和导出五个阶段，目标不是一次生成完美结果，而是把不可编辑的平面图变成可继续加工的工程素材。
项目解决什么问题
普通截图只能作为视觉参考，文字、图片、阴影、圆角和布局关系都被压平在同一张位图里。直接交给代码模型生成页面，可能得到外观相近但结构混乱的实现；只做自动切图，又容易把遮挡关系、背景和本应由 CSS 表达的元素混在一起。
该项目把原图中的内容划分为三类：
- 需要单独导出的图片切片；
- 可能被前景遮挡、需要补全的整图背景；
- 更适合由 HTML/CSS 或 Figma 原生属性表达的文字、颜色、圆角、阴影和基础布局。
这样既能保留复杂视觉素材，也尽量让后续设计稿保持可编辑，而不是把所有内容再次拼成一张大图。
完整处理流程
1. 输入原始平面设计图
先准备完整 UI 图。原帖的目标场景是由 Image2 等方式生成或已有的平面设计稿，但流程本身关注的是图像结构，不要求读者先拥有某种固定的设计源文件。
开始前应确认图片尺寸和目标画布比例，避免后续所有坐标都因缩放发生偏移。原帖未说明图片尺寸上限、色彩空间和支持格式范围，实际使用时需要以项目界面或仓库说明为准。
2. 用一次 AI 分析完成元素拆分
项目会把原图和提示发送给模型，让模型一次返回全部元素及其坐标，而不是为每个组件分别请求。输出的重点包括切片候选、背景候选和可由代码表达的图层。
这里的 AI 结果只是初始结构。坐标框如果多切到相邻区域，最终素材会带入脏边；如果框得太小，则会截断阴影、装饰或透明边缘。因此下一步的人工检查不可省略。
3. 手工修正边界框与类别
在界面中检查每个元素的矩形范围，按实际视觉边界调整位置和大小，并确认它究竟属于图片素材、背景还是代码图层。
判断时可以遵循一个简单原则：有独特纹理、插画或复杂光影的内容更适合保留为切片；文字、纯色块、圆角容器和常规阴影更适合保持为原生图层。复杂伪元素也要结合遮挡关系检查，不能仅凭模型给出的类别直接导出。
4. 必要时修复被遮挡的背景
如果背景被按钮、卡片或插图覆盖，直接裁切会把前景残留在背景素材中。项目允许对这类背景单独调用 Image2 做补全。原作者说明，首次结构分析只需要一次 AI 请求；额外的生成调用主要发生在需要修复的背景上，而且是按背景逐个处理。
背景没有遮挡时不要额外生成，以减少成本和不可控变化。修复后还要检查纹理连续性、边缘接缝与颜色漂移；这些质量判断不能完全交给模型。
5. 人工复核素材和图层
在导入 Figma 或生成 HTML 前，再检查一遍：切片是否透明干净、背景是否完整、文字有没有被误做成图片、层级顺序是否符合视觉遮挡。原作者在回复中明确承认，复杂图片仍需要人工介入；这意味着工具更适合作为半自动生产线，而不是无人值守的一键转换器。
6. 导入 Figma 与导出 HTML
Figma 侧采用常规 DOM 捕获方式导入，不依赖服务器端 Chromium。可编辑内容包括文字、图片、颜色、圆角、阴影和基础布局；这有助于设计人员继续调整，而不是只能查看静态截图。项目同时提供 HTML 下载，方便把拆分结果交给前端继续实现。
项目入口：https://github.com/50kg/image-to-slice。原帖没有完整列出本地部署步骤、运行依赖、构建命令或浏览器兼容范围，试用前应阅读仓库当前 README，并以仓库版本为准。
建议的验收方法
下面是根据该流程整理的验收清单，不是原帖声称的自动保证：
- 将导出结果与原图同尺寸叠加，重点检查边界、层级和透明区域。
- 在 Figma 中逐项选择文字和容器，确认它们仍可编辑。
- 调整一段文字或容器尺寸，观察布局是否因绝对坐标而破坏。
- 在目标浏览器打开 HTML，检查字体、阴影、圆角和复杂伪元素。
- 对背景修复区域放大查看，发现纹理跳变时回退到原素材或重新划定范围。
适用与不适用场景
它适合将视觉稿快速转成原型、从生成图中提取设计资产、为前端复刻准备分层素材，也适合需要同时交付 Figma 与 HTML 的小型团队。若项目要求像素级生产质量、完整响应式布局、严格无障碍语义或可长期维护的组件体系，导出结果只能作为起点，仍需要设计与前端人工重构。
最值得复用的经验是：先让 AI 提供结构化候选，再由人修正空间边界和语义类别，最后用可编辑性与视觉对比验收。这样能把模型擅长的识别和生成，与人更可靠的审美、层级和工程判断结合起来。
原作者：sanji1
原帖：https://linux.do/t/topic/2738295