Screenshot to UI Code: The Tools That Actually Do It

A viral list of five GitHub repos “for turning screenshots into working UI” holds up for only two of them. TSN checked each project against its own README and the GitHub API on 27 October: of the other three, one is a component library, one is an unmaintained agent whose README now warns of a credential-stealing worm, and one is a control centre for coding agents.

The list came via @RoundtableSpace on X on 27 October and ended: “The gap between ‘I like this design’ and ‘build it’ is getting ridiculously small.” That much is fair. Tools that take an image and return front-end code do exist, both open source and hosted. The problem is that a list can send people to the wrong repo, and in one case to code with a security notice attached. This guide sorts out which tools do the job, what each needs to run, and what to check before you paste a screenshot into an AI.

Two of the five repos do what the post says

Screenshot-to-code is the closest match to the claim

Screenshot-to-code says it converts “screenshots, mockups, Figma designs, and screen recordings into clean, functional code”. It can output HTML with Tailwind or plain CSS, React or Vue with Tailwind, Bootstrap, and Ionic with Tailwind. It is MIT-licensed, had 80,789 stars on 27 October and is still being updated.

You bring your own model keys. The README says you need “at least one” key from OpenAI, Anthropic or Gemini, and that Gemini and Replicate keys are “strongly recommended” for accuracy. Video mode needs Gemini. Running it yourself takes three steps:

1. Add your API keys to a .env file in the backend folder.
2. Start the FastAPI backend with poetry install, then uvicorn on port 7001.
3. Start the React and Vite frontend with pnpm install && pnpm dev and open localhost:5173. Alternatively, docker-compose up -d --build runs both.

For people who would rather not run anything locally, the README points to a hosted version at screenshottocode.com.

OpenUI needs a model that can see

OpenUI is built mainly for describing an interface in words. Its README calls it “like v0 but open source and not as polished”. The frontend also accepts a screenshot by drag, paste or upload, but the image only reaches the model if that model supports images, such as LLaVA run through Ollama. With a text-only model, the screenshot does nothing.

It produces HTML that can be converted to React, Svelte or Web Components, and runs as a single Docker container (ghcr.io/wandb/openui) on port 7878. It is Apache-2.0-licensed, with 22,693 stars.

GPT Pilot carries a worm warning and is no longer maintained

The GPT Pilot README opens with a security notice: “A supply-chain worm (a credential stealer) was hidden in core/telemetry/ from August 2025 until 11 June 2026.” The malicious code has been removed. The project says anyone who cloned and ran GPT Pilot from source in that window should rotate every credential that was on the machine, including GitHub and npm tokens, cloud keys, SSH keys and API keys. Having a copy that was never run is not affected, according to the notice.

The same README says the repo is “not being maintained anymore”. It is also not a screenshot tool: GPT Pilot builds whole apps from text instructions. Stolen developer tokens are a recurring theme in TSN’s security coverage, from the Gheist campaign that used stolen GitHub tokens to pull CI secrets to the npm worm that rigged GitHub repos to run code when opened in AI coding tools.

shadcn/ui and OpenHands do a different job

The “v0 Clone” link in the post points to shadcn/ui, a library of React components whose code developers customise inside their own projects. It isn’t a clone of anything. Vercel’s v0 uses it by default, which may explain the mix-up. It is the most-starred project here, with 126,698 stars, and shipped a release on 27 October.

OpenHands now presents itself as Agent Canvas, “the self-hosted developer control center for coding agents and automations”. It runs coding agents on tasks you set, in the same broad category as Cursor’s agents. It is not a screenshot-to-UI tool.

Napkins and three hosted builders also take an image

Napkins fills the gap the list left. It describes itself as “from screenshot to app” and “an open source wireframe to app generator”, builds a Next.js and Tailwind app, and runs on Kimi K2.5 through Together AI. You need a Together AI key and S3 storage. It is MIT-licensed, with 1,478 stars.

Three hosted services accept images too:

• v0: Vercel’s screenshot docs say it will “analyze the layout, colors, and components” in a screenshot and “generate code that closely replicates the design”. Output defaults to Next.js, Tailwind and shadcn/ui.
• Bolt.new: its upload guide suggests prompts such as “Using the attached image for inspiration…” and it can import Figma frames. It builds JavaScript apps only.
• Lovable: its chat docs say you can “attach a design mockup to match”, and it has a built-in Take a screenshot action.

All three meter use through messages, tokens or credits, and list their allowances on their pricing pages (v0, Bolt.new, Lovable). Design tools are moving the other way at the same time: Figma’s code layers can convert a design into running code on the canvas, and Google now lets people run vibe-coded AI Studio apps privately on their phones.

Star counts made three wrong answers look credible

The list worked as a post because every entry looked checked: a real GitHub link, a recognisable name, tens of thousands of stars. Yet the most-starred project on it does something else entirely, and a project with 33,635 stars carries a malware notice at the top of its README. Stars measure attention built up over years. They say nothing about whether a repo does the job described, or whether anyone still looks after it.

The archived flag is no safety net either. GitHub showed none of the five as archived, including the one whose own maintainers say it is no longer maintained and link that to how long the malicious commit went unnoticed. The reliable checks are slower and duller: read the top of the README, look at the date of the last commit or release, check the licence, and read any security notice before running anything.

That matters more for these tools than for most. Self-hosting means putting API keys from several paid providers in a .env file on a machine that probably also holds GitHub tokens and cloud credentials. For a firm, the screenshot itself can be a data-protection question if it shows customer records. Running code from an unmaintained repo on that machine is a supply-chain decision, not a quick experiment, and the rotation advice in GPT Pilot’s notice is the same remedy security teams have been handing out after every token-theft campaign this autumn.

Checks before you paste a screenshot into an AI

• Treat the output as a first draft. Vercel’s own v0 lesson on screenshots says v0 “is interpreting, not copying”. Check layout, responsiveness and logic yourself.
• Check accessibility. An image carries no semantics, so headings, alt text, contrast and keyboard use all need checking in the generated code.
• Mind the licence. Cloning someone else’s site design or assets can infringe their rights. Lovable’s docs put it simply: “Be mindful of copyright.” TSN covered similar legal questions in its explainer on the REA reverse-engineering tool.
• Count the cost. Self-hosted tools bill your own API keys for every generation, and screenshot-to-code works best with several paid keys. Hosted tools meter use.
• Strip private data. Screenshots go to third-party model providers or hosted services, so remove customer data and credentials first. v0 says training opt-out is on by default on its Business plan.

If GPT Pilot ran on your machine at any point between August 2025 and 11 June 2026, rotating those credentials comes before trying any of the tools above.

Sources

• @RoundtableSpace on X, 27 October 2026
• abi/screenshot-to-code on GitHub and GitHub API record
• wandb/openui on GitHub
• Nutlope/napkins on GitHub
• shadcn-ui/ui on GitHub
• Pythagora-io/gpt-pilot on GitHub
• OpenHands/OpenHands on GitHub
• v0 docs: screenshots and v0 pricing
• Vercel Academy: enhance design with screenshots and versions
• Bolt.new support: upload files and Bolt.new pricing
• Lovable docs: chat and Lovable pricing

Related stories

• Figma Opens Code Layers and Specs Betas and Adds Payload to Make
• Wiz Says Gheist Campaign Uses Stolen GitHub Tokens to Steal CI Secrets
• JFrog Says npm Worm Campaign Armed 42 GitHub Repos From 11 Owners
• Google Play Now Lets You Run Your Own Vibe-Coded AI Studio Apps Privately on Your Phone