I got tired of translating Figma screens and UI screenshots into JSX before I could touch any real frontend work β routing, state, architecture, the stuff that actually matters. So I built a tool to do it for me.
Drop a screenshot. Get a live, rendered React + Tailwind component. Streaming. In your browser. No build step.
Here's how it works and what broke along the way.
The Stack
- Next.js 14 β frontend, split-panel UI
- Go β backend, image compression, SSE streaming
- Claude API (claude-sonnet-4-5) β vision + code generation
- Babel Standalone + Tailwind CDN β zero-build iframe preview
- localStorage β conversion history
How It Works
Screenshot β Go (compress + resize) β Claude Vision (streaming) β SSE β Next.js β iframe preview
The Go backend compresses the image to under 5MB, base64 encodes it, and opens a streaming connection to Claude's API. Each text delta gets forwarded to the browser as a JSON SSE event:
data: {"delta":"import"}
data: {"delta":" React from 'react';"}
The frontend accumulates the stream into a code string. Once generation finishes, the code gets injected into an iframe using document.write() β React, Babel, and Tailwind loaded via CDN. The component renders instantly with no build step.
The Bugs That Hurt
Chunk concatenation. Claude streams tokens. import and React arrive as separate events. Early on I was joining them naively and getting importReact from 'react' β which Babel rejects. Fix: wrapped each delta in a JSON object on the Go side, read obj.delta on the frontend. JSON preserves whitespace exactly.
Import statements in the iframe. The iframe loads React via CDN. If the generated code also has import React from 'react', Babel throws. Fix: stripped all imports and replaced export default before injecting:
const clean = code
.replace(/^import\s+[\s\S]*?from\s+['"][^'"]*['"];?\s*$/gm, "")
.replace(/^export\s+default\s+/m, "const __Component__ = ")
.trim();
Image media type mismatch. Screenshots saved as .png sometimes contain JPEG bytes. Claude rejects the mismatch. Fix: since the Go compressor always outputs JPEG, I hardcoded image/jpeg as the declared media type regardless of the input format.
The Prompt That Works
You are an expert React and Tailwind CSS developer.
Generate a complete, production-ready React functional component
that faithfully reproduces the screenshot's layout, spacing,
colors, and typography.
- Tailwind utility classes only β no inline styles
- Realistic placeholder text, not Lorem Ipsum
- Mobile-first responsive classes
- Hover and focus states on interactive elements
- Return ONLY the component code, no markdown fences
- Self-contained, no required props "No markdown fences" is critical β without it Claude wraps output in triple backticks and Babel chokes on them.
What It Actually Produces
Tested on a Personal Details mobile screen, a dark SaaS landing page, and an analytic dashboard. All three came back with correct layout structure, color palette, component hierarchy, and interactive states. Light tweaking needed, but production-usable as a starting point.
What it doesn't nail: exact hex colors (approximates to nearest Tailwind value), complex animations, data-driven elements.
Cost
Under $5 total β including every debug run and demo conversion during the build.
Each conversion is ~500β800 prompt tokens + image tokens + ~2000 generation tokens. A few cents per screenshot. The tool replaces 30β60 minutes of manual JSX work per screen.
The Point
This doesn't replace frontend engineering. It removes the part that doesn't need one β translating static visuals into boilerplate markup. Get the structure from the screenshot, then spend your time on architecture, state, performance, and the interactions that actually require expertise.
Three hours to build. $5 to run. Every hour saved after that compounds.
Code
Full source on GitHub: github.com/norbertose/screenshot-figma-to-react
Stack: Next.js Β· Go Β· Claude API. Clone it, swap in your ANTHROPIC_API_KEY, and run.
The $5 subscription is still active.
