website-cloning

Website Cloning — Page Clone Brief Extractor

Extract everything Claude needs to rebuild any webpage from scratch. Produces a comprehensive JSON document ("Page Clone Brief") containing 21 data layers extracted in parallel via Playwright.

What Gets Extracted

Layer	Extractor	Data
Colors	EXTRACT_COLORS	Palette with confidence scoring, semantic colors, CSS variables, LCH/OKLCH
Typography	EXTRACT_TYPOGRAPHY	Font families, sizes, weights, line-heights, Google/Adobe sources
Spacing	EXTRACT_SPACING	Scale values, 4px/8px grid detection
Border Radius	EXTRACT_BORDER_RADIUS	All values with element context
Borders	EXTRACT_BORDERS	Width + style + color combinations
Shadows	EXTRACT_SHADOWS	Box-shadow patterns with frequency
Breakpoints	EXTRACT_BREAKPOINTS	CSS media query breakpoints
Logo	EXTRACT_LOGO	Logo URL, dimensions, safe zone, favicons, og:image
Buttons	EXTRACT_BUTTONS	Variant detection, padding, colors, dimensions
Inputs	EXTRACT_INPUTS	Form field styles
Links	EXTRACT_LINKS	Link styles
Badges	EXTRACT_BADGES	Badge/tag/chip styles
Icons	EXTRACT_ICONS	Font Awesome, Material, Lucide, Phosphor, SVG detection
Frameworks	EXTRACT_FRAMEWORKS	Tailwind, Bootstrap, MUI, Next.js, React, Vue, Angular
Page Structure	EXTRACT_PAGE_STRUCTURE	Layout type (sidebar+header+main), regions, sticky/fixed positioning
Component Tree	EXTRACT_COMPONENT_TREE	Tables, cards, forms, modals, tabs, dropdowns, search, stat-cards, charts, avatars, toasts, breadcrumbs, pagination, accordions
Content Map	EXTRACT_CONTENT_MAP	Headings, paragraphs, button labels, placeholders, badge variants, images, SVG icons, empty states
Navigation	EXTRACT_NAVIGATION	Sidebar items (label, icon, href, active, badge, children), header items, breadcrumbs, tabs with counts
Table Schema	EXTRACT_TABLE_SCHEMA	Column headers + inferred types, sample rows, badge variants, features (search, filter, pagination, bulk-select, sort)
Layout CSS	EXTRACT_LAYOUT_CSS	All flex/grid containers: display, direction, gap, align, justify, position, overflow, z-index
Responsive	EXTRACT_VIEWPORT_STATE	Layout state at 3 viewports (1920, 768, 390) — sidebar visibility, grid changes, hidden elements

Two Usage Methods

Method 1: Standalone CLI (Recommended for authenticated pages)

Save a login session first, then extract:

# Step 1: Open browser, log in manually, close when done
npx playwright open --save-storage=auth.json https://example.com/

# Step 2: Extract from any authenticated page
node "${CLAUDE_PLUGIN_ROOT}/scripts/extract-design-tokens.js" https://example.com/dashboard/ --storage-state auth.json

# Step 3: With screenshots at 3 viewports
node "${CLAUDE_PLUGIN_ROOT}/scripts/extract-design-tokens.js" https://example.com/dashboard/ --storage-state auth.json --screenshots

CLI options:

• --storage-state <file> — Use saved browser session for authenticated pages
• --output <file> — Custom output path (default: scripts/output/<domain>/<timestamp>.json)
• --headed — Run with visible browser window
• --screenshots — Save full-page screenshots at desktop/tablet/mobile viewports

Method 2: Playwright MCP (for interactive extraction)

When the Playwright MCP server is connected:

1. Navigate to the target page: browser_navigate
2. Handle login manually via browser_snapshot + browser_click + browser_type
3. Once on the authenticated page, run the extraction via browser_run_code
4. Read the output JSON with the Read tool

For the MCP approach, read the extraction functions from ${CLAUDE_PLUGIN_ROOT}/scripts/extract-design-tokens.js and pass them to browser_run_code. Each EXTRACT_* function is a self-contained page.evaluate() callback.

Output: Page Clone Brief JSON

{
  "_format": "page-clone-brief-v1",
  "designTokens": { "colors": {}, "typography": {}, "spacing": {}, "borderRadius": {}, "borders": {}, "shadows": [], "breakpoints": [] },
  "brand": { "logo": {}, "favicons": [] },
  "pageStructure": { "layoutType": "sidebar-header-main", "regions": [] },
  "layoutCSS": [],
  "responsive": { "desktop": {}, "tablet": {}, "mobile": {} },
  "components": { "buttons": [], "inputs": [], "catalog": [] },
  "content": { "headings": [], "buttonLabels": [], "images": [] },
  "navigation": { "sidebar": [], "header": [], "tabs": [] },
  "dataSchemas": { "tables": [] },
  "meta": { "frameworks": [], "iconSystem": [] }
}

How to Use the Brief for Cloning

After extraction, use the brief as build instructions:

1. Design system setup: Use designTokens to create Tailwind config or CSS variables
2. Layout shell: Use pageStructure + layoutCSS to build the sidebar/header/main skeleton
3. Navigation: Use navigation.sidebar and navigation.header to build nav components
4. Components: Use components.catalog to know what to build and designTokens for styling
5. Content: Use content for all text, labels, images, and placeholder data
6. Data tables: Use dataSchemas.tables for column definitions, types, and sample data
7. Responsive: Use responsive to ensure breakpoint behavior matches

For detailed step-by-step workflow, consult references/cloning-workflow.md.

Dependencies

The CLI mode requires Playwright (@playwright/test or playwright npm package). For Playwright MCP mode, no additional dependencies are needed.

Additional Resources

Reference Files

• references/extraction-architecture.md — Detailed explanation of how each extractor works and confidence scoring
• references/cloning-workflow.md — Step-by-step workflow for using extraction data to rebuild a page