Media
5 items
Description
Copy any web page's design into a design.md spec of real CSS values and design tokens, ready for your AI coding agent. 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 is a local merge — no new scan, no network call, no credit spent. WORKS WITH ANY AI TOOL design.md is plain Markdown full of concrete values, so it pastes into any AI chat assistant or coding editor with no adaptation, no plugin and no integration to set up. Quick Start hands you a :root custom-property block and a Tailwind v4 @theme block. The Rebuild Checklist is an ordered list carrying the real numbers for each step. When you want something shorter, the ai-prompt export condenses the whole spec into a single rebuild prompt. FREE AND LIFETIME - Free: 30 analyses per calendar month. One credit per page you analyse, and the counter resets at the start of each month. - A failed or quota-blocked scan costs nothing. AI polish costs nothing extra — same page, same single credit. Reopening a scan from History is free, and composing a Mix is free. Capturing a new page into a Mix runs a real analysis, so that one does use a credit. - A one-time lifetime licence removes the monthly limit. It is a single payment with nothing to renew: the upgrade button opens the Dodo Payments checkout, which is the single place pricing lives. - An activated licence is re-checked once a day and keeps working for 14 days when that check cannot reach the server, so a dropped connection never locks you out of what you bought. A key activates a set number of devices; "Release this device" frees an activation so the key can move to another machine. PRIVACY - There are no accounts and no sign-in, no telemetry, and no DesignMD server. The analysis runs in your browser and nothing is sent to us. - The only requests the analysis makes on its own are read-only fetches for stylesheets the page loads from another domain. They go out without cookies, purely so hover and keyframe rules can be read; that CSS is parsed, never applied to any document and never executed. - The copy pass redacts anything email-, phone- or card-shaped, and keeps link paths only — query strings and fragments never leave the page. - AI polish is opt-in and bring-your-own-key: you pick a provider in Settings and paste your own API key. It runs only when you click "Analyze + AI". The provider receives a compact structural summary — token values, band heights, state deltas, voice statistics — plus the page title and host. It does not receive the page's copy: no headlines, nav labels, CTA text, pricing or FAQ content. Your key is stored on your device and sent only to the provider you picked. - Licence checks send your licence key, the activation instance id, and a deliberately coarse device label such as "Chrome on Windows". Nothing else is sent. Dodo's reply carries the email address on your purchase record; that is kept on your device only, never shown in the extension and never transmitted anywhere, and releasing the licence deletes it. - No remote code. Every script DesignMD runs ships inside the package. HONEST LIMITS - chrome:// pages, the Chrome Web Store and the built-in PDF viewer cannot be scripted. Local file:// pages need "Allow access to file URLs" turned on in the extension's details. - Cross-origin stylesheets are readable only when the host sends CORS headers, or when you grant site access. Sheets that could not be read are listed under Known Gaps with the reason. - Cross-origin iframes cannot be read. They are counted and reported as a gap. - Overlays that only exist after a real click cannot be measured; ones sitting hidden in the DOM can. - Very large pages are capped (12,000 elements, plus per-section content caps). Every cap that was actually hit is named under Extraction Coverage. - Heavily obfuscated CSS-in-JS can defeat hover-state extraction. - The free-tier counter and the licence check run in your browser, because there is no backend. That makes them enforceable, not tamper-proof. - DesignMD writes a specification of a design. It does not copy a site's source code, its content, or its brand assets, and it is not a tool for cloning someone else's site. Respect copyright and trademarks in whatever you build. History keeps your eight most recent scans on this device, one per site, so you can reopen a specification without rescanning. Clear it any time from the panel.