# I Built a Screenshot-to-React Generator in 3 Hours

> Source: <https://dev.to/norbert_madojemu_e4d44040/i-built-a-screenshot-to-react-generator-in-3-hours-2ci2>
> Published: 2026-05-26 23:58:35+00:00

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**

**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: wrap 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: strip all imports and replace *export default* before injecting:

``` js
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, hardcode *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.

**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](https://github.com/norbertose09/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.