DESIGN.md generator: the 7 real options and the catch

There are at least seven working DESIGN.md generators, they fall into four families by what they read, and none of them validates its own output. The lint step is a separate command.

Google's AI Overview for "design md generator" lists four tools and calls one of them a generator when it does not generate anything. That is the state of this category: real tools, fast churn, and almost no honest comparison of what each one can actually read.

Here is the whole field, grouped by input, with the numbers checked on 23 October 2026.

Why the input matters more than the output

Every tool here emits the same artifact: a markdown file with YAML front matter holding design tokens and a prose body holding the rules. The DESIGN.md spec fixes that shape. What separates the tools is what they are allowed to read.

• A live URL gives you real values. A crawler reads the rendered DOM and the CSSOM, so the hex codes and the type scale are the ones actually shipping, not the ones in a stale style guide.
• A Figma file gives you intent. Local variables and paint styles are what the design team decided. They are also frequently ahead of or behind production.
• A logo gives you a guess. Palette and type get derived from a brand mark. Fast, coherent, and entirely invented below the level of the logo itself.
• A hand-written file gives you reasoning. The part agents use for judgment calls is the prose, and no crawler can infer why a team picked 4px radii.
• Nothing validates automatically. Generated or hand-written, the file can contain broken token references and failing contrast ratios, and every tool here will hand it to you anyway.

That last point is the one worth internalising before you pick anything.

1. getdesign.md (VoltAgent)

getdesign.md is the result Google's AI Overview files under "Top DESIGN.md Generators", and it is not a generator.

What it does:

• Serves a browsable catalog of pre-written DESIGN.md files, described on the site as "an independent design analysis your AI coding agent reads natively"
• Covers 551 design systems, sorted into categories including Productivity & SaaS (217), AI & ML (68), Developer Tools (52) and Backend & DevOps (17)
• Backs the catalog with the open repo VoltAgent/awesome-design-md, MIT licensed, created 31 March 2026
• Offers a free tier plus a paid "Catalog Pass" for wider access
• Does not accept a URL you supply, so there is no on-demand generation

Best for: copying a known brand's visual language into a project you are starting from scratch.

Why it makes the list: because the demand it serves is the real one. That repo reported 123,025 stars on 23 October 2026, against 28,481 for google-labs-code/design.md, the specification itself. The collection of ready-made files is roughly 4.3 times as popular as the format they are written in.

Tip: if a search engine tells you getdesign.md generates a file from your site, it has conflated the catalog with the extractors below. Check which one you are actually looking at.

2. DesignMD CLI (@designmdcc/cli)

byadityaraj/designmd is the URL extractor the AI Overview puts first, and its own README advertises the whole flow as one command.

What it does:

• Runs as npx @designmdcc/cli stripe.com > DESIGN.md, with the README stating "No account, no config, no API key"
• Reads the live DOM and CSSOM for real CSS variables, breakpoints and component patterns
• Ships at version 0.2.0, MIT licensed, published 20 October 2026
• Writes straight to stdout, so it composes with anything

Best for: a one-off extraction from a site you already have permission to reference, inside an existing shell workflow.

Why it makes the list: it is the cheapest honest path from a URL to a file, and it is genuinely open. The caveat is scale. The repo showed 74 stars, and the npm package recorded 44 downloads in the month to 18 October 2026. The tool Google ranks first in this category is a 0.x side project with double-digit usage, which is worth knowing before you build a pipeline on it.

Tip: pipe the output straight into the lint command in section 7 before you commit it.

3. Design Extractor

Design Extractor is the commercial version of the same crawl, and it sells the gap the CLI leaves.

What it does:

• Takes a website URL and returns a DESIGN.md with colors, typography, spacing, radii and components plus usage rules
• Frames the goal as turning "any website into a structured design spec that AI coding agents can use to build pixel-perfect UI"
• Ships an MCP server so an agent can run the extraction itself rather than waiting for you to paste a file
• Requires signup, with pricing on a separate page
• Publishes free side tools including a DESIGN.md validator, a font finder and a color palette extractor

Best for: teams that want extraction as a service, with an agent-callable endpoint instead of a local binary.

Why it makes the list: the MCP server is the real differentiator. Once extraction is a tool the agent can call, the design context stops being a file somebody remembered to refresh. That is the same argument behind Storybook MCP and the design system MCP category generally.

