design-to-pixellisted

Rebuild a website (or a single section) from a reference design image so it matches measurably, not approximately — by measuring the reference to derive a numeric spec (viewport, container width, section heights, font sizes, colours, corner radii, gaps), building section by section, then measuring the built DOM and diffing it against the reference until every delta is within a few pixels. Use this skill whenever someone supplies a screenshot, mockup, Figma export, theme demo, or competitor page and wants it "rebuilt", "cloned", "matched", "recreated", "converted to HTML/CSS", or asks for it to look "exactly like", "1:1", "pixel perfect", or "100% the same" — and also when they hand over a design image section by section, or ask you to check whether a build matches a reference. Reach for it even when they just say "make it look like this image", because the measuring loop is what separates a real match from a rough approximation.
abdul977/muahib-skills · ★ 0 · Web & Frontend · score 60

Install: claude install-skill abdul977/muahib-skills

# Design image → pixel-accurate build ## The core idea A reference screenshot is **data, not inspiration**. Eyeballing produces an endless "a bit bigger… now too big" loop with no finish line. Measuring converts the job into a question that terminates: *is the delta under 5px?* So the loop is always: **measure the reference → build to those numbers → measure your own build → diff → fix** Two habits make this work: - **Numbers before pixels.** Derive a spec first. Don't start writing CSS from vibes. - **Verify your own output the same way.** Read your build's DOM with `getBoundingClientRect()` and print a `REF | MINE | DELTA` table. Your opinion of whether it matches is not evidence; the table is. `scripts/refmeasure.py` does the reference-side measuring and `scripts/measure_build.js` does the build-side. Use them rather than rewriting this analysis each time. --- ## Phase 1 — Establish the coordinate system Nothing else is meaningful until you know what scale the reference is at. **Use the original image.** If someone sends an AI-upscaled or "enhanced" copy, measure the original instead. Upscales reframe the content and invent detail — trusting one can put every vertical position out by tens of pixels while looking sharper and more convincing. **Find the mockup's real edges.** Promo images often paste a desktop screenshot beside a narrow mobile column, or add padding. Measure the desktop region only. **Derive the container and the capture viewport.** Take the