# Screenshot to Code — Convert Designs to Code

> Screenshot to Code converts screenshots, mockups, and Figma designs into clean code using AI. 72.1K+ GitHub stars. HTML, React, Vue, Bootstrap. MIT.

## Install

Save as a script file and run:

## Quick Use

```bash
# Clone and run
git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code

# Backend
cd backend && echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install && poetry run uvicorn main:app --reload --port 7001

# Frontend
cd frontend && yarn && yarn dev
# Open http://localhost:5173

# Or Docker
docker-compose up -d --build
```

---

## Intro

Screenshot to Code converts screenshots, mockups, and Figma designs into clean, functional code using AI. With 72,100+ GitHub stars and MIT license, it supports multiple output formats (HTML/Tailwind, React, Vue, Bootstrap, SVG), leading AI models (Claude, Gemini, GPT), and video/screen recording conversion. Hosted version available at screenshottocode.com.

**Best for**: Developers converting designs to code without manual implementation
**Works with**: Claude Code, OpenAI Codex, Cursor, Gemini CLI, Windsurf

---

## Key Features

- Screenshot/mockup to code conversion
- HTML/Tailwind, React, Vue, Bootstrap, SVG output
- Claude, Gemini, GPT model support
- Video/screen recording conversion
- Figma design import
- Hosted version at screenshottocode.com

---

### FAQ

**Q: What is Screenshot to Code?**
A: AI design-to-code converter with 72.1K+ stars. Screenshots to HTML/React/Vue. Claude, Gemini, GPT. MIT.

**Q: How do I use it?**
A: Clone repo, run backend + frontend, or use Docker. Or visit screenshottocode.com.

---

## Source & Thanks

> [abi/screenshot-to-code](https://github.com/abi/screenshot-to-code) — 72,100+ GitHub stars

---
Source: https://tokrepo.com/en/workflows/e8c64554-d3b8-402d-b5c7-74bce0b57159
Author: Script Depot