METAL LAB

abi/screenshot-to-code

★ 75,222+309 todayPython

Drop a screenshot in, get working code out, powered by AI

screenshot-to-code is an open-source project that turns website screenshots, mockups, Figma designs, or screen recordings into real, working code in HTML, React, Vue, and more. It lets you pick from multiple AI models like Gemini, GPT, and Claude, and adding Replicate unlocks image generation and background removal. You can self-host it with a Python FastAPI backend and React frontend, or just try the hosted web app.

What it does

  1. Takes a screenshot, mockup image, Figma design, or screen recording as input and outputs code in HTML+Tailwind, HTML+CSS, React+Tailwind, Vue+Tailwind, Bootstrap, or Ionic+Tailwind
  2. Works with just one API key from OpenAI, Anthropic, or Gemini; adding more keys lets the app mix stronger models for better accuracy. The Gemini key specifically enables pulling real logos/images straight from the screenshot and is required for video input mode
  3. Adding a Replicate key unlocks image generation, background removal, and image editing features
  4. Installing Chromium enables an optional 'screenshot preview' where the AI renders and visually checks its own generated page
  5. Runs via Poetry for the Python backend and pnpm for the frontend, or can be spun up entirely with a single Docker Compose command

Why it matters

It lets developers turn a design mockup or reference website into a working code skeleton without hand-coding the layout from scratch, cutting down early front-end development time. Being able to freely mix models from different AI providers also makes it practical to compare output quality for real projects.

Terms in this repo

  • Tailwind · A styling tool that lets you write CSS quickly using utility class names
  • FastAPI · A Python framework used to build web servers (backends)
  • Replicate · An external service you call via API to run AI models for tasks like image generation
  • Playwright/Chromium · A browser automation tool that runs and captures a webpage without a visible display
  • Poetry · A tool for installing and managing Python project dependencies

Repository description (English)

Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)

Open on GitHub

Trending repos

All repos →

Latest from METAL LAB