Design Atlas
Type
tool
Verdict
Useful
Licence
Conditional licence, mixedmixedfree to use on the site. The app's source (context-dot-dev/designmd-supply) is MIT. Self-hosting needs your own Context.dev and Vercel AI Gateway keys. Not stated for the licence of the generated DESIGN.md files, and the site has no terms page.
Agent channels
none
Pricing
free
Reviewed

← Atlas · Topics: design-md, agents-and-prompts, typography-and-styles

designmd.supply ​

Type
tool
Verdict
Useful
Licence
Conditional licence, mixedmixedfree to use on the site. The app's source (context-dot-dev/designmd-supply) is MIT. Self-hosting needs your own Context.dev and Vercel AI Gateway keys. Not stated for the licence of the generated DESIGN.md files, and the site has no terms page.
Agent channels
none
Pricing
free
Reviewed

What it is ​

designmd.supply is a small open-source Next.js app from Context.dev. You type a public domain and it returns a DESIGN.md in Google's spec format. It calls four Context.dev APIs (styleguide tokens, brand data, screenshot, and page markdown) and passes the results to an LLM, which writes the file. The homepage shows a curated set of 44 domains: mostly large public companies (Apple, Walmart, Visa, ExxonMobil...) plus well-known tech brands (Stripe, Linear, Notion, Figma).

When to open it ​

  • When you want a free, no-account DESIGN.md for a specific domain and can accept LLM-written prose.
  • When you want the tokens as a Tailwind v4 @theme block or as CSS variables, not only as markdown.
  • When you want to study or self-host a working extraction pipeline, since the whole prompt is in the repo.

Most useful ​

  • Each guide page has three copy tabs: raw DESIGN.md, a Tailwind v4 @theme block, and :root CSS variables. The line and character counts are shown.
  • An "ingredients" panel shows the raw inputs the model received (the live screenshot and the brand logos).
  • The format follows the Google spec. The YAML front matter has version: alpha, name, description, colors, typography, rounded, spacing and components, with {colors.primary}-style references. The body has Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, and Do's and Don'ts.
  • The prompt tells the model to take token values from the extracted styleguide data and to express uncertainty in the prose, never in the token values.

Using it with agents ​

Copy the DESIGN.md from a guide page into your project root and point the agent at it. There is no CLI, MCP or download endpoint. The only way to get a file is the Copy button, or running the app yourself (its /api/design-md route returns cached files). Because it follows the Google spec, the output should work with other tools built for that spec.

Watch out for ​

  • The prose is generated by an LLM. Only the token values come from measured data, so check the Do's and Don'ts against the real site.
  • No licence or terms are stated for the generated files. The MIT licence covers the app's code, not the brand descriptions it produces.
  • Files are cached after the first run, so a guide can be out of date compared with the live site.
  • The site sits behind a bot checkpoint, so plain curl gets an HTTP 429 even though it loads in a browser.

Reusable ideas ​

  • Offer the same tokens in several ready-to-paste formats (markdown spec, Tailwind theme, CSS variables) so they fit any stack.
  • Show the source evidence (screenshot, logos) next to the generated spec so readers can judge how accurate it is.
  • Keep one written "spec summary" in the generator prompt so every file comes out with the same keys and section order.

DesignMD (designmd.me), Hyperbrowser DESIGNMD, getdesign.md, Refero Styles, DESIGN.md