image

clone:image — one picture → one verified HTML page

In: a single image file (whatever the user attached). Out: apps/<name>/index.html, a self-contained page that renders to look like the image, checked by rendering it at the image's exact pixel size and comparing the two pictures.

There is no DOM here and no per-box oracle. The entire check is does my render look like the picture — a whole-image compare you read with your own eyes and iterate against. That is enough for flat graphics, which is what this is for.

Setup

mkdir -p apps/<name>
cp <the image> apps/<name>/ref.png

Read ref.png and note its pixel size (also python3 -c "from PIL import Image; print(Image.open('apps/<name>/ref.png').size)"). That size is your canvas.

Author apps/<name>/index.html

Start from the template — copy template.html (next to this file) to apps/<name>/index.html and set --w / --h to the image's pixel size. It is one self-contained file (inline <style>, no external requests, no build) whose job is a fixed design canvas that fits any screen: you author at exact pixels inside .stage, and a five-line script scales the stage to fit whatever viewport it is opened in — a phone, a laptop, a 4K monitor — with no scrollbar. render.py sets the viewport to the canvas size, so the render is always at scale 1 and stays pixel-exact; the scaling only ever kicks in for a humqan viewer. Do not size the body or drop the wrapper — a raw fixed-px body overflows every screen smaller than the image, which is the whole thing this avoids.

• Author inside .stage, in px. Everything is position:absolute (or flow) in CSS px equal to the image's pixels. .stage is already the exact canvas.
• Rebuild, don't slice. Text is text, boxes are divs, highlights are background colours, gradients are CSS gradients. Never embed a crop of ref.png as an <img> — if the render only matches because it contains the reference, you have cloned nothing.
• Measure the geometry, don't guess it. Eyeballing positions is how a clone ends up subtly wrong everywhere. Read the pixels: a coloured block's exact rect, a rule's y and width, the background colour — a few lines of PIL over ref.png gives you real numbers to author against. On the confidence poster, scanning for bright-yellow rows gave every highlight box to the pixel; that is the difference between "roughly there" and right.
• Fonts: identify by side-by-side, and webfonts DO load here. Do not settle for a generic stack — a wrong font makes every letter width wrong and the whole thing reads off. Crop the reference word, render 4–6 candidates at matched size, screenshot, and look: is it a slab serif (flat serifs — Bitter, Roboto Slab), an old-style serif (pointed, some contrast — Noto Serif), a grotesque? Pick the match, load it with a Google Fonts <link> (they load in this headless renderer — verified), and weight it to match (these graphics run heavy, 700–900). Fall back to a system stack only when nothing fits.
• Rebuild texture in CSS too. Paper grain, noise, a gradient wash — an SVG feTurbulence data-URI background is real texture, not a slice of the reference. A flat fill where the original has grain is a visible miss.
• What CSS genuinely can't rebuild is the ONE exception. A photograph or a detailed illustration (the man at the podium, a product photo) is not reconstructable. If it sits on the page background (no frame), just leave the background showing through and say the illustration is omitted — a grey slab is its own wrong. If it has a distinct frame/fill, a neutral block in its dominant colour is fine. Either way, do not grind the loop trying to converge on it.