page-clone-brief

Page Clone Brief

A Claude Code plugin that extracts everything needed to rebuild any webpage from scratch. Produces a comprehensive JSON document ("Page Clone Brief") with 21 data layers extracted in parallel via Playwright.

Adapted from dembrandt with 7 additional extractors for full page cloning.

What Gets Extracted

Category	Data Points
Design Tokens	Colors (palette + CSS vars), typography, spacing, border-radius, borders, shadows, breakpoints
Brand	Logo URL/dimensions, favicons, og:image
Page Structure	Layout type (sidebar-header-main, etc.), regions, sticky/fixed detection
Layout CSS	All flex/grid container properties (display, direction, gap, align, justify, position)
Responsive	Layout state at 3 viewports (1920px, 768px, 390px)
Components	Buttons, inputs, links, badges + full component catalog (tables, cards, forms, modals, tabs, dropdowns, charts, etc.)
Content	Headings, paragraphs, button labels, placeholders, images, SVG icons, empty states
Navigation	Sidebar items (with icons, badges, children), header, breadcrumbs, tabs
Data Schemas	Table columns with inferred types, sample rows, badge variants, features (search, filter, pagination, sort)
Meta	Detected frameworks (React, Next.js, Vue, Tailwind, etc.) and icon systems

Installation

Install via Claude Code plugin marketplace or directly:

claude plugin add AryanXPatel/page-clone-brief

Dependencies

Requires Playwright for CLI extraction:

npm install -g @playwright/test
npx playwright install chromium

Usage

Slash Command

/clone-site https://example.com/dashboard

For Authenticated Pages

Save a login session first:

npx playwright open --save-storage=auth.json https://example.com/

Then extract:

/clone-site https://example.com/dashboard --storage-state auth.json

With Screenshots

/clone-site https://example.com/dashboard --screenshots

Via Playwright MCP

If the Playwright MCP server is connected, the skill can guide Claude to navigate to a page interactively, handle login, and run extraction functions via browser_run_code.

Output Format

{
  "_format": "page-clone-brief-v1",
  "designTokens": {
    "colors": { "palette": [], "semanticColors": {}, "cssVariables": [] },
    "typography": { "families": [], "sizes": [], "googleFonts": [] },
    "spacing": { "values": [], "gridSystem": "4px" },
    "borderRadius": [],
    "borders": [],
    "shadows": [],
    "breakpoints": []
  },
  "brand": { "logo": {}, "favicons": [] },
  "pageStructure": { "layoutType": "sidebar-header-main", "regions": [] },
  "layoutCSS": [],
  "responsive": { "desktop": {}, "tablet": {}, "mobile": {} },
  "components": { "buttons": [], "inputs": [], "links": [], "badges": [], "catalog": [] },
  "content": { "headings": [], "buttonLabels": [], "images": [], "badgeTexts": [] },
  "navigation": { "sidebar": [], "header": [], "breadcrumbs": [], "tabs": [] },
  "dataSchemas": { "tables": [] },
  "meta": { "frameworks": [], "iconSystem": [] }
}

How to Use the Brief

1. Design system: Use designTokens to create Tailwind config or CSS variables
2. Layout shell: Use pageStructure + layoutCSS to build the page skeleton
3. Navigation: Use navigation.sidebar and navigation.header to build nav components
4. Components: Use components.catalog as a build checklist, 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 match breakpoint behavior

See skills/website-cloning/references/cloning-workflow.md for the detailed step-by-step workflow.

Plugin Contents

Component	Description
/clone-site command	Slash command to extract from any URL
site-extractor agent	Autonomous extraction agent
website-cloning skill	Auto-triggers on cloning-related queries
extract-design-tokens.js	Core extraction engine (1,700+ lines, 21 extractors)

License

MIT