简介Image To Slice 是一个运行在 Figma Desktop 中的 AI UI 图片拆解与还原工具。GPT Image2、Nano Banana2 等生图工具生成的 UI 设计图通常只有一张平面图片按钮、图标、卡片、文字和背景都被压在同一张图里。Image To Slice 可以把这张平面图转换成带真实切图资产的 Figma 画板并在需要时用 AI 补齐被界面元素遮挡的背景还可以继续生成 HTML/CSS 或可编辑的 Figma 图层。适合解决什么问题在Vibe Coding 中Image2等模型生成的 UI 图确实很好看直接交给 Codex 或其他代码模型还原时效果很差本项目拆解为“元素”后可通过figma mcp或html可以让ai更好的理解页面布局结构更好的ai coding你已经有一张 AI 生成的 UI 截图希望把其中的图片、图标和装饰元素拆出来继续设计。你希望保留原图的像素坐标、尺寸、圆角和视觉资产而不是只得到一张不可编辑的图片。你需要移除覆盖在主视觉上的按钮、文字或卡片并让 AI 根据周围内容补出完整背景。你想把截图进一步转换成带语义 HTML/CSS 的页面或转换成可以在 Figma 中继续调整的图层。从平面 UI 图到可用资源下面用一个完整案例说明工具的主流程从 Image2、Nano Banana2 或本地得到的一张平面 UI 图开始识别切图与背景、补齐遮挡区域再决定导入 Figma 或导出 HTML/CSS。平面 UI 图 ↓ AI 拆图 / 手工框选 ↓ 自动框选切图资产 推荐背景补齐 ↓ 确认遮挡区域并 AI 补齐 手动修复 ↓ 切图导入 Figma / 下载HTML1. 输入平面 UI 图可以点击AI生图或图生图生成 UI 图也可以点击本地图片载入已有的 PNG、JPEG 或 WebP 截图。文生图、图生图和图片理解的尺寸通常需要在256–4096px范围内。下图是由 Image2 或 Nano Banana2 生成的原始平面 UI 图。按钮、文字、图标、商品、装饰和背景仍然压在同一张图片里。2. AI 拆图、人工校准与遮挡区域确认点击顶部AI拆图后AI 会给出三类辅助判断可直接裁出的切图资产、适合保留为完整图片的背景候选以及更适合用代码或 Figma 原生节点表达的代码层。识别结果不是最终答案仍可以通过手工框选、移动、缩放、调整圆角、隐藏、删除和替换继续校准。上图中蓝框表示完整背景候选的范围红色虚线框表示覆盖在该背景上的界面元素需要作为修补区域移除并根据背景上下文补齐对应元素。红框不是最终导出的独立切图而是提供给 AI 补齐的移除蒙版。通常按钮、导航、表单控件和界面文字适合移除艺术字、插画、场景、商品和融入画面的品牌内容通常应保留。用户可以逐项确认、调整或取消这些覆盖层。3. AI 补齐被遮挡的完整背景确认红框区域后点击生成完整背景。当一个元素本质上应作为背景或独立图片资产使用却被按钮、文字或卡片遮挡时AI 会根据原图上下文补齐该区域。后续开发时这张完整图片可以作为背景再把按钮、金刚位、卡片等前景元素叠放其上结构才更合理。补齐完成后切图资产列表会同时保留两个完整图版本且不会覆盖原始资产AI补齐·原图模型直接返回的完整修补结果整体视觉通常更连贯但可能会调整未选择的区域。AI补齐·局部合成只将修补区域合成回原图未选区域保持原始像素更适合严格保留原图其它内容。两个版本并列保留是为了让用户人工比较后自行二选一而不是由插件自动判定。可以删除不需要的版本留下一个作为后续背景或切图资产。除完整背景外也可以在切图编辑器中使用画笔标记缺失区域、用橡皮擦修正蒙版并点击AI补齐修补任意独立切图的局部内容。4. 整理切图资产、代码层并选择输出AI 会建议把商品、插画、复杂装饰、纹理、艺术字和具有明显绘画细节的内容保留为 PNG、透明 PNG 或 SVG 切图文字、按钮、卡片容器、导航、基础布局、纯色与规则图形通常更适合由 HTML/CSS 或 Figma 原生节点表达。这只是辅助分类建议用户可以继续在资产列表和画布中调整、隐藏、删除或替换。完成校准后可按需求选择输出路径切图导入将完整背景和切图资产按原始坐标放入新的 Figma Frame适合保留截图视觉效果并继续管理独立资源。不请求AIAI 图层导入根据完整截图、文字、布局和已确认切图生成 HTML/CSS 预览首次会请求模型后续优先复用成功缓存点击重新 AI 识别才会刷新结构。确认预览后可选择导入可编辑 Figma 图层或下载html继续开发。4.1 AI 图层导入预览点击AI 图层导入后模型会分析文字、布局、组件嵌套和切图引用生成可检查的 HTML/CSS 预览。切图图片数据不会重复作为参考图发送而是根据可信资产 ID 在 HTML 中注入。预览右侧的Elements树可用于检查生成元素、布局尺寸和关联的切图资产选中元素后可删除当前生成预览中的该元素再重新校准。在这里插入图片描述4.2 导入可编辑 Figma 图层确认预览后点击导入此设计稿到 Figma。默认使用普通 DOM 捕获将当前 HTML 预览转换为 Figma 图层。这条路径适合常规文字、图片、纯色、圆角、阴影和基础布局速度更快不依赖服务端 Chromium。导入后的 Frame 可继续在 Figma 内查看、选择和编辑图层。在这里插入图片描述如果预览包含伪元素、滤镜、裁剪、复杂背景、混合效果或部分复杂渐变可在导入设置勾选可选的高保真捕获Playwright/CDP后再导入。它通过本地 API 服务启动 Playwright Chromium使用 CDP 读取绘制信息难以编辑还原的视觉层会补为透明 PNG同时保留能可靠转换的文字与基础结构。因此视觉结果通常更接近浏览器预览但不能保证全部内容保持可编辑且首次需要执行npx playwright install chromium。对比项默认 DOM 捕获可选高保真捕获更适合常规文字、图片、纯色、圆角、阴影和基础布局伪元素、滤镜、裁剪、复杂背景、混合效果和部分复杂渐变依赖无额外浏览器依赖需要 Playwright Chromium取舍更多基础节点可直接编辑更接近浏览器视觉复杂效果可能转为图片层4.3 下载 HTML在 AI 图层导入预览中点击下载 HTML即可下载包含index.html、styles.css、script.js和assets/的 ZIP。解压后直接在浏览器打开index.html可继续在浏览器开发者工具中检查生成的 DOM、样式与图片资源。如果只需要把已有的 Figma 画板转为 HTML而不需要 AI 图层导入选中任意一个完整 Figma Frame 后点击顶部导出 HTML插件会直接导出固定尺寸 HTML ZIP。这条独立路径不要求该 Frame 由本插件生成。按使用顺序查找按钮下面的名称以当前插件界面为准。部分按钮只有在载入图片、选中资产或打开对应弹窗后才会启用。生成区控件作用文生图使用描述词生成图片不附带参考图。图生图使用描述词和一张或多张参考图生成图片。输入描述词输入生图或图生图提示词最多1000个字符。粘贴图片或点击上传在图生图模式中添加 PNG、JPEG、WebP 参考图支持多张。1:1、16:9、4:3、3:4、9:16选择常用输出比例和对应建议尺寸。供应商可能只支持部分尺寸。自定义手动输入宽度和高度范围为256–4096px。AI生图提交当前描述词、比例和参考图生成一张图片。本地图片从本地选择 PNG、JPEG 或 WebP跳过生图直接进入切图流程。AI 拆图窗口控件作用AI拆图请求图片理解模型识别普通切图和完整背景。重新 AI 识别丢弃当前识别结果并重新请求图片理解模型。缩小 / 放大 / 100% / 适应调整拆图确认画布的查看比例。取消关闭背景确认窗口不生成完整背景。普通切图识别结果仍按当前流程处理。生成完整背景按已确认的蓝色背景范围和红色移除区域请求图片编辑模型。切图资产区控件作用导出切图包将当前可导出的切图、原始坐标和资产信息打包下载。全部透明对当前资产批量执行普通透明处理或进入对应的透明处理流程。全部隐藏 / 全部显示批量隐藏或显示画布中的切图框选区域。多个框选区域重叠时可先隐藏无关区域避免遮挡方便继续人工框选和调整坐标。预览补齐根据每个切图框周围的上下左右边缘颜色自动生成本地渐变补齐预览。适合检查框选后露出的背景是否自然效果不理想时可继续调整切图位置、尺寸或重新框选。切图设置打开当前资产的坐标、尺寸、名称、圆角和相关属性面板。复制 / 粘贴复制选中的切图资产并在当前画布粘贴副本。快捷键为Ctrl/Cmd C、Ctrl/Cmd V。删除删除一个或多个选中的切图AI 处理中不能删除对应资产。资产支持Ctrl/Cmd连续多选、拖拽排序和显示/隐藏。排序只影响列表顺序不改变资产的原图坐标。切图编辑器控件作用画笔在蒙版上增加需要 AI 补齐的区域。橡皮擦从蒙版上移除误选区域。粗细调整画笔或橡皮擦大小。AI补齐将蒙版、当前切图和原图上下文发送给图片修补模型。取消 AI 补齐取消正在进行的补齐请求。保存到切图将预览确认后的图片结果写回当前切图资产。不保存放弃本次图片修改并关闭编辑器。保存修改保存未保存的图片修改后关闭编辑器。AI 图层导入预览控件作用重新 AI 识别忽略当前缓存重新让图片理解模型生成 HTML/CSS。下载 HTML下载包含index.html、styles.css、script.js和assets/的 ZIP。导入此设计稿到 Figma捕获当前预览 DOM并转换为 Figma 可编辑节点。高保真捕获Playwright/CDP如果预览包含伪元素、滤镜、裁剪、复杂背景、混合效果或部分复杂渐变可在导入设置勾选可选的高保真捕获Playwright/CDP后再导入。它通过本地 API 服务启动 Playwright Chromium使用 CDP 读取绘制信息难以编辑还原的视觉层会补为透明 PNG同时保留能可靠转换的文字与基础结构。因此视觉结果通常更接近浏览器预览但不能保证全部内容保持可编辑且首次需要执行npx playwright install chromium删除删除检查器中选中的生成元素并重新校准相关切图。预览右侧的Elements树是只读结构检查器。点击元素可以查看布局、尺寸和对应切图资产删除操作只作用于当前生成预览。顶部工具栏与输出按钮控件作用使用条件或结果AI拆图请求图片理解模型识别普通切图和完整背景。需要图片理解模型和当前图片请求结束后显示识别结果。切图导入创建新的 Figma Frame导入当前背景和选中的切图资产。需要已载入图片并完成必要的切图资产按原始坐标放置。AI 图层导入让图片理解模型分析文字、布局和切图资产生成可编辑 HTML/CSS 预览。需要图片理解模型首次请求会生成预览后续可复用缓存。导出 HTML将 Figma 中选中的完整 Frame 导出为 HTML ZIP。只对单个完整 Frame 生效不经过 AI 图层导入流程。收起窗口收起插件窗口或恢复完整窗口。不会清除当前工作。设置模型控件作用设置打开模型 API 和当前任务路由设置。 新建 API新建一个模型连接配置。当前使用分别选择图片理解、图片生成/修补所使用的配置切换后立即保存并生效。获取模型调用配置的 Base URL 获取可选模型列表。供应商不支持时可以手动填写模型名。显示 / 隐藏在当前编辑窗口显示或隐藏 API Key。测试按配置声明的用途发送测试请求检查接口、模型和 API Key 是否可用。保存并生效保存 Base URL、模型、超时时间、API Key 和用途并立即用于后续请求。删除删除当前模型配置已经开始的请求使用自己的配置快照不会被中途修改。关闭关闭设置窗口。模型配置字段备注仅用于识别配置例如“官方 OpenAI”或“中转站”。Base URL必须以http://或https://开头。模型供应商实际提供的模型 ID。超时时间30–1800秒默认500秒。API Key保存在本地配置文件不会在普通配置列表中返回完整值。用于选择“图片理解”或“图片生成 / 修补”。图片生成和图片修补必须使用同一配置。工作区与切图记录控件作用开始新工作保存当前工作区后创建新的空工作。切图记录打开历史工作列表恢复或删除以前的工作。创建副本从当前记录复制一份独立工作适合尝试不同切图方案。修改备注为记录添加最多 80 个字符的本地备注。恢复上次工作启动时恢复上次图片、切图资产和 AI 图层预览缓存。开始新工作恢复弹窗放弃恢复提示直接开始新工作。不再提醒保存恢复偏好后续启动不再弹出恢复选择。技术架构Figma Desktop ├─ Plugin UIsrc/ui │ ├─ 图片生成、切图画布、预览和状态管理 │ ├─ 本地 API 客户端 │ └─ HTML/CSS 导出与预览检查器 ├─ Plugin Mainsrc/plugin │ ├─ Figma Plugin API │ ├─ 节点创建、资产导入和 Frame 序列化 │ └─ UI 与 Figma 文档之间的消息通信 └─ 本地 Node.js APIserver.js src/server ├─ 模型配置与 OpenAI 兼容请求 ├─ 图片生成、编辑、透明、SVG 和背景还原 ├─ AI 进度、工作区草稿和缩略图 └─ Playwright DOM 捕获 OpenAI 兼容服务 ├─ POST /v1/chat/completions 图片理解、HTML/CSS 结构分析 ├─ POST /v1/images/generations 图片生成 └─ POST /v1/images/edits AI 补齐、背景修补和图片编辑源码目录目录职责src/ui/插件界面、状态、预览、切图和浏览器侧业务逻辑。src/plugin/Figma API、节点创建、导入位置和 Frame 序列化。src/core/图片尺寸、切图识别和背景拆解等跨端核心逻辑。src/server/HTTP 路由、模型配置、图片服务、HTML 清洗和本地存储。src/vendor/本地内置的 DOM 捕获和 SVG 处理脚本。server.js本地 API 服务入口。scripts/build-ui-html.js将 UI 模板、样式和脚本内联到dist/ui.html。dist/Figma 运行所需的构建产物不应手工编辑。项目地址https://github.com/50kg/image-to-slice