# DesignMD

> Paste a website URL and get a DESIGN.md file: the site's colour roles, type scale, spacing, radii, shadows and component styles, measured from the live page and written in a format an AI coding agent can follow.

DESIGN.md is a plain-text design specification. It exists because a coding agent can write the markup but cannot guess what the result is supposed to look like, so the visual decisions have to be written down somewhere the agent will read them.

Tokens are measured in a real browser against the rendered page, not inferred from a screenshot and not read out of CSS source. Where something could not be measured, the output says so rather than guessing.

**What you can generate**

- A DESIGN.md from a single page — 4 credits
- A DESIGN.md from several pages of the same site, which catches tokens a landing page never shows — 8 credits
- An HTML preview, the extracted system rendered as a page you can look at — 8 credits
- A Figma import of the tokens — 12 credits

**What the file contains**

Colour roles (canvas, surface, ink, muted, hairline, primary, on-primary) alongside the full measured palette; a type scale with size, weight, line height, tracking and case per step; a spacing scale; corner radii; shadows and elevation strategy; border widths; component styles including button variants; interaction states; measured breakpoints; and provenance — which pages were read, when, and whether stylesheets were reachable.

**Command line**

The CLI is `@crowdlinker/designmdme`, published on npm.

- `npm install -g @crowdlinker/designmdme` — install
- `designmdme login` — authenticate; also `logout`, `whoami`
- `designmdme stripe.com` — write DESIGN-stripe-com.md in the current directory
- `designmdme --website stripe.com` — the same, written out longhand
- `designmdme stripe.com --single-page` — landing page only, 4 credits
- `designmdme stripe.com --multi-page` — crawl key pages, 8 credits
- `designmdme stripe.com --html` — also write DESIGN-stripe-com.html
- `designmdme stripe.com --output ./docs/stripe.md` — choose the path
- `designmdme list` — your generations
- `designmdme usage` — credits remaining

For agents, the CLI is packaged as a skill: `npx skills add crowdlinker/skills --skill designmdme-cli --agent claude-code -g -y`. An agent with it installed can generate a DESIGN.md for a reference site before writing any UI code.

**Figma**

The plugin is "DesignMD — Import Design Tokens". Pick one of your completed generations and it writes the tokens into the open Figma file: Figma Variables in a "DesignMD Tokens" collection covering colours, spacing, radius, border widths, opacity and z-index; text and colour Styles; and a visual board of the palette, type and components. It costs 12 credits per import. Install it from the Figma Community: https://www.figma.com/community/plugin/1664289937696642660/designmd-import-design-tokens

**Credits**

New visitors get 4 credits without an account, and 20 more on first sign-in. Packs are $5 for 50 credits, $15 for 175 credits, $30 for 375 credits. Credits do not expire. Reading Discover and comparing two Discover sites are free and need no account.

## Core pages

- [DesignMD](https://designmd.me): generate a DESIGN.md from any URL
- [What is DESIGN.md](https://designmd.me/what-is-design-md): what the file contains and how to hand it to a coding agent
- [Discover](https://designmd.me/discover): DESIGN.md files already generated for well-known sites, free to read
- [Compare](https://designmd.me/compare/new): two design systems side by side — colour roles, type, shape, depth, components
- [CLI](https://designmd.me/cli): install, every command and flag, and the agent skill
- [Figma plugin](https://designmd.me/figma): importing the extracted tokens into a Figma file
- [Benchmarks](https://designmd.me/benchmarks): multi-page against single-page extraction quality
- [Pricing](https://designmd.me/pricing): credit costs per generation type and what the packs cost

## Writing

- [Why AI-Generated Websites All Start Looking the Same](https://designmd.me/blog/why-ai-generated-websites-look-the-same): Ask three different agents to "make it modern" and you get three versions of the same page. That is not a failure of the model. It is a gap in what you told it.
- [How to Make Your AI-Built Website Look Less Like AI](https://designmd.me/blog/make-your-ai-built-website-look-less-like-ai): Nine changes that move an AI-generated page from passable to deliberate. Mostly about removing things.
- [DESIGN.md, Design Tokens, Figma or Screenshots: What Should You Give Your AI Coder?](https://designmd.me/blog/design-context-for-ai-coders-compared): Six ways to tell an agent what a thing should look like, what each is actually good at, and where each one quietly fails.
- [Your AI Coder Can Build the UI. Who Decides What It Should Look Like?](https://designmd.me/blog/who-decides-what-the-ui-should-look-like): Implementation stopped being the bottleneck. Direction became it. Most people have not noticed the swap yet.
- [A Practical DESIGN.md for Your Next AI Project](https://designmd.me/blog/a-practical-design-md-for-your-next-project): Write the file in about an hour, section by section, with a worked example you can copy. Nine parts, and the last one matters most.
- [How to Keep AI-Built Products Consistent as They Grow](https://designmd.me/blog/keeping-ai-built-products-consistent): The homepage looks good. Six pages later it looks like six people built it. Here is the mechanism behind that, and the fix.

## Optional

- [Blog index](https://designmd.me/blog)
- [What's new](https://designmd.me/whats-new)
- [Privacy policy](https://designmd.me/privacy-policy)
- [Terms of use](https://designmd.me/terms-of-use)
- [Sitemap](https://designmd.me/sitemap.xml)