---
name: DesignMD
slug: designmd
url: "https://dontmakeitugly.com/resources/designmd"
website: "https://designmd.me"
type: tool
categories:
  - agent-resources
  - tools
tags:
  - design-md
  - design-tokens
  - extraction
  - figma
  - colours
  - typography
  - spacing
frameworks:
  - agnostic
pricing: freemium
agentFriendly: excellent
agentAccessMethods:
  - public_web
  - copy_paste
difficulty: beginner
dateAdded: "2026-09-04"
lastVerified: "2026-09-04"
---

# DesignMD

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

- Type: Tool
- Categories: Agent Resources, Tools
- Pricing: Freemium
- Works with: Framework agnostic

## 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

## Links

- Website: https://designmd.me

## Can my agent use this?

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.

Agent friendliness: Excellent. Public docs, public source or an installable package. An agent can read, install and implement this directly.
Access methods: Public website, Copy/paste.

## Prompt to hand your agent

```text
Use DesignMD as a design and implementation reference for this project.

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

Website: https://designmd.me

Use it specifically for:
- extracting a site's tokens
- generating a DESIGN.md
- handing an agent real numbers

How you can access it: Public website, Copy/paste.
Works with: Framework agnostic.

Study the relevant design and implementation patterns, but adapt them to this project's existing architecture, visual language, accessibility requirements and conventions. Do not blindly copy the entire resource.
```

## Related

- [Refero Styles](https://dontmakeitugly.com/resources/refero-styles.md): DESIGN.md files extracted from 2,000+ real product websites, written for agents.
- [getdesign.md](https://dontmakeitugly.com/resources/getdesign-md.md): A 550-strong catalogue of DESIGN.md files, following Google's spec.
- [DESIGNMD by Hyperbrowser](https://dontmakeitugly.com/resources/hyperbrowser-designmd.md): A single-purpose tool that extracts a DESIGN.md from any URL you give it.
- [designmd.supply](https://dontmakeitugly.com/resources/designmd-supply.md): Pre-generated DESIGN.md style guides for the world's best-known brands, MIT licensed.

## In collections

- [Give your agent a DESIGN.md](https://dontmakeitugly.com/collections/design-md-for-agents.md)

DesignMD is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.