LibreAI / Design / Screenshot To Code

// design · abi/screenshot-to-code

Screenshot To Code

Screenshot To Code is an open-source design project by abi (abi/screenshot-to-code on GitHub). It has 79,959 GitHub stars and 9,776 forks, is released under the MIT license, and was last updated on GitHub on 29 September 2026.

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

★ 80.0k stars⑂ 9.8k forksMITupdated 2026-09

View on GitHub ↗Official site ↗

▦ visual — this project's README ships no embeddable screenshot,
so here's a placeholder. The guide below is complete regardless.

// project facts

Project facts

Repository: abi/screenshot-to-code
GitHub stars: 79,959
Forks: 9,776
License: MIT
Last updated on GitHub: 29 September 2026
Category: Design
Listing: Full install guide
Official site: Official site

// how it works

How it works

Choose your starting point
A blank canvas, an existing screenshot, or a text prompt describing what you want.
Design visually
Drag, drop, and edit with real components — what you see is actual code underneath.
Let AI assist
Generate layouts from screenshots or prompts, then refine by hand where it matters.
Export production code
Ship clean React/Tailwind/CSS you can actually maintain, not a dead mockup.

// features

Why people love it

Visual editing

Design directly on the canvas with real components and styles.

AI generation

Screenshot-to-code and prompt-to-UI that produce editable results.

Real code output

Exports are maintainable codebases, not locked-in proprietary files.

Collaboration

Multiplayer editing and commenting for teams.

Self-hostable

Your design files live on your infrastructure.

Open formats

No proprietary lock-in on your own work.

// run it

Run it yourself

Step 1 — Clone the repo
Download the source and move into the project folder.
```
git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code
```
Step 2 — Create an environment
Isolate dependencies so nothing clashes with your other projects.
```
python -m venv .venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate
```
Step 3 — Install and launch
Install the requirements, then follow the README's launch command (it varies per project).
```
pip install -r requirements.txt
```

// use cases

What you can build

Build marketing sites visually.
Prototype apps with AI-generated starting points.
Hand developers clean, real code.
Run a private Figma-style workspace.

Readers working through the Design shelf also stop at Smart-AI-Resume-Analyzer, AI resume analyzer — ATS-friendly templates and job-winning optimization. Also on this shelf: Eva01 — modular AI being with voice, face recognition and plug-and-play tools. The Design shelf also holds free-ai-resources-x — Curated collection of free AI tools, APIs, datasets and learning resources.

// faq

Questions, answered

Can AI-generated UI be production quality?

As a starting point, yes — expect to refine by hand, which these tools are built for.

Figma replacement?

For many workflows, increasingly yes — especially teams wanting self-hosting or code output.

Who maintains Screenshot To Code?

It is an open-source project at abi/screenshot-to-code with 9,776 forks. Check the repo's contributors and recent commits to see how active maintenance is.

What code does it export?

Typically React with Tailwind or plain HTML/CSS, depending on the tool.

Is it free?

The open-source tools here are free to use and self-host.

Do I need design skills?

The most-starred other Design projects in the LibreAI catalogue — the realistic shortlist if Screenshot To Code is not the right fit.

Excalidraw★ 134.0k
Excalidraw — the virtual whiteboard with the hand-drawn look: infinite canvas, real-time collaboration and end-to-end encrypted sharing, MIT-licensed
archify★ 79.8k
Turn any idea, plan or codebase into a beautiful interactive architecture diagram — an agent skill
AFFiNE★ 73.2k
There can be more than Notion and Miro. AFFiNE(pronounced [ə‘fain]) is a next-gen knowledge base that brings planning, sorting and creating all together. Pri…
draw.io Desktop★ 63.6k
draw.io Desktop — the official offline desktop app for diagrams.net: flowcharts, architecture diagrams and wireframes in an Electron app that never sends your diagram data anywhere, GPL-3.0
Penpot★ 60.6k
Penpot: The open-source design platform for Product teams that need scalable collaboration

// more in design

Get Screenshot To Code

Free and open — grab the source, star the repo, and start creating.

View on GitHub ↗← More Design tools

Screenshot To Code

Project facts

How it works

Why people love it

Visual editing

AI generation

Real code output

Collaboration

Self-hostable

Open formats

Run it yourself

What you can build

Questions, answered

Similar tools

Onlook

Penpot

Webstudio

cursor-talk-to-figma-mcp

structurizr

langchat-slides

Alternatives in Design

More in Design

Get Screenshot To Code