4. Logofai design.md generator

Logofai ranks first organically on the query, and it is the only tool here that works from a brand mark rather than a build.

What it does:

• Takes a logo, optionally with a brand name and art direction
• Returns a design.md plus a live HTML style guide, a tokens.css of CSS variables, a tailwind.config.js and a W3C tokens.json
• Fills twelve sections, including color tokens for light and dark mode, a full type scale, spacing, component specs, motion and accessibility
• Costs 9 credits per generation, needs an account, and sits on the Pro and Business plans behind a 3-day free trial
• Completes in about a minute

Best for: a new product with a logo and nothing else, where any coherent system beats no system.

Why it makes the list: the multi-format export is the most complete of any tool here, and the tokens.json output means the result is not trapped in markdown. The honest limit is epistemic: a logo contains a palette and maybe a typeface, so everything else in those twelve sections is a plausible invention rather than an observation.

5. The Figma plugins

Three separate plugins now read a Figma file and emit markdown, which tells you the Figma-to-DESIGN.md path is contested rather than solved.

What they do, in their own words:

• Design.md "scans your Figma file and exports your entire design system as a structured Markdown document, ready to paste into a codebase, share with engineers"
• design.md create & manage "bridges the gap between design and engineering by helping you write structured, searchable documentation exactly where you work"
• Figma to DESIGN.md "turns your current selection or page into a structured DESIGN.md draft for AI-assisted design and prototyping workflows"

Best for: design teams whose Figma variables are the source of truth, where the file should lead the code rather than describe it.

Why they make the list: this is the only family that captures intent instead of output. If your Figma library is maintained, it holds decisions your production CSS has not caught up with yet. If it is not maintained, this family produces the most confidently wrong file of any option here.

Tip: the third plugin's own wording is the useful one. It produces a "draft". Treat all three that way.

6. duply

Disclosure: duply is our product. It belongs in this list because it answers the same query, and leaving it out while publishing the comparison would be the dishonest option.

What it does:

• Serves 312 published design analyses as ready-to-use DESIGN.md files, one per real product, each with colors, typography, spacing and component tokens
• Pairs every file with an entry page showing what the tokens look like in use, for example Linear, Stripe, Vercel and Supabase
• Exports the same tokens as CSS variables, Tailwind v4 theme blocks and W3C tokens.json
• Costs nothing to read and copy from the library

Best for: picking a visual language you already admire and handing your agent a file that was reviewed before it shipped.

Why it makes the list: same reason as getdesign.md, with a smaller catalog and a different bet. 312 against 551 is fewer systems; the trade is that each one is reviewed and versioned rather than bulk-extracted. Whether that trade is worth it depends on whether you intend to read the file before your agent does.

7. Write it yourself, then lint it

The last option is the one the tool pages do not sell, and it is where the other six end up anyway.

What it does:

• npx @google/design.md spec prints the specification itself, formatted for pasting into an agent prompt as context
• npx @google/design.md lint DESIGN.md validates structure against eleven rules and exits 1 on errors
• diff DESIGN.md DESIGN-v2.md reports token-level changes between versions and exits 1 on regressions
• export --format dtcg converts the tokens into a W3C Design Tokens Format Module file, so the result feeds a conventional design token pipeline
• The four rules that catch the most real problems: broken-ref for a {colors.primary} that resolves to nothing, contrast-ratio for a background and text pair below WCAG AA 4.5:1, missing-typography, and orphaned-tokens

Best for: everyone, including people who generated their file with one of the six tools above.

Why it makes the list: broken-ref and contrast-ratio are exactly the failure modes an automated extractor introduces. A crawler that pulls a palette from a live site has no way to know which pairs are used together, and a logo-derived palette has no way to know at all. Running the linter takes one command and is the only step in this whole category that can tell you the file is wrong.

If you would rather write the prose yourself from a template, designmd.co publishes a walkthrough on exactly that, opening with the fair point that "You do not have to borrow someone else's design system."

Honourable mentions

Two more worth knowing, both too small to rank as options:

