Screenshot to Code converts screenshots, mockups, Figma designs, and screen recordings into clean, functional front-end code. Built by indie developer Abi Raja, it started as an open-source project and became one of the most-starred AI repos on GitHub, with a hosted version for people who don’t want to run it locally.
Key Features
- Multiple inputs — Screenshots, mockups, Figma frames, and screen recordings.
- Multiple stacks — HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, and Ionic + Tailwind.
- Frontier models — Generates with Gemini, GPT, and Claude models, and can compare multiple variants per generation.
- Real assets — Reuses logos and images extracted from the screenshot, with AI image generation for placeholders.
- Video to prototype — Record a site in action and get a working clickable prototype.
Use Cases
- Turning a design mockup into a starting codebase in minutes
- Cloning a landing page layout for a new project
- Prototyping UI ideas from sketches or competitor screenshots
- Speeding up front-end work for solo founders
Open Source vs Hosted
The full app (React/Vite frontend, FastAPI backend) is on GitHub at abi/screenshot-to-code and runs with your own API keys. The hosted product at screenshottocode.com needs no setup.