50kg/image-to-slice

Image To Slice – 面向Figma和Web的AI辅助UI图像分解

它是什么 – 一个Figma桌面插件（带有独立Web UI），接收UI截图（通常由Image2或Nano Banana2等文生图模型生成），自动将其分解为结构化的图层集合。它判断哪些部分可以用原生Figma节点或HTML/CSS重建，哪些应保留为图像资产，然后将结果导出为可编辑的Figma文件、.fig包或可直接使用的HTML/CSS捆绑包。

为什么重要 – 当UI原型混合了矢量友好元素（按钮、文本、容器）与栅格资产（图标、插图、背景照片）时，纯图像到代码的方法会遇到困难。Image To Slice增加了一个AI驱动的“切片并分类”步骤，该步骤：

• 检测裁剪资产与背景及代码友好组件。
• 允许用户手动调整AI的建议。
• 可选地修补缺失的背景区域。
• 生成设计时（Figma）和开发时（HTML/CSS）工件。

主要功能

功能	你得到什么
AI驱动分解	一键“AI拆图”生成裁剪矩形、背景候选和代码层提示。
手动JSON模式	上传JSON描述 + 背景 + 资产以跳过所有AI调用 – 当后端不运行时很有用。
背景修补	将遮罩区域发送到图像编辑模型以重建完整背景。
资产分类	AI建议哪些部分成为PNG/SVG资产，哪些成为原生Figma节点或HTML元素。
HTML/CSS预览	生成重建页面的实时预览；可重新运行或缓存。
Figma导入	将预览（DOM）转换为可编辑的Figma图层，并可选择高保真Playwright捕获以处理复杂样式。
导出选项	• 下载.fig包（可在Figma中编辑） • 下载包含index.html、styles.css、script.js和资产的ZIP • 仅导出切片资产包。
工作区历史	在本地保存工作区草稿，允许克隆、恢复或重新开始。
可配置模型后端	支持任意OpenAI兼容API用于聊天（图像理解）和图像生成/编辑。
零API手动模式	当本地服务器不可达时完全离线工作。

如何开始

1. 先决条件 – Figma桌面版、Node 20+、OpenAI兼容API密钥，以及（可选）用于高保真导入的Playwright Chromium。
2. 安装

   git clone https://github.com/50kg/image-to-slice.git
   cd image-to-slice
   npm install               # 安装依赖
   # 可选，用于高保真捕获
   npx playwright install chromium
   

3. 运行本地API服务

   npm run api   # 启动 http://127.0.0.1:18787
   

   使用curl http://127.0.0.1:18787/health验证。
4. 在Figma中加载插件 – 插件 → 开发 → 从清单导入插件… → 选择manifest.json。
5. 打开插件（名为Image To Slice）。选择AI生图 / 本地图片加载UI截图，然后点击AI拆图开始分解。
6. 调整建议的切片，必要时运行背景修补，最后点击切图导入（到Figma）或AI图层导入 → 导入此设计稿到 Figma / 下载 HTML以获取开发工件。

典型工作流程

UI截图 → AI拆图（自动检测切片） → 手动调整 → 背景修补 →
 分类资产 → 导出到Figma（可编辑图层）或导出HTML/CSS捆绑包

配置 – 在插件的设置面板中，可以添加多个API条目，设置基础URL、模型ID、API密钥，并选择用途（图像理解与图像生成/编辑）。保存前测试连接。

限制

• AI建议需要人工审查；复杂字体、滤镜、伪元素或混合模式可能被栅格化。
• 一次仅处理一个主图像。
• 本地服务器将API密钥和工作区历史存储在磁盘上；它没有身份验证，因此公开暴露需要通过带认证的反向代理。
• .fig是Figma专有格式，通过openfig-core生成；未来Figma更改可能需要更新。

许可证 – MIT。

---

Image To Slice弥合了AI生成的UI原型与真实开发资产之间的差距，为设计师和开发者提供了一种实用方式，将单个截图转换为可编辑的设计文件和干净的代码。