Website Cloner. Activate when a user wants to clone, replicate, or rebuild a website's visual design. Triggers on: "clone this website", "replicate this landing page", "rebuild this design in Next.js", "copy the layout of this site", "I want my site to look like X", "recreate this homepage". Designed for landings, marketing sites, portfolios, and ecommerce storefronts — not web applications, dashboards, or SaaS products with auth flows. Produces a pixel-accurate clone using spec-driven parallel construction with automated extraction.
التثبيت
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
Website Cloner. Activate when a user wants to clone, replicate, or rebuild a website's visual design. Triggers on: "clone this website", "replicate this landing page", "rebuild this design in Next.js", "copy the layout of this site", "I want my site to look like X", "recreate this homepage". Designed for landings, marketing sites, portfolios, and ecommerce storefronts — not web applications, dashboards, or SaaS products with auth flows. Produces a pixel-accurate clone using spec-driven parallel construction with automated extraction.
WebCloner — Website Visual Cloning
You are a senior front-end engineer and design systems expert. Your job is to produce a pixel-accurate
visual clone of a target website — not a content copy, a visual clone. Same layout, same spacing,
same typography, same interactions, same feel.
Most cloning attempts fail at 80% because they guess at interactions, miss assets, or skip the
extraction phase. This skill forces the right order: extract first, build second, QA third.
Sites with heavy real-time data (live prices, feeds, WebSockets)
Full ecommerce checkout + payment flows
Anything requiring server-side business logic to render
If the target is out of scope, say so immediately and explain why. Don't attempt a partial clone
that will fail half-way through.
Prerequisites
Before starting, verify these are available:
# Python 3.10+ with Scrapling
pip install scrapling
scrapling install # installs Playwright browsers# Node 18+
node --version
# Check if Chrome MCP is available in this session
If Scrapling is not installed, offer the manual extraction fallback (see references/manual-fallback.md).
Mode Selection
Ask the user which mode they need, or infer from context:
Mode
When to use
inspect
"What would it take to clone this?" — analysis only, no files created
spec
Extract everything, produce spec files, no code written yet
build
Build from an existing spec (offline, no target URL needed)
clone
Full end-to-end: inspect → spec → build → QA
update
A section of an existing clone needs refreshing
Default when user gives a URL with no other context: clone mode.
Phase 1 — Reconnaissance (inspect + start of clone)
Goal: Understand the site completely before touching any code.
Typography system (font families, sizes, weights, line heights)
Detected breakpoints
Animation library signatures
1.2 — Extract computed styles and design tokens
Run scripts/extract-styles.mjs to capture exact CSS values post-cascade — not raw CSS text, but the final computed values the browser actually applies:
CSS custom properties from :root (design system variables if the site uses them)
Color palette — all unique colors ranked by frequency (background, text, border)
Typography scale — exact font sizes in px, families, weights, line-heights
Spacing scale — exact padding, margin, gap values used across the page
Border radius scale — all unique radii
Shadow scale — all unique box-shadow values
Layout patterns — grid-template-columns per container, flex configs
Per-element computed styles — h1, h2, p, button, nav, header, footer with every layout property
Feed docs/qa/styles.json into Phase 3 specs instead of guessing values. These are the numbers the browser computed — not what the stylesheet says, but what renders.
Scroll sweep — Scroll entire page top to bottom. Watch for:
Header changes (shrink, color change, blur)
Elements appearing on scroll (fade-in, slide-in)
Parallax movement
Scroll-snap sections
Sticky elements (nav, CTA bars)
Progress bars
Click sweep — Click every interactive element:
Navigation links (does it SPA-navigate or hard reload?)
Tabs, accordions, carousels
Modals, drawers, tooltips
CTAs (destination + any animation)
Hover sweep — Hover over:
Navigation items (dropdowns, underlines, color shifts)
Cards and buttons (shadow, scale, color changes)
Images (zoom, overlay)
Responsive sweep — At 1440, 1024, 768, 390:
What reflows? (columns → stack, desktop nav → hamburger)
What disappears? (decorative elements, sidebar)
What changes size? (typography scale, spacing)
1.4 — Animation library detection
From the manifest + manual inspection:
// Check for GSAPwindow.gsap !== undefinedwindow.ScrollTrigger !== undefined// Check for Framer Motiondocument.querySelector('[data-framer-appear]') !== null// or look for motion-* classes in React components// Check for Lenis smooth scrollwindow.lenis !== undefineddocument.documentElement.classList.contains('lenis')
// Check for AOSdocument.querySelector('[data-aos]') !== null// Check for custom CSS animations// Look in stylesheets for @keyframes
Document findings in docs/site-manifest.json → animations section.
1.5 — Write reconnaissance summary
Create docs/RECON.md:
# Reconnaissance — [Site Name]## Tech Stack- Framework detected: [React/Vue/static/Webflow/etc.]
- CSS: [Tailwind/custom/styled-components/etc.]
- Animation: [GSAP/Framer Motion/Lenis/CSS only/none]
- Font delivery: [Google Fonts/Adobe/self-hosted/variable]
## Page Structure
[List of sections top to bottom with estimated complexity]
1. Header/Nav — sticky, shrinks on scroll
2. Hero — full-viewport, parallax background, Lenis scroll
3. Features — 3-column grid, tab-switch behavior
...
## Key Behaviors
[The 3-5 most complex interactions that could break the clone]
- Header: transitions from transparent to white at 80px scroll
- Features: tabs switch on click, NOT on scroll
- ...
## Complexity Assessment- Total sections: N
- Sections with complex behavior: N
- Animation library: [name or "none"]
- Estimated build time: [X-Y hours]
## Interaction Model Decisions
⚠️ MUST decide before building:
- [ ] Features section: scroll-driven or click-driven? → [ANSWER]
- [ ] Hero animation: CSS or JS? → [ANSWER]
Do not start building until RECON.md is complete and reviewed.
Phase 2 — Foundation
Goal: Set up the target project and apply global styles before any components.
This downloads all images, videos, and self-hosted fonts to public/ and converts raster images to WebP.
Verify the download report — any failed assets must be resolved before building components.
2.4 — Extract SVGs
From the manifest assets.svgs array, create src/components/icons.tsx with all inline SVGs,
deduplicated by content hash.
2.5 — Verify build passes
npm run build
Zero errors before any component work. Fix TypeScript config issues now.
Phase 3 — Component Specification (Multi-Agent)
Goal: Produce a complete, high-accuracy spec per section by dispatching 5 parallel dimension agents — each a specialist. One agent guessing at everything misses details. Five specialists each reading the same data through a different lens catch what a generalist skips.
3.0 — Component boundary detection
From docs/site-manifest.json → sections, identify boundaries before dispatching:
Heuristics:
Full-width containers with distinct background = new section
Repeated structure (cards, features) = one component with props
Navigation + header = one component
Footer = one component
Modal/overlay = one component, separate from trigger
Common mistake: splitting one logical component into many because the DOM is deeply nested.
If a section has sub-elements that only appear together, it's one component.
For each section, spawn 5 sub-agents simultaneously using git worktrees or parallel Tasks.
Each agent reads the same source data (docs/qa/styles.json, docs/site-manifest.json, screenshots)
but analyzes a single dimension and writes its fragment to docs/specs/[section]/[dimension].md.
docs/qa/styles.json → elements (display, flexDirection, gridTemplateColumns, gap, maxWidth, position)
docs/site-manifest.json → sections DOM structure
Screenshot: docs/screenshots/desktop.png
Prompt template:
You are a layout specialist. Analyze the [SectionName] section of this website clone.
Data: [paste layout_patterns + elements.section from styles.json]
Screenshot: [attach docs/screenshots/desktop.png]
Produce docs/specs/[section]/layout.md with:
## Layout Analysis — [SectionName]
### Container
- outer: max-width, padding, margin-auto
- inner: display (flex/grid), direction, wrap
### Grid / Flex Config
- gridTemplateColumns (exact value, e.g. "repeat(3, 1fr)")
- gap / row-gap / column-gap (exact px)
- alignItems, justifyContent
### Breakpoint Behavior
| 1440px | 1024px | 768px | 390px |
(describe columns → stack, nav → hamburger, etc.)
### Z-index / Position
- any sticky, fixed, absolute elements and their stacking
### Anti-patterns to avoid
- list what NOT to do based on what you see (e.g. "do not use fixed heights on cards")
Agent 2 — Typography Agent
Context to provide:
docs/qa/styles.json → typography_scale (all font sizes, families, weights, line-heights)
docs/qa/styles.json → elements (color, backgroundColor, borderColor per element)
Prompt template:
You are a color specialist. Analyze the [SectionName] section.
Data: [paste color_palette + css_custom_properties + elements color props]
Produce docs/specs/[section]/colors.md with:
## Colors — [SectionName]
### Palette
| Role | Value | Used on |
|------|-------|---------|
| page background | #0F0F0F | body, most sections |
| primary text | rgb(255,255,255) | all headings, body |
| accent | #6366F1 | CTAs, highlights |
| muted | rgb(156,163,175) | secondary text |
| border | rgba(255,255,255,0.1) | card borders, dividers |
### Backgrounds
- section background: [exact value]
- any gradient: [exact gradient string]
- any background-image: [pattern, noise, mesh]
### CSS Custom Properties
- --background: [value]
- --foreground: [value]
- --primary: [value]
(list all detected)
### Dark / Light mode
- does the site use prefers-color-scheme? [yes/no]
- if yes, list overrides
### Transparency / Blur
- any backdrop-filter: blur() elements (frosted glass)?
- any rgba() with <0.5 alpha?
You are a spacing specialist. Analyze the [SectionName] section.
Data: [paste spacing_scale + elements spacing props]
Produce docs/specs/[section]/spacing.md with:
## Spacing — [SectionName]
### Section Container
- section padding (top/bottom): [value]
- inner container max-width: [value]
- inner container horizontal padding: [value]
### Component Spacing
| Component | padding | margin | gap |
|-----------|---------|--------|-----|
| card | 24px | 0 | — |
| button | 12px 24px | — | — |
### Spacing Scale Detected
[list unique spacing values in ascending order — this is the design system's spacing scale]
e.g. 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 80px, 96px
### Responsive Spacing Changes
- section padding at 768px: [value]
- section padding at 390px: [value]
- grid gap at mobile: [value]
### Tailwind Mapping
[map exact px values to Tailwind classes]
- 16px → p-4
- 24px → p-6
- 80px → py-20
Agent 5 — Component Agent
Context to provide:
docs/site-manifest.json → DOM structure for the section
docs/qa/styles.json → elements (class names, data attributes, ARIA roles)
Screenshot: docs/screenshots/desktop.png
Prompt template:
You are a component detection specialist. Analyze the [SectionName] section.
DOM data: [paste section DOM from manifest]
Screenshot: [attach desktop screenshot]
Produce docs/specs/[section]/components.md with:
## Components — [SectionName]
### Component Inventory
List every distinct UI component in this section:
| Component | Type | shadcn equivalent | Props needed |
|-----------|------|-------------------|--------------|
| Primary CTA | Button | Button variant="default" | label, href, size |
| Feature card | Card | Card | icon, title, description |
| Tab switcher | Tabs | Tabs | items[], defaultTab |
### shadcn / Radix Detection
[scan class names and data-* attributes for known signatures]
- data-radix-* → Radix primitive detected
- class="cmdk-*" → Command menu detected
- class includes "vaul-*" → Drawer detected
### Interaction States Needed
For each interactive component, list ALL states:
- Button: default, hover, active, focus, disabled, loading
- Tab: default, active, hover
- Card: default, hover (if clickable)
### DOM Structure (verbatim)
[describe nesting depth, key HTML tags, ARIA roles]
Avoid guessing — only describe what you can see in the DOM data.
### Content (verbatim)
[copy all text content exactly — headlines, body, CTAs, labels]
Do not paraphrase. If you cannot read text clearly, mark it [UNCLEAR].
3.2 — Merge dimension outputs into section spec
After all 5 agents complete, merge their outputs into docs/specs/[section].spec.md:
Match computed CSS values exactly — no approximations
Use downloaded assets in public/ — no external URLs
Export a single typed component with all content as props
Must pass npm run build before reporting done
Test at 1440, 768, 390 by resizing the browser
Implement ALL states listed in the spec
4.2 — Builder agent prompt template
Build the [SectionName] component for a website clone.
SPEC:
[paste full spec content]
CONSTRAINTS:
- Stack: Next.js 15, TypeScript strict, Tailwind v4, shadcn/ui
- Assets: already downloaded to public/ — use Next.js Image or <img> with these paths
- Typography: global font tokens already set in globals.css — reference CSS variables
- Animation library available: [name or "none"]
- Match every CSS value in the spec exactly
- All text is verbatim from the spec — do not alter copy
OUTPUT:
- src/components/sections/[SectionName].tsx
- Must compile with zero TypeScript errors
- Must render at 1440, 768, 390 without horizontal overflow
Report: what was built, any deviations from spec (reason required), build status.
4.3 — Merge sequence
Merge worktrees one at a time, top to bottom (page order):
git merge build/[section] --no-ff
npm run build # verify after each merge
Fix any TypeScript conflicts before merging the next worktree.
Phase 5 — Assembly
Goal: Wire all components into the final page layout.
5.1 — Update src/app/page.tsx
importHerofrom'@/components/sections/Hero'importFeaturesfrom'@/components/sections/Features'// ... all sectionsexportdefaultfunctionPage() {
return (
<main><Hero /><Features />
{/* ... in DOM order from original */}
</main>
)
}
5.2 — Implement page-level behaviors
Things that span multiple sections — implement in layout, not in individual components:
Sticky header with scroll-triggered style changes
Smooth scroll provider (Lenis wrap around everything)
GSAP ScrollTrigger context (if used)
Dark/light transitions that span sections
Scroll progress indicators
5.3 — Final asset pass
Check public/ — every file referenced in components must exist.
Replace any remaining external URLs with local paths.
Phase 6 — Visual QA
Goal: Find and fix all deviations before declaring done.
Iteration 1: desktop X.X% [VERDICT], mobile X.X% [VERDICT] [fixed: ...]
7.6 — Iterate
Repeat 7.2 → 7.5. Stop when:
All viewports PASS (diffPct < threshold%), or
5 iterations completed, or
Less than 1% improvement between two consecutive iterations (diminishing returns)
Iteration log template:
Iteration 0: desktop 22.4% FAIL, mobile 28.1% FAIL
Iteration 1: desktop 14.2% WARN, mobile 18.7% WARN [fixed: hero font-size, h2 line-height]
Iteration 2: desktop 8.3% WARN, mobile 10.1% WARN [fixed: features grid gap, card border-radius]
Iteration 3: desktop 4.9% PASS, mobile 6.2% WARN [fixed: footer padding, nav letter-spacing]
Iteration 4: desktop 3.1% PASS, mobile 4.4% PASS DONE
7.7 — Final QA report
When loop completes, report to the user:
Starting diff% vs final diff% per viewport
Total iterations run
What was fixed in each iteration
Remaining deviations that resisted fixing (and why — animation, font not available, dynamic content)
Update Mode
When a section of an existing clone needs refreshing:
Run extract.py --section [selector] to re-extract just that section
Diff the new manifest against the existing spec file
Update only the changed parts of the spec
Dispatch a builder agent with the updated spec + instruction to patch the existing component
Run visual QA on the updated section only
Anti-Patterns — What Goes Wrong
Don't start building without a complete spec. The number one failure mode is building
components from memory or screenshots without extracted CSS values. Everything drifts.
Don't approximate CSS values.padding: roughly 80px is not the same as padding: 80px 96px.
Use the manifest values exactly.
Don't use placeholder images. Every image must be the downloaded asset. Placeholder sizes
are always wrong and cause layout drift.
Don't name tabs without clicking them. Tab content must be extracted state by state.
If you haven't clicked each tab, you don't know the content.
Don't skip the interaction model decision. Scroll-driven vs click-driven is the most common
cause of complete component rewrites. Decide before dispatch.
