{"slug": "i-built-a-screenshot-to-react-generator-in-3-hours", "title": "I Built a Screenshot-to-React Generator in 3 Hours", "summary": "A developer built a tool that converts UI screenshots into live, rendered React and Tailwind CSS components in under three hours. The system uses a Go backend to compress and send images to Claude Vision, streaming the generated code via SSE into a Next.js frontend that renders components instantly in an iframe with no build step. The project cost under $5 in API fees and replaces 30–60 minutes of manual JSX translation per screen, with source code available on GitHub.", "body_md": "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.\n\nDrop a screenshot. Get a live, rendered React + Tailwind component. Streaming. In your browser. No build step.\n\nHere's how it works and what broke along the way.\n\n**The Stack**\n\n**How It Works**\n\n`Screenshot → Go (compress + resize) → Claude Vision (streaming) → SSE → Next.js → iframe preview`\n\nThe 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:\n\n```\ndata: {\"delta\":\"import\"}\ndata: {\"delta\":\" React from 'react';\"}\n```\n\nThe 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.\n\n**The Bugs That Hurt**\n\n**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.\n\n**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:\n\n``` js\nconst clean = code\n  .replace(/^import\\s+[\\s\\S]*?from\\s+['\"][^'\"]*['\"];?\\s*$/gm, \"\")\n  .replace(/^export\\s+default\\s+/m, \"const __Component__ = \")\n  .trim();\n```\n\nImage 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.\n\n**The Prompt That Works**\n\nYou are an expert React and Tailwind CSS developer.\n\nGenerate a complete, production-ready React functional component\n\nthat faithfully reproduces the screenshot's layout, spacing,\n\ncolors, and typography.\n\n**What It Actually Produces**\n\nTested 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.\n\nWhat it doesn't nail: exact hex colors (approximates to nearest Tailwind value), complex animations, data-driven elements.\n\n**Cost**\n\nUnder $5 total — including every debug run and demo conversion during the build.\n\nEach 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.\n\n**The Point**\n\nThis 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.\n\nThree hours to build. $5 to run. Every hour saved after that compounds.\n\n**Code**\n\nFull source on GitHub: [github.com/norbertose/screenshot-figma-to-react](https://github.com/norbertose09/Screenshot-figma-to-react)\n\nStack: Next.js · Go · Claude API. Clone it, swap in your ANTHROPIC_API_KEY, and run.\n\nThe $5 subscription is still active.", "url": "https://wpnews.pro/news/i-built-a-screenshot-to-react-generator-in-3-hours", "canonical_source": "https://dev.to/norbert_madojemu_e4d44040/i-built-a-screenshot-to-react-generator-in-3-hours-2ci2", "published_at": "2026-05-26 23:58:35+00:00", "updated_at": "2026-05-27 00:03:08.728710+00:00", "lang": "en", "topics": ["generative-ai", "ai-tools", "ai-products", "large-language-models", "computer-vision"], "entities": ["Claude", "React", "Tailwind", "Next.js", "Go", "Babel", "SSE", "CDN"], "alternates": {"html": "https://wpnews.pro/news/i-built-a-screenshot-to-react-generator-in-3-hours", "markdown": "https://wpnews.pro/news/i-built-a-screenshot-to-react-generator-in-3-hours.md", "text": "https://wpnews.pro/news/i-built-a-screenshot-to-react-generator-in-3-hours.txt", "jsonld": "https://wpnews.pro/news/i-built-a-screenshot-to-react-generator-in-3-hours.jsonld"}}