Turn a screenshot into code with AI

Tools: screenshot-to-code, Docker
Price: Free (MIT), plus AI API usage
Time: 30 min the first time
Level: Terminal, intermediate

A client shows you a screenshot of a homepage they like, or a sketch of their future booking page. You used to rebuild everything by hand before you could even show them something. screenshot-to-code does that first translation from image to code: you skip the setup and go straight to the adjustments.

What it is for, and who it is for

The abi/screenshot-to-code repository (MIT licence) turns a screenshot, a mockup or a Figma design into code. It can also start from a screen recording to build a prototype that reacts to clicks (that mode needs a Gemini key). Output formats: HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap and Ionic + Tailwind.

It suits a freelancer or small agency that builds websites, a business owner who wants to show a page idea to their developer, or anyone modernising an old page whose code is lost.

Install the tool on your computer

The simplest route is Docker, a program that runs the app inside an isolated “box”. First install Docker Desktop and start it.

Get the codeIn the Terminal:

Terminal

git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code

Add your API keyYou need at least one key: Anthropic (Claude), OpenAI or Gemini. An Anthropic key is created in the Claude Console. Replace your-key with yours; it stays in the .env file on your machine.
Terminal
```
echo "ANTHROPIC_API_KEY=your-key" > .env
```
Start the appThe first build takes a few minutes.
Terminal
```
docker-compose up -d --build
```
Open the interfaceGo to http://localhost:5173 in your browser. The gear icon also lets you enter or change keys.

If you would rather install nothing, the author runs a hosted version at screenshottocode.com. Read its terms before uploading a client mockup: the image then goes to a third-party server.

Example: a booking page mockup

Prepare the imageA sharp, full-width screenshot of a single page. Remove any visible personal data (names, emails, phone numbers).
Pick the format“HTML + Tailwind” for a page that is easy to host, “React + Tailwind” if your developer works in React.
Drop in the imageThe tool generates the code and a preview. Compare it with the original and note what is off.

Have Claude review the resultPaste the code into Claude with this prompt to turn a visual copy into a clean starting point:

Prompt

Here is the HTML/Tailwind code of a page generated from a screenshot.
Rework it into a clean working base:
- all copy in plain English, addressed to the visitor as "you";
- replace sample text and images with [TO FILL] placeholders;
- headings in order (a single h1), accessible buttons and links,
  alt text on images;
- flag anything that looks like a brand, a logo or protected text
  copied from the screenshot.
Return the full file, then a list of what you changed.

Useful settings

One key or several: with a single key, the tool only uses that provider's models. With several, it offers several variants to compare.
Gemini and Replicate: the repository recommends them to reuse the real logos and images from the screenshot, and to edit images or remove backgrounds. Without a Replicate key, those features are missing.
Language: the tool copies the text in the image. A French mockup gives a French page: translation comes afterwards, with the prompt above.

Limits and cost

The code is a starting point: no form wired to an inbox, no database, no search optimisation. There is still developer work to do.
Each generation uses credits with the AI provider you chose, billed per use at its rates. Keep an eye on your usage in the provider's console.
The repository advises against local open-source models (through Ollama), which it considers too low quality for this job.

Ground rules. Reproducing someone else's website, logo or copy raises copyright and trademark issues: use the tool for your own mockups, your own pages or your clients' pages with their consent. Your API key is a secret: never publish the .env file (on GitHub especially) and revoke the key if it leaks. Only install from the official abi/screenshot-to-code repository.

Sources

Want to go from mockup to a fast website that ranks and connects to your tools? That is my job: see my websites service.

From a screenshot to code, with AI