Website Cloner Skill

A category of Claude Code skill that clones a live website by analyzing its DOM/CSS structure rather than approximating from a screenshot.

What it is (compiled)

The page documents a pattern, not a single pinned artifact. The originating bookmark — an X post by @om_patel5 — described a one-prompt-install Claude Code skill that reverse-engineers a live site into reproducible code. The specific repo behind that post is not uniquely identifiable, but the pattern is real and shipping across several public implementations: andreasskyt/claude-website-cloner-skill ("clone any live website into a pixel-faithful, self-contained static site — a Claude Code skill"), chentianxiong123/webclone-skill ("DOM extraction to Vue 3 generation pipeline; Python Playwright + 12 JS extraction scripts"), and JqckWW/website-cloner. Source: GitHub search "website cloner skill", https://github.com/search?q=website+cloner+skill, 2026-06-13

JCodesMore/ai-website-cloner-template is now the strongest concrete repo signal for this pattern. Its README describes a Next.js 16 / React 19 / Tailwind v4 / shadcn template that runs /clone-website, performs reconnaissance, extracts design tokens and assets, writes component specs with computed CSS and responsive states, dispatches builder agents in git worktrees, then assembles and visually diffs the result. GitHub API reported 21,276 stars on 2026-06-26 and 24,635 stars / 3,487 forks on 2026-07-02; default branch master was still at 8dd9cb47dde0d49fec06ee1d69bedd04840f3c95, pushed 2026-06-01. Source: raw/github/JCodesMore_ai-website-cloner-template-repo-2026-06-26.json; GitHub README, 2026-06-26; Source: GitHub API, 2026-07-02

Approach

The durable insight is structural analysis over visual approximation. Screenshot-based cloning loses information at the pixel-to-code boundary — spacing, responsive breakpoints, animation states, and component composition all degrade. Driving a real browser (Playwright/CDP) to read the live DOM, computed CSS, and component hierarchy preserves them, then generates code that matches the original. The public implementations confirm this: they pair browser-driven DOM extraction with code generation rather than feeding a model an image. Source: GitHub chentianxiong123/webclone-skill, https://github.com/chentianxiong123/webclone-skill, 2026-06-13

The reviewed video artifact supports that framing: it compares original vs clone frames across hero, app-connection, scheduling, workflow, and CTA sections, then shows Claude Code running the cloner command against instruct.ai. The visible result is a responsive, multi-section reproduction rather than a single static screenshot. Source: X/@om_patel5, 2026-03-26

This mirrors Frontend and Design Skills (generate a design image first, then implement to match) but attacks the problem from the opposite direction: existing site → code, vs. image → code. It depends on the same execution layer as Browser Testing Skills and the Browser Testing Skills skill to actually load and inspect the page. Source: compiled from X post + wiki context

Local workflow

Kevin's earlier local cloner note documented the reusable workflow inside ~/Documents/GitHub/kevin-wiki/cloner/: clone a reference site, inspect the generated globals.css, extract design tokens, and selectively fold useful tokens into Design System. That operational detail belongs here rather than in a second website-cloner page. Source: Website Cloner, 2026-04-06

The durable part is token extraction, not keeping a pile of cloned projects in the wiki checkout. scripts/extract-tokens.ts reads CSS custom properties, typography, spacing, radii, and shadows from a clone and can emit JSON, write a token file, or update the design-system page. Treat the output as source material: compare against Design Tokens, adopt only the tokens that improve the system, and record the adoption path in the wiki. Source: scripts/extract-tokens.ts

Old reset instructions recommended git stash and branch switching inside the cloner directory. That is obsolete for this repo because unowned uncommitted work can be hidden or lost in shared agent sessions. If a clone matters, keep it in an isolated worktree or commit it intentionally; otherwise treat it as disposable generated output. Source: AGENTS.md Git Safety, 2026-06-17

Signal strength

4,023 likes and 8,511 bookmarks on the source post (2.1× bookmark-to-like ratio — a strong "save for later" signal). Source: X/@om_patel5, 2026-03-26

Stack fit (Kevin) — situational

• Design-to-code is tangential to Kevin's agent-infra work, but the DOM-over-pixels technique is the reusable part — relevant when reproducing a reference UI in the kevin-wiki viewer or a Dedalus surface.
• Reuse the existing browser layer. Any clone skill Kevin adopts should ride Browser Testing Skills / Browser Testing Skills rather than introduce a fourth browser stack — the registry already routes browser work by test type.
• Vet before install. "One-prompt install" skills from unverified authors must pass the three-gate chain (Brin → skill-auditor → reputation) per AGENTS.md before they touch ~/.cursor/skills.

---

Timeline

• 2026-07-02 | Deep-reviewed the original video artifact and refreshed the strongest concrete repo signal. The demo shows original-vs-clone comparisons across multiple responsive sections plus Claude Code command execution; JCodesMore/ai-website-cloner-template now reports 24,635 stars, 3,487 forks, and default-branch SHA 8dd9cb4. Still no active install because the source post's exact one-prompt skill remains unpinned and external skills must pass the Brin -> skill-auditor -> reputation chain first. Source: X/@om_patel5, 2026-03-26; Source: GitHub API, 2026-07-02
• 2026-06-26 | Added JCodesMore/ai-website-cloner-template as the strongest current concrete implementation: /clone-website, token/asset extraction, computed CSS component specs, parallel worktree builders, and visual diff QA. Source: raw/github/JCodesMore_ai-website-cloner-template-repo-2026-06-26.json; GitHub README, 2026-06-26
• 2026-06-17 | Folded the duplicate website-cloner tool page into this canonical page. Preserved the useful local token-extraction workflow and removed obsolete stash/reset guidance from active documentation. Source: Website Cloner; AGENTS.md Git Safety
• 2026-06-13 | Quality remediation: reframed as a pattern (DOM/CSS structural extraction → code), corroborated by public Claude Code clone skills using Playwright; the specific @om_patel5 repo remains unpinned. Added stack-fit. Source: https://github.com/search?q=website+cloner+skill
• 2026-03-26 | Shared on X by @om_patel5 (4,023 likes, 8,511 bookmarks). Source: X/@om_patel5, 2026-03-26