screenshot-to-code

What it is

screenshot-to-code is an open-source app by Abi Raja (GitHub abi). Upload a screenshot, mockup, Figma design or screen recording, and AI models write it up as frontend code in your pick of HTML plus Tailwind, React plus Tailwind, Vue plus Tailwind, Bootstrap and more. What sets it apart is that it can read a screen recording of a site and turn the interaction into a clickable prototype. If you'd rather skip setup, the author also runs a hosted version at screenshottocode.com.

Highlights:

It connects to OpenAI, Anthropic and Gemini models and can make several versions to compare
with Gemini set up, it pulls the original logos and images out of the screenshot
with Replicate, it can generate images, remove backgrounds and edit images
with Chromium installed, the agent opens its own page in a headless browser to check its work.

How to use:

First put your API keys in the backend folder, install with poetry install and start the backend.
Then run pnpm install and pnpm dev in the frontend folder.
Finally open http://localhost:5173 and upload a screenshot.

Who it's for:

Developers and designers who want to turn a design or reference page into frontend code fast.

Before you start:

Running locally needs Python, Poetry, Node.js and pnpm, or you can use Docker.
You need at least one OpenAI, Anthropic or Gemini API key, and the author strongly recommends adding Gemini and Replicate; video mode requires Gemini.
Your screenshots and recordings are sent to the model provider you choose.
Model APIs charge by usage; see the official site for hosted pricing and model versions.
MIT license.

Based on the project's public documentation. Not tested by AI Inspiration World.