claude-copy

Claude Copy: Design Cloning Workshop

Capture a real website, rebuild it, and verify its accuracy—one pixel at a time.

Claude Copy is a powerful design-cloning workshop that leverages a Chrome extension to capture a live website's screenshot, Document Object Model (DOM) structure, and computed styles. By utilizing the Claude Code plugin, the captured data is transformed into an accurate clone that is meticulously verified pixel-by-pixel against the original screenshot using a sophisticated measuring oracle. This process ensures that no detail is overlooked; clones are not considered complete until every discrepancy falls below an acceptable threshold.

🌟 Key Features

• Precision Verification: Each clone is rendered in headless Chromium precisely at the captured device pixel ratio (DPR) and cropped to match the reference's dimensions, with pixel-by-pixel comparisons guaranteeing accuracy. Every DOM box is matched against a calibrated baseline score.
• Dual Output Targets: The /clone:html endpoint generates a static page.html, while the /clone:react endpoint creates shadcn/ui components reflecting the website's states (hover, focus, dialogs) as real props, all while utilizing the same underlying measurement code.
• Efficient Reporting: Systematic reporting ensures that issues such as a 3px offset are documented as a single upstream cause rather than numerous individual failures.
• Enhanced Interactivity: For React targets, functionality such as command palettes, focus traps, and keyboard navigation come from Radix, capturing aspects of behavior that screenshots alone cannot.
• Integrity by Design: All fonts are self-hosted and gated, ensuring that any fallback font invalidates the run. Icons are delivered as verified files, while photographs are represented as neutral placeholders, maintaining integrity throughout the cloning process.

ℹ️ Overview

Manual UI cloning often results in drift—tiny misalignments, color variations, and silent font changes. Claude Copy makes this drift quantifiable, with the capture serving as the ground truth, featuring a real PNG bitmap along with the computed styles at play. The clone undergoes continuous evaluation against this standard until it meets the prescribed criteria for accuracy.

Example: The header image demonstrates the results for Doppler's Team settings page, showing the original, the clone, and the pixel diff which highlights any discrepancies.

Original	Clone	Pixel Diff

The pixel diff reveals predominantly dark areas—indicating matching pixels—with color highlighting where the clone differs from the original. Moreover, the oracle annotates each measured region for transparency.

Workflow Overview

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]

1. Capture Process: The Chrome extension captures a full-page screenshot combined with a tree structure detailing each node's metrics and around fifty key computed style properties, including hover and focus states.
2. Preparation and Clustering: The capture is validated to derive a shared design system, clustering repetitive components for streamlined authoring.
3. Authoring: One page is constructed manually from the extracted layout file.
4. Verification: The clone is rendered, diffed against the original, and scored. The cycle continues until all discrepancies are resolved.

For detailed architecture, please see CODEBASE_MAP.md and PIPELINE_GRAPH.md.

🚀 Usage

The clone plugin provides a command-line interface (CLI) to facilitate the cloning process. Here are key command examples:

clone prep <session> --target html|react   # Define the output target
clone extract                              # Create layout.md and tree.json
clone resolve                              # Fetch open-source icon glyphs
clone cluster                              # Detect repeated components
clone check [route]                        # Render and validate results, until perfection achieved

⚠️ Disclaimer

Doppler is employed solely as an illustrative framework for this project, which maintains no affiliation, endorsement, or sponsorship from Doppler. All trademarks belong to their respective owners, and rendered clones are intended for local measurement purposes only, rather than deployment as live sites.

For a thorough exploration of the project and its capabilities, delve into the repository and explore the potential for achieving precise design cloning.