screenshot-to-code

screenshot-to-code

screenshot-to-code converts screenshots, mockups, and Figma designs into production-ready frontend code using vision-capable LLMs. Support for HTML+Tailwind, React, Vue, Bootstrap, and Ionic means you can target your exact stack in one shot.

Key Features

• Multi-framework output: HTML/Tailwind, React+Tailwind, Vue+Tailwind, Bootstrap, Ionic, and SVG
• Video-to-app: record a screen interaction and generate a multi-step React app from the video
• Multi-model: GPT-4o, Claude 3.5 Sonnet, Gemini — swap via a dropdown; DALL-E 3 fills placeholder images
• Import from URL: paste any live URL and the tool scrapes + recreates the UI
• Eval framework: built-in evaluation suite to compare model outputs on a fixed benchmark set
• Docker-first: self-host the full stack (FastAPI backend + React frontend) with a single compose command

Quick Start

git clone https://github.com/abi/screenshot-to-code
cd screenshot-to-code
echo "OPENAI_API_KEY=your_key" > .env
docker-compose up --build
# Open http://localhost:5173 and drop a screenshot

Or run the backend directly:

pip install -r requirements.txt
poetry run uvicorn main:app --reload --port 7001

npx ai-supply add screenshot-to-code-generator

Curated mirror of the open-source screenshot-to-code (MIT). Get it from the source.