Figma in.
Verified React out.
Parallel agents write the components, a visual judge scores them against your pixels, and a live preview deploys.
landing-page.fig
visual judge
fidelity 0.93
tracking the sweep
Figma
React
Next.js
TypeScript
Tailwind CSS
LangGraph
FastAPI
Redis
Cloudflare R2
GitHubFigmaReactNext.jsTypeScriptTailwind CSSLangGraphFastAPIRedisCloudflare R2GitHubA pipeline, not a prompt
Screenshot-into-a-chat-window is a demo. This is a supervised multi-agent pipeline that checks its own work before you see it.
Extract
The Figma worker pulls your file, splits the page into logical sections, and screenshots each one for visual context.
Generate
One agent per section writes typed React with Tailwind, working from the design data and the screenshot at once.
Verify
A supervisor gates broken output. A visual judge renders each section and scores it against your pixels, sending deviations back.
Ship
The app compiles, deploys to an isolated sandbox with a shareable URL, and pushes to your GitHub when you say so.
landing-page.fig
4 sections, each with its own screenshot
Extract
The Figma worker pulls your file, splits the page into logical sections, and screenshots each one for visual context.
Generate
One agent per section writes typed React with Tailwind, working from the design data and the screenshot at once.
Verify
A supervisor gates broken output. A visual judge renders each section and scores it against your pixels, sending deviations back.
Ship
The app compiles, deploys to an isolated sandbox with a shareable URL, and pushes to your GitHub when you say so.
Every run ends in receipts
A scored report for every section, typed components, a live sandbox, and a commit you can review before anyone else sees it.
overall fidelity
0.87run completein 3m 58s, run 0142
Simple when it launches, free until then
Everything is free while the product is in development. These are the tiers that arrive with the public release, so there are no surprises later.
Prefer to run it yourself? The whole pipeline is open source. Self-host with your own API keys, no tier needed.
Questions, answered
Do I need my own Figma token?
Yes. You connect a personal access token once, and the pipeline uses it read-only to fetch the files you convert. It is stored encrypted and never shared.
What does the generated code look like?
A Next.js app in TypeScript with Tailwind classes, one component per detected section. It is meant to be code you keep working in, not a throwaway export.
What exactly does the judge check?
Every section has to compile, pass a pixel comparison against the design, and satisfy a vision judge that scores fidelity. The best-scoring iteration is the one you get.
Where does the preview run?
In an isolated sandbox with a shareable HTTPS URL. It boots the real generated app, so what you see is what gets pushed.
Can I push to an existing repository?
Yes. Pick an existing repo or create a new one from the results screen. New repositories are created private by default.
What happens when a section comes out wrong?
The supervisor sends it back. Broken structure and empty output are regenerated, and visual deviations go through additional judge passes instead of shipping as-is.
Ship the design, not a rebuild of it
Free while in development. You bring your own Figma token.