Show HN: Copy any website pixel perfect 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. Capture a real website, rebuild it, and prove the rebuild is correct — one pixel at a time. clone is 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. 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 emits a static page.html ; /clone:react emits 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. Cloning 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. The example header above is Doppler https://doppler.com 's Team settings page: | Original | Clone | Pixel diff | |---|---|---| The 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 . Brand marks are deliberately dropped from the clone; see the disclaimer below. /HarKro753/claude-copy/blob/main/example/render.html example/render.html php graph LR A Chrome extension -- |ref.png · DOM · computed styles| B capture folder B -- C prep · extract · resolve · cluster C -- D author page.html / .tsx D -- E check: render → diff → score E -- |failing boxes| D E -- |0 failing| F verified clone 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 / :focus states. Prep / extract / resolve / cluster — validate the capture, derive a shared design system base.css , 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 . Check — render, diff against the reference, and score every box. Fix, repeat, until zero boxes fall below their floor. Full 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 . clone is a Claude Code plugin. Install it from this repo's marketplace: /plugin marketplace add HarKro753/claude-copy /plugin install clone@clone-marketplace Enabling the plugin puts the clone CLI on your Bash PATH and loads the /clone:html and /clone:react skills. See Requirements %EF%B8%8F-requirements for the Python PIL + Playwright , Node, and Chrome pieces the pipeline needs. The capture side is a Chrome MV3 extension in capture-extension/ /HarKro753/claude-copy/blob/main/capture-extension , loaded unpacked no Web Store, no account : - Open chrome://extensions . - Toggle Developer mode top right . Load unpacked → select the capture-extension/ folder. The copy-website capture action then appears in your toolbar. It writes a capture folder that clone prep consumes. The plugin puts one CLI on PATH while enabled: clone prep