Skip to content
don’t make it ugly
All resources

ToolAgent Resources, Tools

DesignMD

Point it at a URL and it extracts that site's design system as a DESIGN.md.

Visit website (opens in a new tab)
Preview of DesignMD

What it is

DesignMD crawls a website's key pages, reads the computed styles and returns a structured DESIGN.md: colours with their roles, the type scale, spacing steps, radii, elevation, components and breakpoints. It can also render a live HTML preview of the extracted system and push the tokens into Figma in one click. It runs on credits, with a handful free on your first visit and more when you sign up, sold in one-time packs that don't expire.

Why it’s here

The useful part is that it reads computed styles rather than guessing from a screenshot, so the numbers it gives you are the real ones. That makes it a good way to answer "what exactly is this site's spacing scale?" before you ask an agent to build something in the same key. Extracting a system is not permission to copy a brand, so change the palette and the type before you ship.

Best for

  • extracting a site's tokens
  • generating a DESIGN.md
  • handing an agent real numbers

Can my agent use this?

Agent excellent agent friendliness

Yes. Generate the DESIGN.md, save it at the root of your project and tell your agent to follow it for every new screen. The file is plain markdown, so it costs almost nothing to keep in context and it stops the agent inventing a new palette on each request.

Excellent: Public docs, public source or an installable package. An agent can read, install and implement this directly.

Access methods

  • Public website
  • Copy/paste

Related resources

  • Refero Styles
    Preview of Refero Styles

    Refero Styles

    DESIGN.md files extracted from 2,000+ real product websites, written for agents.

    Collectionexcellent agent friendliness
  • getdesign.md
    Preview of getdesign.md

    getdesign.md

    A 550-strong catalogue of DESIGN.md files, following Google's spec.

    CollectionOpen sourceexcellent agent friendliness
    Staff pick
  • DESIGNMD by Hyperbrowser
    Preview of DESIGNMD by Hyperbrowser

    DESIGNMD by Hyperbrowser

    A single-purpose tool that extracts a DESIGN.md from any URL you give it.

    ToolFreegood agent friendliness
  • designmd.supply
    Preview of designmd.supply

    designmd.supply

    Pre-generated DESIGN.md style guides for the world's best-known brands, MIT licensed.

    CollectionFreeOpen sourceexcellent agent friendliness