50kg/image-to-slice

What it solves

Image To Slice solves the difficulty of converting flat AI-generated UI images (from models like Image2 or Nano Banana2) into editable design files or code. Traditional AI coding tools often struggle to distinguish between elements that should be native code/Figma nodes and those that should remain as static image assets, leading to poor reconstruction results. This tool bridges the gap between AI-generated UI visuals and actual software development by decomposing flat images into structured, layered assets.

How it works

The tool operates through a pipeline that combines AI image understanding, image editing, and DOM capture:

1. Decomposition: AI identifies potential image assets (slices) and background candidates. Users can manually refine these boundaries.
2. Background Inpainting: For elements that should be background assets but are covered by UI components (like buttons or text), the tool uses AI inpainting to fill in the obscured areas, creating a clean, full-size background image.
3. Classification: The AI suggests whether an element should be a static image (PNG/SVG) or a native code/Figma element (HTML/CSS).
4. Reconstruction: The tool generates an HTML/CSS preview of the UI. This preview can then be exported as a ZIP file for development or imported into Figma as editable layers using either standard DOM capture or a high-fidelity capture via Playwright/CDP for complex visual effects.

Who it’s for

• UI/UX Designers who want to turn AI-generated concepts into editable Figma files.
• Frontend Developers who need to convert UI screenshots or AI-generated mockups into structured HTML/CSS code.
• Product Designers working with AI-driven design workflows.

Highlights

• AI-Powered Slicing: Automatically distinguishes between native UI elements and static image assets.
• Intelligent Inpainting: Fills in obscured background areas to create usable, full-bleed assets.
• Figma Integration: Works as a Figma Desktop plugin or a standalone web app that exports .fig files.
• Flexible Output: Supports exporting to editable Figma layers, raw HTML/CSS, or standalone image asset packages.
• High-Fidelity Capture: Optional Playwright/CDP integration to handle complex CSS filters, blends, and pseudo-elements during Figma import.