← Discover
GitHub · abi/screenshot-to-code↑ +309 today

Turn screenshots into working code

Screenshot-to-code is a software tool that analyzes screenshot files and converts them into clean HTML, Tailwind, React, or Vue code. It allows developers to quickly turn interface designs into working code snippets.

Updates

  • September 18, 2026: Stars 75,377 → 79,191.

What you get

  • Converts screenshots and design files into clean HTML or React code
  • Transforms website captures into functional prototypes
  • Supports Tailwind CSS and various popular interface libraries

Installation

Quick installation with Docker
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build
Starting the interface
cd frontend
pnpm install
pnpm dev

If you don't write code

Paste this into your AI agent (Claude Code · Codex · Antigravity)

Analyze the screenshot and create a clean, functional code structure that perfectly reflects the design in the image. Prepare the output in HTML or React format using Tailwind CSS. Extract real logos and assets from the image to include in the code, and code all elements of the design in a responsive manner.

Repository: https://github.com/abi/screenshot-to-code. Follow the official instructions in the README of this repository for setup and execution.

Before starting, check which OS we are on and if the necessary tools (e.g., Python, Node.js, Git, Docker) are installed. Install any missing ones step-by-step according to this system.

Create a new, empty folder to work in. Do not touch any files outside this folder and do not delete anything. Tell me what you are going to do in one sentence before running each command.

Tell me what I should see on the screen at the end of each step. If an error occurs, I will paste the error message to you exactly as it is, and we will fix it together.

Related dictionary terms

Who it is forSuitable for designers and developers who want to quickly turn interface designs into working code snippets.
LicenseMIT

Links

TreScout did not build this tool · we found it in GitHub trends and wrote it up. This page describes the repository as of 2026-08-28: The star count and our text belong to that day, the repository may have changed since. Check the repository link for the current state. The introductory text was prepared with AI from the repository's own documentation, and this page was machine-translated from the Turkish original · the Turkish version prevails.