html-mockuplisted

Builds a pixel-faithful single-file HTML mockup from a reference screenshot by counting colors, photos, items, and states before writing markup. Use when a user says "turn this screenshot into HTML", "build a mockup that matches this design", "code this screen exactly", or pastes an image and asks for a coded version. Do not use for layout exploration with no reference image - use ascii-wireframes instead.
humbleteam/html-mockup · ★ 0 · Web & Frontend · score 70

Install: claude install-skill humbleteam/html-mockup

# HTML mockup Turn a reference screenshot, URL, or design description into one self-contained HTML file that matches the reference exactly - same colors, same item counts, same component states. The method is count-then-render: write a census of what the reference contains before writing a single line of markup, then treat that census as a contract the render must satisfy. ## When to run this Trigger on: a pasted screenshot with a request to code it, "build/code/turn this into HTML", "match this reference", "make a working mockup of this screen", a Dribbble/Figma screenshot with a fidelity request. Skip and say so if: the request has no reference image and no detailed description to work from - ask for one first (see Edge cases). For early-stage layout exploration with no reference to match, point the user at the `ascii-wireframes` skill instead - this skill's job is fidelity to a known reference, not generating new layout ideas. ## Step 1: Reference census (mandatory, before any markup) Study the reference image carefully. Before writing `<!doctype html>` or any CSS, write this exact comment block as the literal first lines inside the HTML file: ```html <!-- CENSUS: PALETTE: bg=#___ text=#___ accent=#___ secondary=#___ [every distinct color, exact hex] TEMPERATURE: warm|cool|neutral [warm = amber/olive/tan/gold tones; cool = blue/teal/slate] PHOTOS: [count] regions - [list each: "hero portrait 390x500", "food circle 60x60 x3", etc.] ITEMS PER SECTION: [exact c