_{🌐 English · 中文}

screenshot-to-html

Drop a screenshot — get back a pixel-faithful, fully interactive single-file HTML page.

An AI coding-agent skill that rebuilds any UI screenshot as one clean, self-contained, interactive HTML file. Not a one-shot guess — a render → screenshot → compare → refine loop in real Chrome, until render(code) ≈ target. Then it wires up real hover / focus / click states and verifies them headless.

npx skills add sevzq/screenshot-to-html

Works in Cursor · Claude Code · Codex · Windsurf · Copilot — and 40+ agents.

Gallery · Install · How it works · Why it's different

---

_{▲ Install the skill, open Claude Code (or Cursor / Codex), paste a screenshot, type one line — the skill writes a single output.html and verifies the interactions in real Chrome.  ·  Hi-res MP4}

---

Gallery

Every replica below is one self-contained HTML file — inline CSS/JS, no framework, no build step — and passes node scripts/shot.mjs --verify. Each one is a side-by-side: real screenshot on the left, HTML replica on the right. The interactive app UIs are also recorded live in See them in action at the end. Full sources in examples/.

Featured — full app UIs, fully interactive

ElevenLabs — Voices library

A light Voices / Explore workspace: sidebar, Explore / My Voices tabs, filter chips, a 3×2 trending grid, a drag-snap "Handpicked" carousel, and the weekly spotlight. Voice avatars are layered CSS gradients and icons are inline SVG; only the card artworks are cropped — and it's all one self-contained HTML file. Source · HTML replica · ▶ Watch it live

Spotify — web player (dark)

A dark three-pane player; every cover is real imagery cropped from the source, all icons inline SVG. Rows reveal a play glyph on hover, the transport (play / shuffle / repeat) toggles, the now-playing panel collapses, and volume is a real slider. Source · HTML replica · ▶ Watch it live

Airbnb — iOS app (mobile)

Authored at 393px @3x in a decorative iPhone frame. Every listing card is a swipeable photo carousel (drag, velocity snap, dot indicators, hover arrows), the hearts toggle with a tactile pop, and the bottom tab bar switches screens — all with zero dependencies. Source · HTML replica · ▶ Watch it live

More examples

Cloudflare — landing page

Giant black-and-orange headline and full nav in pure CSS; only the geodesic sphere is cropped from the source. Both CTAs and the "Under attack?" button are real controls with hover/focus. Source · HTML replica

Modal — landing page (dark / neon)

A pure-black hero with a spring-green accent; the glowing cube is screen-blended onto the black so there's no seam, and the customer logo strip is real imagery. Source · HTML replica

Clay — landing page (colorful)

A cream hero on white with a huge display headline; four clay sculptures are multiply-blended across the panel edge, and the 20-brand logo wall is real imagery. Source · HTML replica

Stripe — landing page

The diagonal gradient and multiply-blended headline are pure CSS; only the floating checkout/dashboard cluster is cropped. The nav, announcement pill, and a working email field + Start-now button are all real controls. Source · HTML replica

Tesla — charging screen (iOS)

Authored at 393px @3x in a decorative iPhone frame; the Model 3 render is color-matched to the screen so it's seamless. The charge-limit slider is a real range input that updates its green fill. Source · HTML replica

Stripe — dashboard

Rebuilt entirely as code (inline-SVG charts, CSS bars), zero image crops. The sidebar nav, Test-mode switch, and date/period pills all respond, and rows highlight on hover. Source · HTML replica

Linear — landing page

Hand-built HTML/CSS; only the product-UI card is lifted from the source. Nav + Sign-up have hover/focus and in-page links smooth-scroll. Source · HTML replica

More replicas — each with its source screenshot, single-file output.html, and a side-by-side comparison.webp — live in examples/. New ones welcome via PR.

See them in action

All three featured replicas are single, self-contained HTML files — here they are being used, recorded straight from the live pages (zero dependencies, zero edits):

ElevenLabs — Voices library

Spotify — web player (dark)

Airbnb — iOS app (mobile)

   

_{Original screenshot (left) · live HTML replica (right) — drag a card to swipe, tap a heart, switch tabs.}