• TypeUI's Firefox extension. DESIGN.md Generator - TypeUI by Zoltán Szőgyényi extracts page styles into a DESIGN.md or SKILL.md, MIT licensed, free. Version 0.1.0, last updated 18 April 2026, 250 users. Browser-extension extraction is the lowest-friction version of family one, if you accept a 0.1.0 dependency.
• designmd.sh. A public registry announced on r/ClaudeCode, pitched in the thread as "basically skills.sh for design systems. If your DESIGN.md files are public on GitHub and you want developers, designers" to find them. The matching designmd CLI on npm is at 0.2.1 with 248 downloads in the month to 18 October 2026.

How to get started

1. Pick your input honestly. Shipping site, use an extractor. Maintained Figma library, use a plugin. Logo and a blank repo, use Logofai or start from a catalog file.
2. Lint before you commit. npx @google/design.md lint DESIGN.md. If it exits 1, your agent was about to build on broken references.
3. Read the prose section. Every generated file has one, and it is the part that was inferred rather than measured. It is also the part your agent leans on for judgment calls.
4. Point the agent at the file explicitly. Dropping DESIGN.md in the repo root is necessary and not sufficient. The agent setup guide covers the instruction that makes it actually get read.

The duply workflow

If the goal is a product that looks like a product rather than like generic AI output, the generator is the smallest part of the job. The duply library gives you 312 reviewed DESIGN.md files to start from, each with a live entry page so you can see the system before you adopt it. The DESIGN.md explainer covers the format, and give your AI agent a design system covers the part after the file exists, which is getting an agent to respect it across a long session.

FAQ

Is there a free DESIGN.md generator?

Yes, several. npx @designmdcc/cli <url> is MIT licensed and needs no account. TypeUI's Firefox extension is MIT licensed and free. Catalogs including duply and getdesign.md's free tier let you copy a finished file at no cost. Logofai and Design Extractor are the paid options in this list.

What is the best DESIGN.md generator?

There is no single best, because the tools do not compete on quality so much as on input. For a live site, an extractor like @designmdcc/cli or Design Extractor reads real values. For a Figma library, use one of the three Figma plugins. For a logo alone, Logofai is the only option. For a known brand's visual language, a catalog is faster than any generator.

Can I generate a DESIGN.md from a website URL?

Yes. That is the largest family: @designmdcc/cli on the command line, Design Extractor as a service with an MCP server, and TypeUI as a browser extension. All three read the rendered page rather than a design file, so the values are the ones actually shipping.

Does getdesign.md generate DESIGN.md files?

No. It is a catalog of 551 pre-written analyses with a free tier and a paid Catalog Pass, and it does not accept a URL you supply. Google's AI Overview for "design md generator" lists it under generators, which is a category error worth knowing about.

Where can I find DESIGN.md examples?

In the catalogs, because every entry is an example. duply publishes 312 at duply.ai/library, getdesign.md publishes 551, and designmd.me describes its own set as "real design systems extracted from popular websites: colors, typography, spacing, and component patterns, as ready-to-use DESIGN.md files". The specification repo at google-labs-code/design.md also carries reference files.

How do I check a generated DESIGN.md is valid?

npx @google/design.md lint DESIGN.md. It runs eleven rules and exits 1 on errors. Design Extractor also publishes a free DESIGN.md validator. No generator in this list validates its own output, so this is a step you have to add.

Do I need a generator at all?

No. The format is plain markdown with YAML front matter, and npx @google/design.md spec prints the specification for pasting into an agent prompt. A generator saves you the token extraction, not the thinking. The prose rules, which are the part agents use for decisions no token covers, have to be written by someone who knows why the decisions were made.

Is DESIGN.md an official standard?

Not yet. Google Labs open-sourced the draft specification on 21 April 2026 under Apache-2.0, and the spec's own status section still says alpha with changes expected. Pages calling it an open standard are ahead of the document.

The short version

• For a live site: npx @designmdcc/cli <url>, free and MIT, or Design Extractor if you want it as a callable service.
• For a Figma library: one of the three Figma plugins, and treat the output as a draft.
• For a logo and nothing else: Logofai, 9 credits, with the understanding that most of the file is inferred.
• For a brand you want to borrow: a catalog. duply for 312 reviewed files, getdesign.md for 551 bulk-extracted ones.
• For any of the above: npx @google/design.md lint DESIGN.md, every time, because nothing else in this category will tell you the file is broken.

Start from a file somebody already checked: browse the duply library.

Related reading

• What is a DESIGN.md file? The format, the spec, the limits
• Give your AI agent a design system
• What are design tokens?