aicoolies logo

screenshot-to-code

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

Share
open-sourceOpen Source
Visit Website →

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

Alternatives

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

Galileo AI

Dead

AI UI design generation from text prompts

Generate high-fidelity UI designs from natural language descriptions in seconds. Galileo AI creates editable Figma designs with realistic content, components, and layouts powered by generative AI. Perfect for product teams and designers who want to explore multiple design directions quickly before committing to detailed implementation.

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-sourceOpen Source

Related Tools

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-sourceOpen SourceTelemetry

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
OpenPencil logo

OpenPencil

AI-native open-source design editor and Figma alternative

OpenPencil is an AI-native, open-source design editor for teams that want a Figma-like canvas with source-visible code and experimental AI design workflows. It is best framed as OpenPencil by the open-pencil project, separate from the same-name ZSeven-W repo, and useful for early UI prototyping, design-to-code exploration, and open-source visual editing pilots.

open-sourceOpen Source

Talk to Figma MCP

Read/write MCP bridge between AI coding agents and Figma

Talk to Figma MCP is an MIT-licensed bridge from Grab that connects Cursor, Claude Code, and other MCP-capable agents to Figma through a local MCP server, WebSocket bridge, and Figma plugin. Unlike read-only context servers, it can inspect selections, create or modify nodes, update text in bulk, and automate design operations, so teams should review permissions before enabling write access.

open-sourceOpen SourceTelemetry
Figma Context MCP logo

Figma Context MCP

MCP server that gives coding agents structured Figma context for design-to-code work

Figma Context MCP is an MCP server for giving coding agents structured access to Figma design context during implementation. Instead of copying screenshots or hand-written design specs into prompts, teams can expose layout, component, and context information to agents such as Cursor, Claude Code, and other MCP-compatible coding workflows. It is a strong design-to-code bridge for teams trying to reduce hallucinated UI details and tighten handoff between designers and AI-assisted developers.

open-sourceOpen SourceTelemetry
Puck logo

Puck

Open-source visual editor for React — self-hostable core, optional Puck Cloud

Puck is an open-source visual page builder for React that gives teams a drag-and-drop editor backed by their own components. The MIT-licensed core remains self-hostable and persists plain JSON, while Puck Cloud and Puck AI now add optional hosted and agentic editing layers. With 12.8K+ stars, it is the dev-first visual editor to watch.

free