{"slug":"visual-clone","title":"visual-clone","tags":["site-building","frontend","visual","clone"],"agent_summary":"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","trigger_phrases":["visual-clone","visual guide","clone guide","visual clone","clone design","screenshot to site","pixel match"],"runnable":true,"markdown":"**Trigger:** Use when \"visual clone\", \"clone design\", \"screenshot to site\", \"pixel match\". Clones website design from screenshot with visual QA passes.\n\n### Accepted Inputs\n\n- Screenshot (required primary): Any image — drag into chat, Snipping Tool, phone photo, browser screenshot\n- CSS text (optional): Copied from DevTools Elements > Computed tab. Adds precision but never required\n- Description (optional): What to clone, what to change, what the site is for\n- Brand override (optional): Say \"use our branding\" OR just have a brand_assets/ folder in the project\n\n### Phase 1: Design Extraction\n\nPerform a complete design extraction pass documenting:\n\n**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.\n\n**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.\n\n**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.\n\n**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.\n\n**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.\n\n**1.6 Visual Mood** — Classify: Light/Dark/Mixed, Minimal/Dense, Corporate/Playful/Editorial/Technical, Modern/Classic/Brutalist/Organic, Flat/Skeuomorphic/Glassmorphism/Neumorphism.\n\n**1.7 Animation Hints** — Note anything that suggests motion: offset/staggered layouts, hover state differences, parallax-style layering, loading/skeleton patterns.\n\n**1.8 Write DESIGN_SPEC.md** — Write all findings to DESIGN_SPEC.md in the project root.\n\n### Phase 2: Build\n\n1. Detect tech stack — Check package.json. Use whatever framework is already in use.\n2. 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.\n3. Invoke frontend-design skill — Pass the full DESIGN_SPEC.md as context.\n4. 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.\n\n### Phase 3: Self-Correction (Visual QA)\n\n1. Invoke visual-qa-loop skill — Pass original reference screenshot as comparison target\n2. Run up to 2 comparison passes: Pass 1 for major structural and color discrepancies, Pass 2 for fine-tuning spacing, typography, and component details\n3. If visual-qa-loop skill is not available, perform manual comparison — re-read reference screenshot, list discrepancies, fix top 5 most visible issues\n\n---\n","html":"

Trigger: Use when \"visual clone\", \"clone design\", \"screenshot to site\", \"pixel match\". Clones website design from screenshot with visual QA passes.

\n

Accepted Inputs

\n\n

Phase 1: Design Extraction

\n

Perform a complete design extraction pass documenting:

\n

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.

\n

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.

\n

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.

\n

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.

\n

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.

\n

1.6 Visual Mood — Classify: Light/Dark/Mixed, Minimal/Dense, Corporate/Playful/Editorial/Technical, Modern/Classic/Brutalist/Organic, Flat/Skeuomorphic/Glassmorphism/Neumorphism.

\n

1.7 Animation Hints — Note anything that suggests motion: offset/staggered layouts, hover state differences, parallax-style layering, loading/skeleton patterns.

\n

1.8 Write DESIGN_SPEC.md — Write all findings to DESIGN_SPEC.md in the project root.

\n

Phase 2: Build

\n
    \n
  1. Detect tech stack — Check package.json. Use whatever framework is already in use.
    2. \n
  2. 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.
    3. \n
  3. Invoke frontend-design skill — Pass the full DESIGN_SPEC.md as context.
    4. \n
  4. 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.
    5. \n
\n

Phase 3: Self-Correction (Visual QA)

\n
    \n
  1. Invoke visual-qa-loop skill — Pass original reference screenshot as comparison target
    2. \n
  2. Run up to 2 comparison passes: Pass 1 for major structural and color discrepancies, Pass 2 for fine-tuning spacing, typography, and component details
    3. \n
  3. If visual-qa-loop skill is not available, perform manual comparison — re-read reference screenshot, list discrepancies, fix top 5 most visible issues
    4. \n
\n
\n"}