Screenshot-to-code is a code generation tool that converts screenshots, mockups, Figma designs, and screen recordings into clean, functional code using AI.
The tool addresses the problem of manually translating visual designs into working code. It accepts an image or video as input and uses large language models to generate HTML, CSS, React, Vue, or other web framework code that matches the design. The approach relies on multiple AI model providers—Gemini, OpenAI, Anthropic, and Replicate—each handling different aspects of the conversion: code generation, asset extraction from screenshots, image editing, and background removal. Users can supply API keys from one or more providers; the tool automatically selects stronger model combinations when multiple keys are available.
Adoption suits teams and individuals who want to accelerate UI development from design mockups or existing screenshots. The tool offers both a hosted web application for immediate use and a self-hosted option with a React/Vite frontend and FastAPI backend for those needing customization or self-hosting. The README strongly recommends Gemini and Replicate API keys for best results, particularly for asset extraction and image generation features. A single API key from OpenAI, Anthropic, or Gemini is sufficient to start, though adding all four providers unlocks the full range of capabilities and model comparison.
The project maintains active engagement with a substantial user base, as evidenced by most open issues originating from outside users rather than the core team. Maintainers typically respond to new issues and pull requests within a day. Work in the issue tracker centers on three primary areas: model selection and performance, supported code stacks, and video-to-code functionality.
