Repolode
Submit
abi

abi/screenshot-to-code

Converts screenshots, mockups, Figma designs and screen recordings into HTML, Tailwind, React, Vue or other front-end code using AI models.

View on GitHubWebsite
Stars
80,547
Forks
9,842
Open issues
148
Last commit
11 days ago

What is it?

screenshot-to-code turns a visual input such as a screenshot, mockup, Figma design or screen recording into working front-end code. You pick a target stack, including HTML with Tailwind or CSS, React with Tailwind, Vue with Tailwind, Bootstrap, or Ionic with Tailwind, and the tool generates code that reproduces the layout.

The generation is powered by hosted AI models from OpenAI, Anthropic, Google Gemini and Replicate. When Gemini is configured, the tool can extract real logos and images from the screenshot and reuse them in the output. Screen recordings can be converted into a functional prototype of the site being shown.

The project has a React/Vite frontend and a FastAPI backend, and can run locally with Docker Compose. A hosted version is also available. Running locally requires your own API keys for the model providers.

Key features

  • 01Converts screenshots and Figma designs into HTML, React, Vue or Bootstrap code
  • 02Supports Tailwind, plain CSS and Ionic output styles
  • 03Generates prototypes from screen recordings of a website
  • 04Extracts real logos and images from screenshots when Gemini is configured
  • 05Lets you choose among OpenAI, Anthropic and Gemini models

Use cases

  • Turning a design mockup into a starting point for a front-end page
  • Rebuilding an existing website layout from a screenshot
  • Prototyping a UI from a screen recording of an existing app

Quick start

  1. 1

    Set up the backend with Poetry and install dependencies

    cd backend && poetry install
  2. 2

    Install the Chromium browser for the screenshot preview tool

    poetry run playwright install chromium
  3. 3

    Start the backend server on port 7001

    poetry run uvicorn main:app --reload --port 7001
  4. 4

    Install frontend dependencies and start the dev server, then open http://localhost:5173

    cd frontend && pnpm install && pnpm dev

Things to know

  • Running locally requires at least one model API key, and Replicate is strongly recommended for full features.
  • Setup involves both a FastAPI backend and a React frontend, so self-hosting takes some effort.
  • Ollama open-source models are not recommended due to poor-quality results.

Topics

#ai#code-generation#screenshot-to-code#frontend#react#vue#tailwind#llm

FAQ

What is screenshot-to-code?
Converts screenshots, mockups, Figma designs and screen recordings into HTML, Tailwind, React, Vue or other front-end code using AI models. screenshot-to-code turns a visual input such as a screenshot, mockup, Figma design or screen recording into working front-end code. You pick a target stack, including HTML with Tailwind or CSS, React with Tailwind, Vue with Tailwind, Bootstrap, or Ionic with Tailwind, and the tool generates code that reproduces the layout.
Is screenshot-to-code free to use? What license does it have?
screenshot-to-code is open source under the MIT license. Check the license terms before using it in commercial products.
Is screenshot-to-code still maintained?
Actively maintained. The last commit to screenshot-to-code was on Oct 9, 2026.
What can I use screenshot-to-code for?
Turning a design mockup into a starting point for a front-end page Rebuilding an existing website layout from a screenshot Prototyping a UI from a screen recording of an existing app
How do I install screenshot-to-code?
Set up the backend with Poetry and install dependencies: cd backend && poetry install Install the Chromium browser for the screenshot preview tool: poetry run playwright install chromium Start the backend server on port 7001: poetry run uvicorn main:app --reload --port 7001 Install frontend dependencies and start the dev server, then open http://localhost:5173: cd frontend && pnpm install && pnpm dev
Where can I get screenshot-to-code?
The source code and installation instructions are on GitHub: https://github.com/abi/screenshot-to-code

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects