screenshot-to-code converts screenshots, mockups, Figma designs, and screen recordings into working front-end code with AI. You upload an image or recording, choose a target stack, and the app generates a page that reproduces the design; a screen recording of a site in use can be turned into a functional prototype. The project is available as a hosted product at screenshottocode.com and as a self-hostable open-source app with a React/Vite frontend and a FastAPI backend.
Code generation runs on the model provider keys you supply: at least one of OpenAI, Anthropic, or Gemini is required, and with several keys the app mixes models per variant so you can compare outputs. Gemini also extracts the real logos and images from a screenshot and is required for video mode; a Replicate key enables image generation, background removal, and image editing. An optional screenshot preview lets the agent render its own generated page in a headless Chromium browser and check the result visually. Ollama models can be used but are not recommended by the project because of output quality.
| Stack | |---| | HTML + Tailwind | | HTML + CSS | | React + Tailwind | | Vue + Tailwind | | Bootstrap | | Ionic + Tailwind |
Features
- Input types: screenshots, mockups, Figma designs, and screen recordings
- Output stacks: HTML with Tailwind or CSS, React, Vue, Bootstrap, and Ionic
- Model providers: Gemini (3 Flash, 3.1 Pro), OpenAI (GPT-5.5, GPT-5.4 Mini), and Anthropic Claude Opus variants, selected per generation
- Asset extraction: Gemini reuses the actual logos and images from the screenshot
- Image tools: Replicate-backed image generation, background removal, and editing
- Video mode: turns a screen recording into a functional prototype
- Screenshot preview: the agent renders its output in headless Chromium to verify the result
- Deployment: hosted app, local backend and frontend, or Docker Compose; OpenAI base URL is configurable for proxies
