DesignMD: Copy Website Design, Mix with AI

Copy the design of any live web page into a single Markdown file your AI coding agent can actually build from. DesignMD reads the page you are on — computed styles, stylesheets, CSS custom properties, layout geometry, interaction states, scroll motion, assets and the real copy — and writes design.md: a design specification made of concrete numbers instead of vague adjectives. Paste it into your AI assistant and ask for the rebuild. No screenshots to squint at and no Figma file to reconstruct first — the spec comes straight off the live page. WHAT YOU GET One design.md, with sections including: - Tokens — Colors: semantic names (Canvas, Primary Text, Brand Accent, Surface, Border) with hex value, token name, role and share of usage - Tokens — Typography: families, weights, roles and a full type scale - Design Token System: the page's own CSS variables — framework fingerprint, semantic groups, resolved alias chains, light/dark diff, paste-ready :root blocks - Tokens — Spacing & Shapes: the density the page is built at, its spacing rhythm, and the corner-radius set broken out by context - Effects & Treatments: glass surfaces, gradients, background patterns, masks, blend modes and filters, each with the declared value behind it - Iconography: icon style, stroke width, size scale, and how the icons are delivered - Tokens — Motion: duration tiers, an easing table with verbatim cubic-beziers, paste-ready @keyframes - Micro-interactions, plus a Component State Matrix: base values and the hover / focus / active / disabled / checked delta for each archetype - Overlays & Portals: dialogs, menus, tooltips and drawers, measured while briefly forced visible off-screen, then restored - Components: an inventory of what repeats on the page, a census of how often, and an API sketch with TypeScript-ish prop unions and a React/Tailwind snippet - Page Blueprint: an ASCII wireframe of the page, plus a rebuild paragraph per band with its own colors, type and column count - Grid & Composition: the container widths, column counts and gutters each band is built on - Layout, Surfaces and Elevation: how the page stacks, what sits on top of what, and the shadow tiers that separate them - Imagery: how many raster images and inline SVGs the page uses, their dominant aspect ratios, and how the media is rounded - Responsive: the breakpoints the page declares, and, under Responsive Behaviour, what actually changes at each one - Scroll & Reveal Motion: which elements animate in as you scroll, with keyframes, easings and stagger timing - Assets & Media: an inventory of images, background art, the icon system and the font faces the page loads - Content & Copy: the real headlines, CTAs, pricing tiers and FAQ, plus a computed voice profile - Accessibility Profile: contrast results, focus-ring design, reduced-motion handling and landmark semantics - Landing Page Anatomy: the order the page makes its argument in, band by band - Hero & Conversion: the hero headline, its CTA pair, the hero visual, and the social proof arranged around them - Signature Devices: the handful of visual moves that make the page look like itself - Rebuild Checklist: an ordered build sequence, each step carrying its own numbers - Agent Prompt Guide: how to hand the document to a model without losing the values - Extraction Coverage and Known Gaps: how deep this scan reached, and where it did not Four ways out: copy the whole design.md, download design-<site>.md, download a condensed ai-prompt.txt for quick iterations, or export design-tokens.json — a JSON sidecar in a design-tokens layout, covering color, type, radius, shadow, motion, breakpoint and z-index values alongside the page's own custom properties. Read end to end, it is a style guide for a site that never wrote one. HOW IT WORKS 1. Open any site and click the DesignMD toolbar icon. Ctrl+Shift+Y works too, as does right-click and "Analyze design with DesignMD". That click is what grants access, and only to that one tab — DesignMD does not ask to read your data on all websites when you install it. 2. Hit "Analyze this page". The deep pass scrolls the page top to bottom so lazy sections load and reveal animations fire, measures what it finds, and then puts your scroll position back where it was. 3. Read the rendered preview with its clickable table of contents, or the raw markdown. 4. Copy, download, or export the tokens. The one-tab grant lapses when you switch tabs or navigate to another site. If a capture fails because of that, the panel offers "Allow access & retry" — one optional, remembered site-access grant. Decline it and the per-click model keeps working exactly as before. Scan depth is yours: deep scan on or off, a time budget of Quick 20s / Standard 60s / Exhaustive 120s, and page-copy capture on or off. The budget is a ceiling rather than a target — the scan writes what it has and says so under Extraction Coverage. MIX DESIGNS FROM MULTIPLE SITES Typography from one site, colors from another, icons from a third, motion from a fourth. The Mix board holds 24 design aspects in four groups, and every aspect can be assigned to a different source site. Foundations covers the raw material: color and theming, typography, spacing and density, shape and radius, elevation and shadows, background and texture, iconography, and effects. Components covers the recurring UI — buttons, forms, cards, navigation widgets, feedback and status, overlays and tooltips, data display, and media and identity. Page regions covers the header and nav, the hero, the footer, and imagery. Experience covers layout and grid, animation, micro-interactions, and accessibility. Capture the page you are on, pull a past scan out of History, or add a result to the mix straight from the panel, then pick which aspects that capture contributes. "Get Complete design.md" composes one document with a Design Mix provenance table naming the source site behind every aspect. A mix holds up to 10 captures, and composing it i…