design-scan

Scans a live website and produces design.md — a replication-grade spec of its look and motion. Runs a bundled Playwright crawler that template-dedupes and visits up to ~6 pages, captures screenshots at 3 breakpoints plus full-page and scroll frames, and extracts structured design data: CSS custom properties, fonts, computed typography, a color palette with usage counts, CSS @keyframes, Web Animations API animations with real keyframes/durations/easings, transitions, :hover rules, animation-library detection (GSAP, Framer Motion, Lottie, AOS, Lenis), layout metrics, and a component inventory. Claude then reads the screenshots plus JSON and writes design.md. Trigger on "design scan", "/design-scan <url>", "replicate this website's design", "scan <url> and make a design.md", "clone this site's look", or "extract the design system from <url>".