ClonePage — Page to DESIGN.md for Claude
Extension Actions
- Live on Store
One click on any page → generate a DESIGN.md (layout, tokens, components, copy, screenshot) that Claude can use to clone it.
Turn any webpage into a **DESIGN.md spec** that Claude (or Codex, Cursor, Stitch…) can use to rebuild it.
**What you get**
- 🎨 Design tokens — top colours (hex + frequency), font families, type scale, spacing scale, radius, shadow, motion
- 🧩 Layout tree — hierarchical outline of visible regions with coordinates, flex/grid modes and text snippets
- 🧱 Components — buttons, links, inputs, cards, navs, modals, badges, heroes, images, videos (size + styles)
- ✍ Copy — H1, lead paragraph, CTA labels captured verbatim
- 🖼 Screenshot — one-click visible-tab capture saved alongside the markdown
- 🤖 Instructions — explicit prompt tailored for Claude: tokens-first, layout fidelity, accessibility, responsive
**How it works**
1. Open any page.
2. Click the ClonePage icon.
3. Hit **Generate DESIGN.md**.
4. Copy, Download, or **Send to Claude** (opens claude.ai with the markdown in your clipboard).
**Privacy-first**
ClonePage runs 100% locally in your browser. No accounts, no telemetry, no third-party servers, no analytics. See the privacy policy link below.