rodrigonask

Claude Code Clone Website Skill — Design skill for Claude Code

Design community

Clone any website pixel-perfect with Claude Code.

How to install Claude Code Clone Website Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open rodrigonask/claude-code-clone-website-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Claude Code Clone Website Skill does

Clone any website pixel-perfect with Claude Code. A Claude Code skill that reverse-engineers a live page through your own Chrome (Playwriter) and rebuilds it in React + Tailwind, with a ready-to-run /goal prompt.

Alternatives in Design

Figma Implement Design — Translate Figma designs into production-ready code with pixel-perfect accuracy 14.6k ★
Extract — Design System & Product Reverse-Engineering - Extract tokens, components, architecture, and PRDs from codebase 2.8k ★
Taste Skill — Claude Code skill — reverse-engineer any website's design taste: concrete tokens + opinionated trade-offs (WHY 320 ★

README

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.

![Clone Website skill for Claude Code: Recon, Foundation, Spec and build, Assembly, Visual QA](docs/cover.webp)

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