Turn screenshots into working web code
Upload a single screenshot of a design mockup or a competitor's site, and the tool generates HTML and CSS code that opens directly in a browser. It eliminates the need for developers to manually retype pixels created by designers. The tool uses AI to analyze the screen, extract actual logos and images, and generate code tailored to your preferred framework.
From screen to code, and video to prototype
The core of this tool is converting static images or dynamic screen recordings into functional code. It does not simply replicate the layout; instead, AI identifies actual logos or background images within the screenshot and reuses them directly in the code. It also accepts video recordings of websites in action, using them to create prototypes that include interactions. It supports various stacks, including HTML, Tailwind, React, Vue, Bootstrap, and Ionic, allowing you to apply the output directly to your team's technology stack.
Model combinations and local execution environment
Code quality varies depending on the AI models used, and using Gemini and Replicate keys together is strongly recommended. Gemini is essential for extracting actual assets from screenshots, while Replicate handles image editing and background removal. To run locally, you must set up a Python-based FastAPI backend and a React/Vite frontend separately. You manage dependencies using Poetry and must install the Chromium browser via Playwright to activate the screenshot preview feature. Using Docker reduces this complex setup process to a single command.
Things to check before running
Before using this tool, ensure you have at least one AI model provider key. It works with just one of OpenAI, Anthropic, or Gemini, but adding all keys allows the system to automatically select a more powerful model combination. Gemini keys are practically mandatory if you want video mode or high-quality asset extraction. When running locally, verify in the settings dialog that the backend and frontend port configurations are correct and that Chromium is installed properly. This tool is most effective when used as an auxiliary tool to reduce repetitive markup tasks, rather than as a replacement for development.
