夜雨聆风❝Image To Slice 是一个面向 UI 开发场景的 AI 切图工具，以 Figma Desktop 插件或独立网页形式运行，可将 AI 生成的平面 UI 效果图拆解为切图资产、代码层和完整背景，支持 AI 补齐被遮挡背景，并输出可编辑 Figma 图层、.fig 文件或 HTML/CSS。
也就是把 AI 生成的界面图“拆解分类”：哪些能用代码画、哪些只能当图片用，拆完还给你可编辑的设计稿和网页代码。
要点
差异化定位：区别于通用“AI 分层/拆图”（服务海报编辑）和“AI 抠图”（去背景留主体），这个项目定义为“AI 切图”，解决“这张 UI 应该怎样开发”——判断哪些元素用代码/Figma 原生节点还原，哪些保留为图片资产。 主流程：输入平面 UI 图 → AI 拆图 + 手工框选校准 → 确认遮挡区域并 AI 补齐完整背景 → 整理资产后选择输出路径。 背景补齐双版本：提供“AI补齐·原图”（整体连贯但可能改动未选区域）与“AI补齐·局部合成”（仅修补区域合成回原图），由用户人工二选一；支持在切图编辑器中使用画笔标记缺失区域、用橡皮擦修正蒙版，并点击 AI 补齐来修补任意独立切图的局部内容。 双输出模式： 切图导入：按原始坐标放入 Figma，此路径不请求 AI； AI 图层导入：大模型分析文字、布局和切图引用并生成 HTML/CSS 预览，之后转为可编辑 Figma 图层或下载 HTML。该导入存在工作区缓存行为，切图坐标/尺寸变化不会自动重新分析，需在预览窗口手动点击“重新 AI 识别”才会生成最新结构。 两种捕获方式：默认 DOM 捕获（无额外依赖、更多可编辑节点）；可选高保真捕获（Playwright/CDP，处理伪元素、滤镜、复杂渐变等，但复杂效果可能栅格化为图片层） 独立网页模式：无需 Figma 插件，通过 openfig-core 打包 .fig 文件后手工导入 Figma；转换中简单 SVG 保留为可编辑 Vector，复杂 SVG 自动转为图片节点以避免导出失败。 模型双配置：需 OpenAI 兼容 API，“图片理解”与“图片生成/修补”必须分开配置，后者二者共用同一配置；README 推荐生图/修补用 image2，图片理解用 gpt-5.6-sol。 本地服务架构：本地 Node.js API（默认 127.0.0.1:18787）承担模型请求、图片处理、DOM 捕获与 .fig 打包，API Key 明文存于本地配置文件。
环境要求：Figma Desktop、Node.js ≥ 20.19.0（仓库 .nvmrc 为 22.22.2）、npm、一个 OpenAI 兼容 API；高保真捕获功能需额外安装 Playwright Chromium。
项目由个人开发者 50kg 开发，采用 MIT License，当前 283 Stars。
❝项目地址：https://github.com/50kg/image-to-slice