Screenshot-to-code
Open-source tool that converts screenshots, mockups, and screen recordings into working frontend code using AI vision models.
About
Screenshot-to-Code is an open-source project that turns a screenshot or Figma design into clean, functional UI code. Drop in an image or screen recording and it outputs HTML with Tailwind, React, Vue, Bootstrap, or Ionic, pulling real logos and assets from the original design where possible. It also supports video-to-code, converting a recorded walkthrough into a working prototype.
The tool works with multiple AI backends including GPT-4o, Claude, and Gemini. You can self-host the project for free using your own API keys, or use the hosted version at screenshottocode.com. It is aimed at frontend developers and designers who want rapid prototyping from visual inputs.
The tool works with multiple AI backends including GPT-4o, Claude, and Gemini. You can self-host the project for free using your own API keys, or use the hosted version at screenshottocode.com. It is aimed at frontend developers and designers who want rapid prototyping from visual inputs.