screenshot-to-code

Screenshot to Code is an open-source tool that transforms screenshots, mockups, Figma designs, and screen recordings into clean, functional front-end code. It leverages AI models such as Gemini, GPT, and Claude to generate accurate replicas from visual inputs. Supported output stacks include HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, and Ionic + Tailwind. The tool also supports converting screen recordings of websites into functional prototypes, not just static images. Image-related features powered by Replicate include asset extraction (reusing real logos and images from the source screenshot), image generation, background removal, and image editing. A screenshot preview feature renders generated pages in a headless browser for visual self-checking. The project consists of a React/Vite frontend and a FastAPI backend. It can be run locally with API keys from at least one provider (OpenAI, Anthropic, or Gemini), or deployed via Docker. Gemini and Replicate keys are strongly recommended for best accuracy and full feature support. Usage options: - Hosted at screenshottocode.com for quick use without setup. - Self-hosted locally for customization, contribution, or private deployment.