Claude Code Clone Website Skill — Design skill for Claude Code

Clone Any Website With Claude Code: the Clone Website Skill

A Claude Code skill that reverse-engineers a live web page through your own Chrome browser and rebuilds it pixel-perfect as a Vite, React, TypeScript and Tailwind project.

It is not a screenshot-to-code guess. It reads the DOM, extracts computed CSS, downloads the real assets, records how every section behaves, writes a spec per component, dispatches parallel builder agents against those specs, and then checks itself against the original, side by side.


I built this over a couple hundred hours and a dozen client landing pages. The full story, from twelve years of WordPress through twenty Lovable projects to this, is at [rodrigonask.com/clone-website-skill](https://rodrigonask.com/clone-website-skill).

What makes it different

• Your own Chrome, not a headless browser. It drives the browser you are already logged into, through Playwriter. Pages behind logins, cookie walls and lazy-loaded UIs work because you are looking at them.
• Behavior, not just pixels. A mandatory interaction sweep: scroll, click, hover, three viewports. It decides whether a section is scroll-driven or click-driven before anything gets built, because getting that wrong is a rewrite.
• One spec, one builder, per component. Every section gets a spec file with exact getComputedStyle values, states, assets and verbatim copy. Every builder runs in its own git worktree and must pass a type check. A spec over about 150 lines gets split.
• Runs inside a goal. Ships with a ready-to-paste /goal prompt: success criteria, an iteration loop, two auditor agents per round (one on Fable, one on Opus) told to praise nothing, and a handback exit so it cannot loop forever.
• Field notes from real incidents. The favicon of the wrong company, the deploy that was not a dep