Screenshot to HTML

Replicate a UI screenshot/image/mockup into a high-fidelity, self-contained HTML page. Faithful image-to-HTML / screenshot-to-code cloning that matches the RENDERED result (not copied computed numbers) through a render -> screenshot -> compare -> refine loop using the local Chrome. Use whenever the user gives an image/screenshot/mockup/Figma export and wants HTML/CSS (plain or Tailwind), or asks to "复刻 / 还原 / clone / recreate / turn this design into a webpage".

16 stars 6 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add sevzq/screenshot-to-html --skill screenshot-to-html

Manual install

git clone --depth 1 https://github.com/sevzq/screenshot-to-html.git /tmp/screenshot-to-html
mkdir -p ~/.claude/skills
cp -r /tmp/screenshot-to-html/. ~/.claude/skills/screenshot-to-html

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# screenshot-to-html — Screenshot to High-Fidelity HTML

Turn a UI image into a clean, self-contained HTML page whose **rendered output
matches the target image**. Respond to the user in their language (they often
write Chinese); keep chat replies short and let the work happen in files.

## Core principle: replicate the RENDERED state, not the COMPUTED state

The target image is the ground truth of the final **rendered pixels**. Reproduce
that, not a mechanical transcription of per-element values.

- **Computed-state cloning (do NOT do this).** Eyedropper every hex, "measure"
  pixel coordinates/sizes, and paste `getComputedStyle`-style numbers into
  absolute-positioned divs. Result: magic-number soup, non-semantic, not
  responsive, brittle — and small extraction errors compound so it looks *worse*.
- **Rendered-state cloning (DO this).** Read the design like a developer: infer
  semantic structure, a small set of **design tokens** (palette, type scale,
  spacing rhythm, radii, shadows), and **layout intent** (flex/grid). Build it,
  then **render your code, screenshot it, and compare against the target**, and
  iterate. Optimize "does my render look like the target," goal: `render(code) ≈ target`.

This is why the workflow is a feedback loop, not a one-shot dump.

## Workflow

Copy this checklist and track progress:

Read the full skill on GitHub

Details

Skill name: screenshot-to-html
Repository: sevzq/screenshot-to-html
License: MIT
Repo updated: 14 June 2026

FAQ

What does the Screenshot to HTML skill do?

How do I install the Screenshot to HTML skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add sevzq/screenshot-to-html --skill screenshot-to-html. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Screenshot to HTML popular?

It lives in sevzq/screenshot-to-html, which has 16 GitHub stars and 6 forks.

Related skills

Web Motion

Schmandarine/web-motion-skill

Closes the agentic coding loop for web animation. Lets Claude scroll the user's page while recording it (Playwright), extract frames, build a labelled contact sheet, and reason about timing/easing/trajectory frame-by-frame — plus motion design principles (Disney's 12, adapted for web, GSAP, CSS, scroll input) to name and fix what's wrong. Use whenever the user wants to add, improve, debug, or review any animation — scroll effects, transitions, hover states, entrance/exit, loading states, micro-interactions. Trigger even if the user doesn't say "animation" but describes something moving, appear

Frontend & Design

Apple Design System

rukkiecodes/claude-apple-design-system

Apple-inspired UI/UX design language (from getdesign.md/apple) as adapted into a production app. Use when building, restyling, or reviewing any UI — screens, components, buttons, headers, alerts, sheets, cards, forms, typography, color, or spacing — so the result matches this Apple design language: photography-first, a single blue accent, pill CTAs, no chrome shadows, and a strict weight ladder. Trigger on "design a screen", "style this component", "make it look Apple / like QueenSkiilia", "build the UI", or "review my UI for design consistency".

Frontend & Design

Find Domain

paveldevyatov/ai-domain-name-generator

AI domain name generator, domain finder and domain availability checker — brainstorms brandable names and domain hacks for a project, then checks which are really free at the registries (RDAP and whois), honest about zones it can't verify. Use when the user wants to find, brainstorm, generate or check a domain name, asks whether a domain like X.com is available or taken, wants domain hacks (bit.ly-style names), or needs a brand or product name with a free domain for a project, startup or app.

Frontend & Design

Typescript React Nextjs Patterns

leejpsd/typescript-react-nextjs-patterns

Production-grade TypeScript reference for React & Next.js frontend development. Covers type narrowing, component Props, generic hooks, discriminated unions, as const, satisfies, Zod validation, TanStack Query, server/client boundaries, forms, state management, performance, accessibility, debugging, and code review. Use when the user works with TypeScript in React or Next.js: type errors, Props design, generics, API typing, SSR/CSR boundaries, hydration issues, form validation, state management, performance, or code review. Also use for "how should I type this?", "why does this type error happe

Frontend & Design

Html2elementor

dudaster/html2elementor

Convert HTML+CSS into Elementor JSON that imports into WordPress. Always use this skill whenever the user has HTML/CSS (pasted, file, URL, or AI-generated) and wants it to end up as an Elementor page — phrases like "convert HTML to Elementor", "import this landing into WordPress as Elementor", "make this Tailwind mockup an Elementor page", "turn my markup into Elementor JSON", "recreate this site in Elementor", or any variant. Do not try to produce Elementor JSON by hand — Elementor has non-obvious quirks (shared system-color globals that break previous pages, lazy-load hiding backgrounds, wid

Frontend & Design

Components

AnayDhawan/Components

Use when building a frontend and the user wants a distinctive / animated / "wow" UI element in React + Tailwind - e.g. a laptop-opening-on-scroll, 3D tilt card, spotlight hero, animated beams/background, marquee, bento grid, interactive globe, meteor/particle background, shimmer button, or scroll/reveal motion. Fetches the showpiece component LIVE at build time from code libraries (Aceternity, Magic UI, Cult UI, ReactBits, 21st.dev) via their shadcn registry command (or WebFetch fallback), then adapts it to brand tokens. Also covers plain components (button, form, modal, table, etc.) as a fall

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.