Like what you see? ⭐ Star the repo — it helps others find it.

Why it's different

Most "screenshot to code" tools generate once and stop. screenshot-to-html optimizes what you actually see — and what you can actually click:

• Pixel-faithful by loop, not luck — it screenshots its own output with real Chrome and diffs against your image region-by-region (layout → spacing → color → type → polish), refining until it matches. Semantic HTML + design tokens, not absolute-positioned magic numbers.
• Actually interactive — and verified — real <button> / <a>, hover / focus / active states, working tabs, nav, and carousels where the screenshot implies them. Audited with shot.mjs --verify, which fails the build on dead controls.
• One self-contained file — inline CSS/JS, zero dependencies, zero build step. Open it anywhere.
• Sharp assets, automatically — every image slot is filled by what looks best: a crisp crop from your screenshot, an official logo SVG, or a real stock photo — never a blurry stand-in or an AI-slop silhouette.
• Real size & responsive — authored at the true design width with fluid units (clamp() / max-width), so it opens correctly at 100% zoom and adapts. Never a fixed miniature.

How it works

Phase 0  Setup        — inputs, stack, and the true design width / scale
Phase 1  Read         — design tokens, layout intent, exact text
Phase 2  Build        — a semantic, self-contained first draft
Phase 3  Loop         — shot.mjs → compare to target → fix   (repeat 2–4×)
Phase 4  Interact     — real hover / focus / active states, then --verify
Phase 5  Final checks — responsive, exact text, fidelity
Phase 6  Motion       — optional, only if you ask

The render step uses scripts/shot.mjs, which drives your installed Chrome via playwright-core (no browser download). The same script audits interactivity (--verify) and captures hover / focus / open states (--hover / --focus / --click / --states).

Install

npx skills (recommended)

Auto-detects your agent (Cursor, Claude Code, Codex, Windsurf, Copilot, 40+):

npx skills add sevzq/screenshot-to-html

Cursor

Settings → Rules → Add Rule → Remote Rule (GitHub) → sevzq/screenshot-to-html, or just use npx skills add above.

Other agents (Codex, OpenCode, Gemini CLI, …)

Point the agent at this repo and tell it to use the skill, starting from SKILL.md:

https://github.com/sevzq/screenshot-to-html

Manual install (clone into your agent's skills directory)

The repo root is the skill:

Agent	Skills directory
Claude Code	~/.claude/skills/
Cursor	~/.cursor/skills/
OpenAI Codex	~/.codex/skills/
OpenCode	~/.config/opencode/skills/

git clone https://github.com/sevzq/screenshot-to-html.git ~/.cursor/skills/screenshot-to-html

The render/crop scripts need Node deps once (from the repo root): npm i installs playwright-core; add sharp for cropping with npm i -D sharp.

Usage

Point your agent at a screenshot and ask it to replicate:

Clone this screenshot into HTML:  ./design.png

It reads the design, builds a draft, then loops (render → compare → refine), wires up the interactions, and hands you a single self-contained HTML file plus a side-by-side comparison.

Under the hood

• Verified interactivity. node scripts/shot.mjs --in page.html --verify audits the page for dead controls (clickable-looking <div>s), missing cursor: pointer, and absent :hover / :focus rules — and reports WARN until they're fixed. Interactivity is treated as part of fidelity, not an afterthought.
• Quality-first assets (automatic). Each image slot is resolved without asking you, by what looks sharpest and most specific: assets you supplied → official brand SVG/logos → a crisp crop from the source (crop.mjs) → a real Unsplash / picsum.photos photo → placehold.co as a last resort.
• Motion is opt-in. Baseline interactivity (hover / focus / active states) ships by default, but animation is only added when you explicitly ask — Phase 6 layers in restrained, self-contained GSAP via CDN. See references/animation.md.

Star history

Contributing

Issues and PRs welcome — new example replicas especially. See AGENTS.md for the skill structure and authoring conventions.

License

MIT © SevenZhang

Example screenshots are real app UIs used for replication demos only; they belong to their respective owners.