Screenshot to Code

Active
GitHub Python MIT

Description

Turn screenshots, mockups, and Figma designs into clean code using AI models. Supports HTML/Tailwind, React, Vue, and other frontend frameworks.

Key Features

  • Multi-format input - converts screenshots, UI mockups, Figma designs and screen recordings into runnable code
  • Multi-stack output - generates code for HTML+Tailwind, React+Tailwind, Vue+Tailwind, Bootstrap, Ionic and more
  • Multi-model AI integration - built-in Gemini, GPT-5 series, Claude Opus models with side-by-side comparison
  • Live preview and iteration - React/Vite frontend with real-time preview and iterative refinement of generated code
  • FastAPI backend - backend built on FastAPI with WebSocket real-time communication and hot-reload development
  • Docker one-click deploy - docker-compose setup for quick complete local environment provisioning

Use Cases

💡 Frontend developers quickly converting designer screenshots or Figma mockups into runnable frontend page code
💡 Rapid prototyping by converting competitor or inspiration screenshots into interactive prototypes for demos
💡 Transforming existing website workflows from screen recordings into reusable frontend code templates
💡 Learning frontend development by reverse-engineering layout and implementation from screenshots of well-designed sites

Tags

screenshot-to-code multimodal code-generation design frontend

Categories

💻 Coding Agent ⚡ Agent Tools

Quick Start

# Clone the project
git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code

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

# Start frontend
cd ../frontend && yarn && yarn dev
# Visit http://localhost:5173
Visit GitHub

Related Projects