{"slug": "show-hn-copy-any-website-pixel-perfect", "title": "Show HN: Copy any website pixel perfect", "summary": "HarKro753 released clone, a Claude Code plugin and Chrome extension that captures a live website's screenshot, DOM, and computed styles, then rebuilds it as HTML or React (shadcn/ui) components, verifying the clone pixel-by-pixel against the original screenshot via a measuring oracle. The tool scores every DOM box against a calibrated floor and reports systematic causes for failures, aiming to make UI cloning drift measurable. The project is available as a plugin from the HarKro753/claude-copy repository.", "body_md": "Capture a real website, rebuild it, and prove the rebuild is correct — one pixel at a time.\n\n`clone`\n\nis a design-cloning workshop. A Chrome extension captures a live site's screenshot, DOM, and computed styles; a Claude Code plugin turns that capture into a clone that is verified **pixel-by-pixel against the original screenshot** by a measuring oracle. No \"looks close enough\" — every region is scored, and the clone isn't done until the diff is under threshold.\n\n**A real oracle, not eyeballing.** The clone is rendered in headless Chromium at the capture's exact DPR, cropped to the reference's exact size, and diffed per-pixel. Every DOM box gets a match score against a calibrated floor.**Two targets, one engine.**`/clone:html`\n\nemits a static`page.html`\n\n;`/clone:react`\n\nemits shadcn/ui components with the site's captured states (hover, focus, dialogs) as real props. Same measurement code underneath.**Systematic-cause-first reports.** A 3px sidebar offset that breaks 200 boxes reports as*one*upstream cause, not 200 failures.**Behavior, not just looks.** The React target gets command palettes, focus traps, and keyboard nav from Radix — the things a screenshot can't capture.**Honest by construction.** Fonts are self-hosted and gated (a fallback font fails the run). Icons ship as verified files. Photos become neutral placeholders and are never asserted.\n\nCloning a UI by hand always drifts — spacing creeps, a color is one shade off, a font silently falls back. This project makes drift *measurable*. The capture is ground truth (a real PNG bitmap plus the computed styles that produced it), and the clone is graded against it on every cycle until it passes.\n\nThe example header above is [Doppler](https://doppler.com)'s Team settings page:\n\n| Original | Clone | Pixel diff |\n|---|---|---|\n\nThe pixel diff is mostly dark — matching pixels — with color only where the clone and original disagree (chiefly the deliberately-omitted brand marks). The oracle also annotates every measured region ([ boxes.png](/HarKro753/claude-copy/blob/main/assets/boxes.png)) with the color and geometry it checks. The live clone itself is\n\n[. (Brand marks are deliberately dropped from the clone; see the disclaimer below.)](/HarKro753/claude-copy/blob/main/example/render.html)\n\n`example/render.html`\n\n``` php\ngraph LR\n    A[Chrome extension] -->|ref.png · DOM · computed styles| B[capture folder]\n    B --> C[prep · extract · resolve · cluster]\n    C --> D[author page.html / .tsx]\n    D --> E[check: render → diff → score]\n    E -->|failing boxes| D\n    E -->|0 failing| F[verified clone]\n```\n\n**Capture**— the extension takes a full-page screenshot (one shot, via CDP device-metrics override, not stitched) plus a recursive tree of every node's rect, text, ~50 computed style properties, and its`:hover`\n\n/`:focus`\n\nstates.**Prep / extract / resolve / cluster**— validate the capture, derive a shared design system (`base.css`\n\n, tokens, self-hosted fonts, open-source icon glyphs), and cluster repeated subtrees into components.**Author**— build one route by hand from the extracted`layout.md`\n\n.**Check**— render, diff against the reference, and score every box. Fix, repeat, until zero boxes fall below their floor.\n\nFull architecture: [docs/CODEBASE_MAP.md](/HarKro753/claude-copy/blob/main/docs/CODEBASE_MAP.md) · pipeline design rationale: [docs/PIPELINE_GRAPH.md](/HarKro753/claude-copy/blob/main/docs/PIPELINE_GRAPH.md).\n\n`clone`\n\nis a Claude Code plugin. Install it from this repo's marketplace:\n\n```\n/plugin marketplace add HarKro753/claude-copy\n/plugin install clone@clone-marketplace\n```\n\nEnabling the plugin puts the `clone`\n\nCLI on your Bash PATH and loads the\n`/clone:html`\n\nand `/clone:react`\n\nskills. See [Requirements](#%EF%B8%8F-requirements)\nfor the Python (PIL + Playwright), Node, and Chrome pieces the pipeline needs.\n\nThe capture side is a Chrome MV3 extension in [ capture-extension/](/HarKro753/claude-copy/blob/main/capture-extension),\nloaded unpacked (no Web Store, no account):\n\n- Open\n`chrome://extensions`\n\n. - Toggle\n**Developer mode**(top right). **Load unpacked**→ select the`capture-extension/`\n\nfolder.\n\nThe **copy-website capture** action then appears in your toolbar. It writes a\ncapture folder that `clone prep`\n\nconsumes.\n\nThe plugin puts one CLI on PATH while enabled:\n\n```\nclone prep <session> --target html|react   # target recorded in routes.json\nclone extract                              # layout.md, tree.json, shared/*\nclone resolve                              # fetch/recolor open-source icon glyphs\nclone cluster                              # detect repeated components\nclone init | map | build                   # react target only\nclone check [route]                        # render → diff → score, loop until 0 failing\n```\n\nStatic HTML in one line per phase; React adds `init`\n\n(scaffold + theme), `map`\n\n(shadcn component per node), and `build`\n\n(vite → self-contained `page.html`\n\n).\n\n- Python 3 with\n**PIL** and**Playwright**(Chromium) on the system`python3`\n\n— the oracle. - Node + a package manager for the React target (React + Vite + Tailwind v4 + shadcn/ui).\n- Chrome — load\n`capture-extension/`\n\nas an unpacked Manifest V3 extension. [Claude Code](https://claude.com/claude-code)with the`clone`\n\nplugin enabled (auto-loads from this repo).\n\n```\nassets/               example capture, clone render, pixel diff, annotated boxes, README banner\nexample/              the live static clone (render.html + its fonts/css/svg)\ncapture-extension/    Chrome MV3 capture tool\nskills/clone/         the pipeline plugin (engine/ + html & react targets)\ndocs/                 CODEBASE_MAP.md · PIPELINE_GRAPH.md\n```\n\nThe engine is `skills/clone/engine/`\n\n— one module per concern, with the two artifacts behind a shared `Target`\n\ninterface, so adding a third is one file in `targets/`\n\n, not a fork. After touching the engine, run all four test files:\n\n```\ncd skills/clone/tests\npython3 -m pytest test_engine.py test_react.py test_hook.py test_e2e.py\n```\n\nDoppler is used **purely as a technical fixture** to demonstrate the pipeline. This project is not affiliated with, endorsed by, or sponsored by Doppler; all trademarks and brand marks belong to their respective owners. Clones are rendered locally for measurement only and are never deployed as live sites.\n\n[MIT](/HarKro753/claude-copy/blob/main/LICENSE) © Harro Krog. See [CONTRIBUTING](/HarKro753/claude-copy/blob/main/CONTRIBUTING.md), [Code of Conduct](/HarKro753/claude-copy/blob/main/CODE_OF_CONDUCT.md), and [Security Policy](/HarKro753/claude-copy/blob/main/SECURITY.md).", "url": "https://wpnews.pro/news/show-hn-copy-any-website-pixel-perfect", "canonical_source": "https://github.com/HarKro753/claude-copy", "published_at": "2026-08-01 21:31:40+00:00", "updated_at": "2026-08-01 21:52:23.306119+00:00", "lang": "en", "topics": ["developer-tools", "ai-tools", "computer-vision"], "entities": ["HarKro753", "Claude Code", "Chrome", "Doppler", "Radix", "Playwright", "PIL"], "alternates": {"html": "https://wpnews.pro/news/show-hn-copy-any-website-pixel-perfect", "markdown": "https://wpnews.pro/news/show-hn-copy-any-website-pixel-perfect.md", "text": "https://wpnews.pro/news/show-hn-copy-any-website-pixel-perfect.txt", "jsonld": "https://wpnews.pro/news/show-hn-copy-any-website-pixel-perfect.jsonld"}}