Screenshot to Code Can Now Rebuild Any Page

Debrief · No. 35 · Fri Oct 16 Screenshot to Code: Mockup In, Front-End Out An open-source app that turns a screenshot, a Figma frame or a screen recording into working front-end code. What it really costs, the key trap, and a 30-minute first run.

Friday is the tools half of The AI Debrief: one Academy pick for the weekend, one workflow to steal, and two more free tools if you have another 20 minutes.

In This Email » Screenshot to Code: what it replaces, what it really costs, and which keys you need » Steal this: turn one real mockup into a working page in 30 minutes » Two more free tools with nothing to buy: public-apis and Scrapling

This Week's Tool From the Academy: Mockup to Working Front-End

Screenshot to Code

Screenshot to Code takes a screenshot, a mockup, a Figma design or a screen recording and writes front-end code that matches it. MIT license, about 80,000 GitHub stars. It outputs HTML, React, Vue, Bootstrap or Ionic, mostly with Tailwind.

What it replaces: the hour you spend hand-building a page from a designer's PNG, or pasting a screenshot into a chat model and copying out broken code. With Chromium installed, the app renders its own page in a headless browser and checks its work.

Cost, honestly: the code is free. The models aren't. Self-hosting means you bring at least one provider key (OpenAI, Anthropic or Gemini) and pay that provider per generation. The hosted app has no free plan: Hobby is $15 a month for 100 credits, Pro is $40 for 500, and every generation or edit uses a credit.

Which keys unlock what:

One of OpenAI, Anthropic or Gemini: the minimum. With a single key, the app uses that provider's models only.

Gemini: strongly recommended by the maintainer. It pulls the real logos and images out of your screenshot, and it's required for video mode.

Replicate: needed for image editing and background removal.

The trap: people open the hosted app expecting free and hit a paywall, or self-host with one OpenAI key and wonder why screen recordings do nothing. Decide up front: your own keys and a terminal, or pay for hosted.

My take: if you build landing pages or client mockups, this earns a Saturday. Treat the output as a fast first draft, not finished code.

Steal This

30-Minute First Run

1. Clone the repo. Fastest path is Docker: in the root folder, put your key in .env (for example OPENAI_API_KEY=...) and run docker-compose up -d --build. Open localhost:5173. No Docker: run the backend with Poetry on port 7001 and the frontend with pnpm dev.
2. Pick one real screen you need this month: a pricing page, a signup form, a dashboard card. Not a demo. Choose a stack in the app (HTML + Tailwind is the easiest to eyeball) and drop the image in.
3. Put the output next to the original. Fix it with plain-language edits ("tighten the card spacing," "match the button to our brand blue") instead of hand-editing code. Each edit is another model call, so batch your changes.
4. Copy the code into your real project and wire up the data yourself. Check mobile layout and accessibility before anything ships.

Time it against your usual build. If it saves you an hour, add a Gemini key and try a short screen recording of a flow you like.

Two More Free Tools

Public-apis

public-apis is the giant community list of free APIs, MIT licensed, with nearly 490,000 GitHub stars. Every entry is tagged with its Auth type (No, apiKey or OAuth), with HTTPS and CORS columns.

The trap: the top of the README is a sponsored block for a paid API suite, not the community list. Scroll past it to the categories.

Try This (Free, 15 Minutes) Search the list for Open-Meteo: Auth No, HTTPS Yes, CORS Yes, and free for non-commercial use. Ask your coding agent to add a live weather line to a side project with it. No key, no card. Then pick the category closest to your business, filter mentally for Auth "No," and save two candidates for your next build.

Scrapling

Scrapling is a BSD-licensed Python scraping framework whose parser can relocate your elements after a site changes its layout, so your scraper survives a redesign. About 87,000 GitHub stars.

The trap: pip install scrapling only installs the parser. Import anything from scrapling.fetchers and you get ModuleNotFoundError. Run pip install "scrapling[fetchers]", then scrapling install. Respect each site's terms.

Try this Monday: point it at one page you check by hand every week, like a competitor's pricing page or a job board, and save the result to a CSV.

Go Deeper

The full walkthrough is in the AI Resource Vault: Turn Any Screenshot Into Working Code. It covers keys, local setup and when hosted is worth $15.

Scrapling and two more free scrapers are in 3 Free Scraping Tools for Claude Code. The public-apis tour is in 1,500+ Free APIs to Add Live Data to Your App.

Every Friday pick comes from the free AI Academy.

Join the free AI Academy →

Free, no card. Guides, tools and the people running them live here.

---

That's the Debrief.

See you Tuesday for the news.

From Drew and The AI Debrief team

---

P.S. Run Screenshot to Code on a real mockup and tell us how close the first pass got. Hit reply, we read every one.

P.P.S. New here, or skipped one? Every past edition is in the archive.