abi /
screenshot-to-code
Turns screenshots, mockups and screen recordings into front-end code with AI models
- 80.6k stars
- 725 stars since 3 Oct
- Python
- Updated 13 days ago
- Some experience
- Coding agents & dev tools
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.
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 7001cd frontend
pnpm install
pnpm devecho "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --buildCommands are copied from the project's README. Read it on GitHub for the full setup.
More in Coding agents & dev tools
rea
MCP server that lets AI agents reverse engineer apps, binaries and websites locally
opencode
Open source AI coding agent for your terminal, with a beta desktop app
claude-code
Terminal coding assistant that reads your codebase and takes plain-English commands
codex
A coding agent from OpenAI that runs in your terminal on your own machine
pi
A minimal terminal coding agent you extend with skills, extensions and packages
orca
Desktop and mobile app for running many coding agents side by side
Understand-Anything
Turns a codebase or wiki into an interactive graph you can search and ask questions about
warp
Rust terminal that adds a built-in coding agent and runs other CLI agents
free-claude-code
Local proxy that lets Claude Code, Codex, Aider and others run on free or cheap models
CLI-Anything
Generates command-line wrappers so AI agents can drive desktop and web software