sevzq

Screenshot To HTML — AI skill for Claude Code

AI community

Clone any UI screenshot into one faithful, interactive single-file HTML page — an AI coding-agent skill.

How to install Screenshot To HTML

This entry records only its repository, not the path inside it, so there is no exact command to give. Open sevzq/screenshot-to-html and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Screenshot To HTML does

Clone any UI screenshot into one faithful, interactive single-file HTML page — an AI coding-agent skill.

Alternatives in AI

Claude Skill Aso Appstore Screenshots — A Claude Code skill that generates high-converting App Store screenshots for your iOS app 1.2k ★
Claude Replay — Convert AI coding agent sessions (Claude Code, Cursor, Codex, Gemini, OpenCode) into self-contained, embeddabl 644 ★
Agent Kernel — Minimal kernel to make any AI coding agent stateful 334 ★

README

🌐 English · 中文

screenshot-to-html

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

[![skills.sh Compatible](https://img.shields.io/badge/skills.sh-Compatible-22c55e)](https://skills.sh) [![Agent-Agnostic](https://img.shields.io/badge/agent-agnostic-7c3aed)](#install) [![Verified in real Chrome](https://img.shields.io/badge/interactive-verified-000000)](#under-the-hood) [![License: MIT](https://img.shields.io/badge/License-MIT-3da639.svg)](LICENSE) [![GitHub stars](https://img.shields.io/github/stars/sevzq/screenshot-to-html?style=social)](https://github.com/sevzq/screenshot-to-html/stargazers)

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](#gallery) · [Install](#install) · [How it works](#how-it-works) · [Why it's different](#why-its-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 C