img2ui
Turning interface images into editable structure for Figma and frontend workflows.
Project facts
img2ui helps frontend engineers and coding agents start from an interface image.
It analyses layout, components and visual relationships, turns them into editable structure, and reconnects the result to design workflows through a Figma plugin.
Working flow
Turn visual input into structure that design and engineering can continue to use.
- 01 Input
A UI screenshot or visual reference enters the analysis.
- 02 Structure
Colour, tokens, layout and components are extracted as a usable system.
- 03 Continue
JSON, HTML, documentation and editable Figma nodes return to the workflow.
Reading structure, not merely copying pixels
The input can be a website, app or other interface capture. The system identifies regions, hierarchy, typography and component relationships so the output remains editable and useful to frontend implementation or coding agents.
A Figma plugin returns the result to everyday tools
img2ui does not leave results inside a demo. Its Figma plugin brings the interpreted structure into an existing file so designers and engineers can review, adjust and continue production; the plugin is now listed.
The output is intended to be used, not just looked at.
img2ui turns a reference image into an editable Figma structure as well as formats for coding agents, so a visual observation can become the beginning of implementation.
The gallery is a visible record of what the product can interpret.
Public examples are kept separate from private workspaces. The product is being developed around practical use by frontend engineers and coding-agent workflows, not a claim of one-click production design.
Next case
丞石建築 →