humbleteam

HTML Mockup — Development skill for Claude Code

Development community

Pixel-faithful HTML mockups from a reference screenshot - census first, then render.

How to install HTML Mockup

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

What HTML Mockup does

Pixel-faithful HTML mockups from a reference screenshot - census first, then render.

Alternatives in Development

Screenshot — Capture desktop, app windows, or pixel regions across OS platforms 14.6k ★
Portaljs Add Map — Render a GeoJSON dataset on an interactive Leaflet map in the Views section of a dataset's showcase 2.3k ★
CI Mockup Figure — Read and follow the skill definition 239 ★

README

HTML mockup

**Turns a reference screenshot into a pixel-faithful, single-file HTML mockup for designers and engineers who need a coded prototype that matches the reference exactly, not a generic reinterpretation.**

[![CI](https://img.shields.io/github/actions/workflow/status/humbleteam/html-mockup/validate.yml?branch=main&style=for-the-badge&logo=github&label=CI)](https://github.com/humbleteam/html-mockup/actions/workflows/validate.yml) [![GitHub stars](https://img.shields.io/github/stars/humbleteam/html-mockup?style=for-the-badge&logo=github&color=181717)](https://github.com/humbleteam/html-mockup/stargazers) [![Last commit](https://img.shields.io/github/last-commit/humbleteam/html-mockup?style=for-the-badge&color=339933)](https://github.com/humbleteam/html-mockup/commits/main) [![License](https://img.shields.io/badge/license-MIT-blue?style=for-the-badge)](LICENSE) [![Claude Code](https://img.shields.io/badge/Claude_Code-skill-D97757?style=for-the-badge&logo=anthropic&logoColor=white)](https://github.com/humbleteam/html-mockup/blob/main/SKILL.md)

Paste a screenshot, ask for a coded version, and this Claude Code skill writes a census of the reference - exact palette, photo regions, item counts, component states - before touching a single line of HTML. The census becomes a contract: every value in it has to appear in the render, or the render is wrong. That one rule is what separates a mockup that matches a reference from a mockup that just resembles one.