50kg/image-to-slice

Image To Slice – AI‑assisted UI image decomposition for Figma and web

What it is – A Figma Desktop plugin (with a standalone web UI) that takes a UI screenshot—often produced by text‑to‑image models like Image2 or Nano Banana2—and automatically breaks it into a structured set of layers. It decides which parts can be recreated with native Figma nodes or HTML/CSS and which should stay as image assets, then exports the result as an editable Figma file, a .fig package, or a ready‑to‑use HTML/CSS bundle.

Why it matters – Pure image‑to‑code approaches struggle when a UI mock‑up mixes vector‑friendly elements (buttons, text, containers) with raster assets (icons, illustrations, background photos). Image To Slice adds an AI‑driven “slice‑and‑classify” step that:

• Detects cut‑out assets vs. background vs. code‑friendly components.
• Lets the user manually adjust the AI’s suggestions.
• Optionally inpaints missing background regions.
• Generates both design‑time (Figma) and development‑time (HTML/CSS) artefacts.

Key features

Feature	What you get
AI‑driven decomposition	One‑click “AI拆图” produces cut‑out rectangles, background candidates, and code‑layer hints.
Manual JSON mode	Upload a JSON description + background + assets to skip any AI calls – useful when the backend isn’t running.
Background inpainting	Masked regions are sent to an image‑edit model to reconstruct a full background.
Asset classification	AI suggests which pieces become PNG/SVG assets and which become native Figma nodes or HTML elements.
HTML/CSS preview	Generates a live preview of the reconstructed page; can be re‑run or cached.
Figma import	Converts the preview (DOM) into editable Figma layers, with an optional high‑fidelity Playwright capture for complex styles.
Export options	• Download a .fig package (editable in Figma) • Download a ZIP containing index.html, styles.css, script.js and assets • Export just the slice asset package.
Workspace history	Saves work‑area drafts locally, lets you clone, restore, or start fresh.
Configurable model back‑ends	Supports any OpenAI‑compatible API for chat (image understanding) and image generation/edits.
Zero‑API manual mode	Works entirely offline when the local server isn’t reachable.

How to get started

1. Prerequisites – Figma Desktop, Node 20+, an OpenAI‑compatible API key, and (optional) Playwright Chromium for high‑fidelity imports.
2. Install

   git clone https://github.com/50kg/image-to-slice.git
   cd image-to-slice
   npm install               # install deps
   # optional for high‑fidelity capture
   npx playwright install chromium
   

3. Run the local API service

   npm run api   # starts http://127.0.0.1:18787
   

   Verify with curl http://127.0.0.1:18787/health.
4. Load the plugin in Figma – Plugins → Development → Import plugin from manifest… → select manifest.json.
5. Open the plugin (named Image To Slice). Choose AI生图 / 本地图片 to load a UI screenshot, then click AI拆图 to start the decomposition.
6. Adjust the suggested slices, run background inpainting if needed, and finally click 切图导入 (to Figma) or AI图层导入 → 导入此设计稿到 Figma / 下载 HTML for development artefacts.

Typical workflow

UI screenshot → AI拆图 (auto‑detect slices) → manual tweak → background inpaint →
 classify assets → export to Figma (editable layers) OR export HTML/CSS bundle

Configuration – In the plugin’s 设置 panel you can add multiple API entries, set base URL, model ID, API key, and choose the purpose (image understanding vs. image generation/edits). Test the connection before saving.

Limitations

• AI suggestions need human review; complex fonts, filters, pseudo‑elements, or blend modes may be rasterised.
• Only one main image is processed at a time.
• The local server stores API keys and workspace history on disk; it has no authentication, so exposing it publicly requires a reverse‑proxy with auth.
• .fig is a proprietary Figma format generated via openfig-core; future Figma changes may require updates.

License – MIT.

---

Image To Slice bridges AI‑generated UI mock‑ups and real development assets, giving designers and developers a practical way to turn a single screenshot into editable design files and clean code.