Clone Study

clone-study

A [Claude Code skill](https://docs.claude.com/en/docs/claude-code/skills) that studies and recreates high-end websites (Awwwards Site of the Day, premium SaaS, creative agency work) from a URL — and produces a faithful study recreation using your own assets.

Point it at a site. It captures the page systematically, extracts design tokens and animation behaviour, writes a recreation brief, then orchestrates your existing `scaffold` / `design` / `polish` / `verify` skills to rebuild the structure with substituted assets and original copy.

**Not a byte-for-byte clone.** The output is a *study* — same layout, same design system, same scroll choreography — but built from scratch with your own typography, photography, copy, and 3D. That distinction matters ethically (original assets and bundled JS stay with their authors), legally, and practically (minified production code is barely readable; the only way to actually understand a premium site is to rebuild it from observation).

---

What it does

URL → capture → analyze → brief → scaffold → design → verify → diff → iterate → teardown.md

For a given target it produces a workspace at `~/clone-study//` containing:

• raw-capture/ — Playwright multi-viewport screenshots, scroll-state frames, 30 s video recording, DOM snapshot, network log, computed styles, detected framework + library globals.
• analysis.json — Stack fingerprint (Next/Nuxt/Astro/…), animation library, 3D lib, styling approach. Confidence-tagged.
• tokens.json — Extracted colour palette, typography scale, spacing, border-radius, box-shadow, easing curves. Tailwind-config shaped so you can drop it straight into the build.
• recreation-brief.md — The bridge doc: stack decision, narrative model, section list, animation spec table, asset-substitution table, copy-tone direction, difficulty flags.
• build/ — The scaffolded recreation.
• diff-iterations/ — Side-by-si