clone-site

What problem does it solve? Cloning a website from screenshots alone forces slow guess-and-check iteration on type scales, colors, and motion. This Skill enforces a proven order of operations that reads the reference's actual DOM and design system first, turning a multi-day guessing loop into a short, spec-driven build. ## Core Features & Use Cases - Design System Extraction: Runs design-system-extract.mjs to pull type scales, weights, color tokens, border radii, and animated elements into a committed design-tokens.json spec. - Interaction and Motion Capture: Drives the live site to record hover, focus, menu, and preloader states, plus detects scroll-driven axis motion that single screenshots cannot reveal. - Structured Iteration: Builds against captured slices and validates with a gauntlet loop (pixel profile, lateral motion, independent judge) instead of subjective impressions. - Use Case: When asked to "build a landing page like this reference site," load this Skill first to extract the real tokens and interactions, then build from the spec rather than from screenshots. ## Quick Start Clone the design of https://example.com by first extracting its design tokens and interaction states, then building the page from that spec.