---
title: Give your agent a DESIGN.md
slug: design-md-for-agents
url: "https://dontmakeitugly.com/collections/design-md-for-agents"
resources:
  - design-md-spec
  - getdesign-md
  - designmd-supply
  - refero-styles
  - designmd
  - hyperbrowser-designmd
  - typeui
createdAt: "2026-09-04"
updatedAt: "2026-09-04"
---

# Give your agent a DESIGN.md

The spec, the catalogues and the extractors behind the one file that stops your agent redesigning your product on every request.

An agent with no design reference invents one, and invents a different one tomorrow. DESIGN.md is an open format from Google Labs that fixes that: tokens an agent can read, plus the reasoning behind them. Start with the spec so you know what a good file contains. Then either take one from a catalogue, extract one from a site whose look you want, or have a tool build one from your own product. Whichever route you take, the output is a plain markdown file you commit next to your code.

## Resources, in order

1. [DESIGN.md Specification](https://dontmakeitugly.com/resources/design-md-spec.md) — Google Labs' open format for describing a visual identity to a coding agent.
   Agent: Excellent. Install: `npx @google/design.md lint DESIGN.md`
   This is the thing all the DESIGN.md catalogues and extractors are built on, and it's worth reading the spec before you use any of them. The insight is that tokens alone aren't enough: an agent given values but no reasoning still makes ugly choices, so the format makes you write down the why. The linter is the underrated part, because a design file that fails contrast is a bug you can catch before it ships.
2. [getdesign.md](https://dontmakeitugly.com/resources/getdesign-md.md) — A 550-strong catalogue of DESIGN.md files, following Google's spec.
   Agent: Excellent.
   The largest collection of the lot, and the one with a real repository behind it, so you can read the files without going through the site. The framing is the right one: give the agent a reusable reference so every page follows the same visual language instead of restarting from generic defaults. There's a fair amount of upsell around the free catalogue, so know which part you came for.
3. [designmd.supply](https://dontmakeitugly.com/resources/designmd-supply.md) — Pre-generated DESIGN.md style guides for the world's best-known brands, MIT licensed.
   Agent: Excellent.
   The narrowest and most honest of the DESIGN.md sites: a fixed set of guides, generated the same way, with the code that generates them published. Useful when you want to say "build it with Stripe's restraint" and have something concrete to attach. Bear in mind these are extractions of other companies' brands, so use them for structure and proportion, not as a licence to ship someone's identity.
4. [Refero Styles](https://dontmakeitugly.com/resources/refero-styles.md) — DESIGN.md files extracted from 2,000+ real product websites, written for agents.
   Agent: Excellent.
   This solves a specific problem well. "Make it feel like Linear" is a useless prompt; a DESIGN.md that says what Linear's type scale, radii and greys actually are is not. Treat the extracted systems as a starting point to edit into your own, not a licence to clone someone's brand.
5. [DesignMD](https://dontmakeitugly.com/resources/designmd.md) — Point it at a URL and it extracts that site's design system as a DESIGN.md.
   Agent: Excellent.
   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.
6. [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.
   Agent: Good.
   Worth knowing about precisely because it does one thing. The catalogue sites are better when the look you want belongs to a famous company; this is the one to reach for when it belongs to a competitor nobody has indexed. You need a Hyperbrowser key to use it at all, which is the real cost.
7. [TypeUI](https://dontmakeitugly.com/resources/typeui.md) — Design skills, UI prompts and a shared design system, handed to your agent over MCP.
   Agent: Excellent.
   The interesting part is the workflow, not any single prompt: a design system that lives somewhere your agent can query, instead of a rules file that drifts. The public GitHub repo holds the skills and prompts if you'd rather read them than connect the server. We haven't confirmed the pricing tiers, so check before you commit a team to it.

Work down the list in order. Each linked page says what the resource is, why it's here and how an agent can use it.