AI Briefingscreenshot-to-code: Turn a Screenshot into React or Vue Code
abi/screenshot-to-code
About the project
Drop in a design mockup or web screen capture to instantly convert it into working code. It supports major frontend stacks including HTML, Tailwind, React, Vue, Bootstrap, and Ionic, and can transform not only simple static pages but also videos recorded from real websites into functional prototypes.
It leverages the latest LLMs such as Gemini, GPT, and Claude to analyze screen elements and generate code. In particular, the Gemini model extracts logos and graphic assets from the original image for reuse, and integrates with Replicate to perform background removal and image editing. The generated code is rendered in a headless browser, including a process that self-verifies visual accuracy.
It offers two modes: local execution and a hosted service. For local execution, at least one API key from OpenAI, Anthropic, or Gemini is required; registering multiple keys allows you to compare performance across models or achieve higher-quality results. Released under the MIT license, it can be freely used for personal projects or internal tools.
abi/screenshot-to-code
Drop in a screenshot and convert it to clean code (HTML/Tailwind/React/Vue)
Python
This introduction was generated automatically by AI. Check the original for the author's claims and context. Copyright belongs to the original author.
Our guide explains how the AI works. Report errors, attribution issues, or removal requests via Contact.