AI Guides › Workbench
By Nigel Guy · 8 min read
The usual way people try this is to drop a screenshot of a site they admire into a tool, get back something that looks close, and assume they now own a working copy of that website. They don't. They have a static first draft of the front end, with placeholder images, no back end and someone else's design choices baked in. The preview looks right, which is why the gap goes unnoticed until you try to add a contact form.
The rule: treat a screenshot-to-code result as a first draft of one page's layout, pick the cheapest route that gets you that draft, and spend your real effort on the editing afterwards.
Screenshot to Code is an open-source project (MIT licence) on GitHub by Abi Raja. You give it a picture of a page; it sends that picture to an AI model and returns code you can open, read and change. There is a hosted version run by the same author, and the free code you can run yourself.
| Going in (the app's four input tabs) | Coming out |
|---|---|
| Upload: a screenshot, mockup or exported design image; the README says screen recordings are supported too | Code in the stack you choose: HTML + Tailwind, HTML + CSS, React + Tailwind, Vue + Tailwind, Bootstrap, or Ionic + Tailwind |
| URL: a web address the app screenshots for you (needs a ScreenshotOne API key in Settings) | A live preview, a code view, a "Download Code" button and an "Open in New Tab" button |
| Text: a written description of the page you want | Several variants generated side by side, so you can pick the best |
| Import: existing HTML you paste or drop in, to keep editing | A box for follow-up instructions ("Describe anything you want changed…") |
Figma links are not read directly; the app tells you to screenshot or export the frames and use Upload instead.
| Route | What it does | Cost at time of writing | Best for | Catch |
|---|---|---|---|---|
| Hosted app (screenshottocode.com) | Same tool, no setup | Paid subscription; check the current pricing page, as I couldn't confirm plan prices from the official site | Trying it once, or never touching a terminal | Monthly fee; the author offers support only for the open-source version, not the hosted one |
| Self-hosted with Docker | Runs the open-source app on your own computer | Software free; you pay your AI provider per use | Regular use with your own API key | You install Docker and handle a keys file |
| Manual install (Poetry + pnpm) | Runs the back end and front end separately | Free software; same API costs | Developers who want to change the tool itself | More moving parts than most people need |
| A chat assistant you already pay for | Paste the screenshot into Claude or ChatGPT and ask for the HTML | Included in your existing plan | One quick page, no new accounts | One version at a time, no side-by-side variants or built-in preview |
Docker Desktop is free for personal use and for businesses with fewer than 250 employees and under $10 million (about £7.5 million) annual revenue; larger organisations need a paid Docker subscription.
The self-hosted app does nothing without at least one model key: OpenAI, Anthropic or Gemini. The README recommends adding a Gemini key (it reuses real logos and images from your screenshot, and is required for video mode) and a Replicate key (image generation, background removal and image editing). One key is enough to start.
An Anthropic key comes from the Claude Console, not your Claude.ai subscription. API billing is separate from Claude Pro: you buy prepaid credits under Billing, they expire a year after purchase and are non-refundable. Prices are usually quoted in US dollars, so buy a small amount first.
Also bear in mind: the app generates several variants per run (the code sets four for images), so one click is several model calls. In the current code each variant has a hard spending ceiling of $3 (about £2.25 at time of writing), though as the code notes, models without a price set aren't held to that limit. Watch your Console usage page after your first few runs.
git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code
> for the first line and >> for any extra keys, or you will overwrite the first.echo "ANTHROPIC_API_KEY=[YOUR_ANTHROPIC_KEY]" > .env
echo "GEMINI_API_KEY=[YOUR_GEMINI_KEY]" >> .env
Fill in: your own key or keys, and delete any line for a provider you don't use.
docker-compose; current Docker Desktop also accepts docker compose with a space.docker compose up -d --build
The first build is slow: it downloads Python packages and a Chromium browser.
Open http://localhost:5173 in your browser. Click the gear icon to see Settings: you can paste OpenAI, Anthropic and Gemini keys there instead (the troubleshooting page says browser-entered keys stay in your browser), choose your output stack, and check whether screenshot preview is available. A Replicate key only works from the .env file.
To stop it later: docker compose down in the same folder.
Pick your stack in Settings first; HTML + Tailwind is easiest to edit without build tools. Upload a desktop-width screenshot, choose the best variant, then ask for changes. Vague follow-ups waste calls. This prompt works in the follow-up box or in any chat assistant with the screenshot attached:
You are a front-end developer rebuilding one web page from a screenshot as a starting draft I will edit myself.
Context: the page is for [WHAT THE PAGE IS FOR, e.g. "my bakery's homepage"]. Target stack: [STACK, e.g. "single HTML file with Tailwind via CDN"].
Goal: a faithful layout I can edit, not a pixel-perfect copy of anyone's brand.
Steps:
1. List the page's sections from top to bottom in one line each before writing code.
2. Rebuild the layout and spacing from the screenshot.
3. Replace all logos, photos and brand names with clearly labelled placeholders, and swap any body copy for [MY TEXT, or "neutral placeholder text"].
4. Make it work at phone width as well as desktop.
5. Apply only these changes: [CHANGES, e.g. "navy instead of red; remove the pricing table"].
Output: the section list, then one complete code block, then a short list of anything you guessed (fonts, hidden hover states, content cut off at the edge).
Rules: no external scripts beyond the stack named above; no invented contact details, prices or reviews. If the screenshot is unreadable or my inputs are missing, ask me before writing code.
Before answering, check: every image is a placeholder, nothing from the original brand remains, and the code runs as a single file.
Fill in: what the page is for, your stack, your own text, and the specific changes you want.
| Symptom | Likely cause | Fix |
|---|---|---|
| Browser page won't load | Containers not running, or still building | Open Docker Desktop and check both containers are up; give the first build time |
| App loads but generation fails | No valid key, or no credit on the account | Recheck .env spelling (ANTHROPIC_API_KEY= with no spaces) and your Console balance; rebuild after editing .env |
| OpenAI key rejected | No credit on the API account | The project's troubleshooting page says you need prepaid credit on the developer account, not ChatGPT Plus |
| Odd character errors on Windows | .env saved in the wrong encoding |
The README suggests reopening the file and saving as UTF-8 |
| URL tab refuses | No ScreenshotOne key | Take the screenshot yourself and use Upload |
.env file like a password. Don't share it, paste it into chats or upload it anywhere; if a key leaks, revoke it in your provider's console.