aicoolies logo
screenshot-to-code logo
screenshot-to-code logo

screenshot-to-code

Convert any screenshot or mockup into clean frontend code with AI vision.

open sourceupdated Aug 16, 2026

screenshot-to-code is an open-source tool that converts screenshots, mockups, and Figma designs into clean, functional HTML, Tailwind CSS, React, or Vue code using AI vision models. Powered by GPT-4V, Claude, and Gemini, it supports video-to-code and iterative editing workflows, making it a rapid scaffolding tool for frontend developers who want to skip the pixel-translation step entirely.

screenshot-to-code turns static visuals into production-ready frontend code using AI vision models including GPT-4V, Claude Opus 4.5, and Gemini. Drop in a screenshot, a Figma export, or a URL, and the tool returns clean HTML with Tailwind CSS, React components, or plain Vue — no manual translation from design to markup. It also supports video recordings, letting developers iterate on UI animations frame-by-frame.

The project sits at over 71,000 GitHub stars and is one of the most-starred design-to-code repositories in existence. Unlike prompt-first builders like v0 or Bolt.new that start from a text description, screenshot-to-code is pixel-first: it reads the actual layout, color, and spacing of what you show it. This makes it especially useful when working from existing designs, Figma mockups, or cloning reference UIs where fidelity matters more than flexibility.

Self-hosting is straightforward via Docker, and a managed hosted version is available at screenshottocode.com for teams that prefer not to manage API keys directly. The tool is MIT-licensed, actively maintained, and serves as a benchmark reference implementation for the screenshot-to-code problem — making it an important anchor for comparison content covering tools like v0, Galileo AI, and Locofy.

Pricing

Free and open source (MIT). Hosted version available at screenshottocode.com with usage-based pricing for API calls.

Platforms

Web (hosted at screenshottocode.com), self-hostable via Docker. Supports VS Code extension workflow. macOS / Linux / Windows (Docker-based).

Categories

Tags

Use Cases

v0 logo

v0

Vercel's AI UI generator

Vercel's AI-powered UI generation tool that creates production-ready React and Next.js components from text or image prompts. Outputs clean code using shadcn/ui and Tailwind CSS, deployable to Vercel or copyable into existing projects. Supports iterative refinement through conversation, live browser preview, and generates accessible, responsive code. Ideal for rapidly prototyping landing pages, dashboards, forms, and UI components without manual setup.

freemium
Locofy logo

Locofy

AI-powered design to frontend code

Locofy is a design-to-code platform that converts Figma and Adobe XD designs into production-ready frontend code with high fidelity. Uses AI to automatically generate clean, responsive HTML/CSS/React/Next.js/React Native code from design files — eliminating labor-intensive manual translation. Includes Locofy Lightning for one-click conversion and Builder mode for custom components.

freemium
Onlook logo

Onlook

Visual IDE for React that designers can use

Onlook is an open-source visual editor for React and Next.js with 25.9K+ GitHub stars that lets designers edit real code-backed interfaces on an infinite canvas. It connects visual changes, AI chat, component and layer inspection, and versioned code workflows so teams can prototype and refine product UI without treating design files as the source of truth.

Open Source
Builder.io logo

Builder.io

Visual CMS and headless page builder

Builder.io is a visual development platform that lets teams create and optimize web and mobile content using a drag-and-drop editor that integrates directly with existing codebases and tech stacks (React, Next.js, Qwik, etc.). Empowers non-technical team members to publish and update digital experiences without waiting on developers. Includes headless CMS, A/B testing, and AI-powered Visual Copilot design-to-code.

freemium

Related Tools

computed discovery: shared active categories · kept separate from editor-verified Alternatives

Uizard logo

Uizard

Editable UI flows from prompts, screenshots and sketches

AI-assisted product-design platform that turns prompts, screenshots and hand-drawn sketches into editable UI flows for non-designers and early product ideation, complementing rather than duplicating developer-first code generators.

freemiumTelemetry
Magic Patterns logo

Magic Patterns

Design-system-aware AI prototyping for code-ready product interfaces

Magic Patterns turns product ideas, prompts, screenshots, and existing UI into editable, code-ready interfaces. Its design-system-aware editor supports collaborative iteration, two-way GitHub sync, and an MCP workflow for moving designs between the canvas and coding agents—positioning it between prompt-to-app builders and design-handoff tools rather than as a single-screen generator.

freemium
Mitosis logo

Mitosis

Write components once and compile them into native code for multiple frameworks

Mitosis is Builder.io-backed open-source infrastructure for writing a component once and compiling it into native framework components for React, Vue, Angular, Svelte, Qwik, Solid, React Native, and other targets. It supports cross-framework design systems and Figma-to-code synchronization, but is distinct from the Builder.io visual builder product.

Open Source
Figma Console MCP logo

Figma Console MCP

Turn a Figma design system into a programmable API for AI assistants

Figma Console MCP is open-source design-system infrastructure that exposes Figma to AI assistants through MCP. It supports structured extraction, design creation and editing, debugging, accessibility audits, and bidirectional design-token workflows across local, remote read-only, and paired cloud modes; it is not a generic one-click Figma-to-code exporter.

Open SourceTelemetry
OpenUI logo

OpenUI

Open-source UI generation from natural-language prompts

OpenUI is an Apache-2.0 design-to-code tool from W&B that turns natural-language interface prompts into live HTML previews and frontend code. Teams can run it locally or with Docker, connect OpenAI, Groq, LiteLLM-compatible providers, or Ollama, and export generated UI toward React, Svelte, Web Components, and related workflows. It fits rapid UI mockups where developers want editable code instead of screenshots.

Open SourceTelemetry
Figma MCP Server logo

Figma MCP Server

Official remote MCP server for design-to-code and write-to-canvas Figma workflows.

Figma MCP Server is Figma’s official remote Model Context Protocol surface for design-to-code agents. It gives supported clients structured design context, variables, components, selected-frame code context, Code Connect mappings, and beta write-to-canvas tools for creating or updating native Figma frames from an MCP client while keeping the workflow tied to Figma files.

freemiumTelemetry

FAQ

What is screenshot-to-code?

screenshot-to-code is an open-source tool that converts screenshots, mockups, and Figma designs into clean, functional HTML, Tailwind CSS, React, or Vue code using AI vision models. Powered by GPT-4V, Claude, and Gemini, it supports video-to-code and iterative editing workflows, making it a rapid scaffolding tool for frontend developers who want to skip the pixel-translation step entirely.

Is screenshot-to-code free?

Yes — screenshot-to-code is open source and free to use. Free and open source (MIT). Hosted version available at screenshottocode.com with usage-based pricing for API calls.

Is screenshot-to-code open source?

Yes — screenshot-to-code is open source.

What are the best screenshot-to-code alternatives?

The top editor-verified screenshot-to-code alternatives are v0, Locofy, Onlook, and more.