Trigger: Use when "visual clone", "clone design", "screenshot to site", "pixel match". Clones website design from screenshot with visual QA passes.
Accepted Inputs
- Screenshot (required primary): Any image — drag into chat, Snipping Tool, phone photo, browser screenshot
- CSS text (optional): Copied from DevTools Elements > Computed tab. Adds precision but never required
- Description (optional): What to clone, what to change, what the site is for
- Brand override (optional): Say "use our branding" OR just have a brand_assets/ folder in the project
Phase 1: Design Extraction
Perform a complete design extraction pass documenting:
1.1 Color System — Identify primary, secondary, accent, background, surface, border, and text colors. Note any gradient directions and stops. Extract as CSS custom properties.
1.2 Typography — Identify font families: display/heading, body, mono/code. Estimate font weights visible. Estimate size scale: h1 through h6, body, small, caption. Note letter-spacing and line-height patterns. If fonts are recognizable, name them. If not, classify as serif/sans-serif/mono/slab and pick closest Google Font match.
1.3 Spacing System — Estimate the base spacing unit (4px, 8px, 16px grid?). Note section padding patterns. Note component internal padding. Note gap patterns in grids and flex layouts.
1.4 Layout Structure — Map every visible section in order: Header/navigation style, Hero section, Content sections, Social proof, CTA sections, Footer. Estimate max-width container.
1.5 Component Patterns — Catalog: Buttons (rounded/sharp/pill, filled/outlined/ghost), Cards (shadow depth, border-radius, border style, hover lift), Navigation (dropdown style, mobile menu, active state indicator), Badges/Tags, Dividers, Icons, Images, Forms.
1.6 Visual Mood — Classify: Light/Dark/Mixed, Minimal/Dense, Corporate/Playful/Editorial/Technical, Modern/Classic/Brutalist/Organic, Flat/Skeuomorphic/Glassmorphism/Neumorphism.
1.7 Animation Hints — Note anything that suggests motion: offset/staggered layouts, hover state differences, parallax-style layering, loading/skeleton patterns.
1.8 Write DESIGN_SPEC.md — Write all findings to DESIGN_SPEC.md in the project root.
Phase 2: Build
- Detect tech stack — Check package.json. Use whatever framework is already in use.
- Check for brand override — If brand_assets/ folder exists OR user said "use our branding": clone the layout structure, section ordering, component patterns, spacing system, animation/motion style, UX flow. Replace from brand: colors, fonts, logos/images, copy.
- Invoke frontend-design skill — Pass the full DESIGN_SPEC.md as context.
- Implementation priorities: Match color system, typography scale, layout structure, component styles. Add appropriate hover/focus states. Make it responsive (mobile-first). Add scroll animations only if the reference suggests them.
Phase 3: Self-Correction (Visual QA)
- Invoke visual-qa-loop skill — Pass original reference screenshot as comparison target
- Run up to 2 comparison passes: Pass 1 for major structural and color discrepancies, Pass 2 for fine-tuning spacing, typography, and component details
- If visual-qa-loop skill is not available, perform manual comparison — re-read reference screenshot, list discrepancies, fix top 5 most visible issues