# screenshot-to-code

> Turns screenshots, mockups and screen recordings into front-end code with AI models

- Repository: https://github.com/abi/screenshot-to-code
- Category: Coding agents & dev tools
- Stars: 80,644 · Forks: 9,850 · Language: Python · License: MIT
- Experience: Some experience
- Page: https://ir.adyog.com/repos/abi/screenshot-to-code/

Rebuilding a page from a design or screenshot is slow, repetitive work. This project hands the first pass to an AI model. You give it an image, and it returns code in the stack you pick.

It's a web app with a React and Vite front end and a FastAPI back end. The back end sends your image to a model from OpenAI, Anthropic or Gemini. With more than one key, it can compare several models per generation. Gemini also pulls real logos and images out of your screenshot. Replicate handles image generation, background removal and image editing. An optional preview step lets the agent render its own page in headless Chromium and check how it looks.

The README also points to a hosted version at screenshottocode.com if you'd rather skip setup. Running it yourself means paying for your own model API keys. The README says local Ollama models work but give poor results.

## What it does

- **Several output stacks**: Generates HTML with Tailwind, HTML with CSS, React with Tailwind, Vue with Tailwind, Bootstrap, or Ionic with Tailwind.
- **Screenshots, designs and recordings**: Accepts screenshots, mockups and Figma designs. It can also turn a screen recording of a website in action into a working prototype, which needs a Gemini key.
- **Multiple model providers**: Works with OpenAI, Anthropic and Gemini models. With more keys it picks a stronger mix of models and lets you compare results.
- **Asset extraction and image tools**: Gemini reuses the real logos and images from your screenshot. Replicate adds image generation, background removal and image editing.
- **Screenshot preview**: Once Chromium is installed, the agent can render its generated page and visually check its own work. If Chromium is missing, the app skips this step.

## What you could build

- Turn a screenshot of a landing page into an editable HTML and Tailwind starting point.
- Convert a Figma design or mockup into a React or Vue component draft.
- Record a website in use and generate a working prototype from the recording.
- Compare how different AI models reproduce the same design.
- Self-host the app behind your own API keys or an OpenAI-compatible proxy.

## Who it's for

Front-end developers and tinkerers who want a fast first draft of a UI; you should be comfortable running a Python and Node project and getting API keys.

## Get started

Add at least one model API key (OpenAI, Anthropic or Gemini) to backend/.env, then start the backend and the frontend and open http://localhost:5173. Gemini and Replicate keys are recommended for best results. Or run the Docker command from the repo root, or use the hosted app instead.

```
cd backend
poetry install
poetry run uvicorn main:app --reload --port 7001
```
```
cd frontend
pnpm install
pnpm dev
```
```
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build
```

Tags: screenshot-to-code, code-generation, frontend, tailwind, vision-models