Design Atlas

← Atlas

DESIGN.md files ​

Design systems written as a single markdown file an agent can read: the libraries that collect them, the tools that generate them from a live site, and the formats they follow.

Start here ​

  • getdesign.md — about 73 free MIT brand files with light and dark previews, installed with one npx getdesign add command.
  • OpenDesign — 151 forkable Apache-2.0 packages on GitHub, each with a manifest, compiled tokens.css and recorded provenance, plus an MCP server.
  • DesignMD.cc — free, no-account generator that measures a live site's computed CSS before an LLM writes it up; MIT CLI included.
  • Refero Styles — 2,000+ brand styles searchable by mood, with an MCP connection.
  • DESIGN.md — the community library to browse by tag, with an MCP server and a zero-overhead CLI.

All sources ​

Ship: reuse with the notice or credit the licence asks forConditional: read the terms before you reuse anythingLook only: no licence stated, so take ideas and nothing else

  • agentcnBackend agent recipes in shadcn format (19 recipes × 4 frameworks), including one that extracts a DESIGN.md; no UI.Verdict NicheShip licence, open source permissiveAgent channels llms-txt, registry, api, skillReviewed
  • AppinspoA curated feed of about 760 app shots by device, plus a tool that turns a screenshot into an AI style brief.Verdict UsefulLook only licence, not statedAgent channels promptsReviewed
  • AuraAI landing-page builder with templates, components, assets, a ~725-file DESIGN.md library and a remote MCP.Verdict UsefulConditional licence, proprietary paidAgent channels mcpReviewed
  • Design DNATurns references into a three-part JSON profile (tokens, style, WebGL effects), with measured colours and a ΔE verify loop.Verdict UsefulShip licence, open source permissiveAgent channels skillReviewed
  • design.devFree generators for DESIGN.md, AGENTS.md, CLAUDE.md and more, plus component prompts and style packs; strict terms.Verdict UsefulConditional licence, proprietary freeAgent channels llms-txt, prompts, skillReviewed
  • DESIGN.mdCommunity library of whole design systems as single markdown files, with light/dark previews, an MCP server and a CLI.Verdict Very usefulLook only licence, not statedAgent channels mcp, cliReviewed
  • Design.md Store51 free brand-inspired DESIGN.md packs plus clear docs on the Google DESIGN.md format; strict reuse terms.Verdict UsefulConditional licence, proprietary paidAgent channels llms-txtReviewed
  • DesignMD (designmd.me)Credit-based URL-to-DESIGN.md generator with CLI, agent skill, Figma import and a free Discover gallery.Verdict UsefulConditional licence, mixedAgent channels llms-txt, cli, skillReviewed
  • DesignMD.ccFree URL-to-DESIGN.md generator measuring live CSS, with an MIT CLI and a benchmark library.Verdict Very usefulConditional licence, mixedAgent channels cli, apiReviewed
  • designmd.supplyFree open-source domain-to-DESIGN.md generator; copy as markdown, Tailwind v4 theme or CSS variables.Verdict UsefulConditional licence, mixedAgent channels noneReviewed
  • extract-design-systemPulls colours, fonts, spacing, radii and shadows from a public URL into starter tokens.json and tokens.css, with a CI audit.Verdict UsefulShip licence, open source permissiveAgent channels mcp, cli, skillReviewed
  • getdesign.md~73 free MIT brand-analysis DESIGN.md files with previews and a one-command npx getdesign add install.Verdict Very usefulConditional licence, mixedAgent channels cliReviewed
  • HallmarkMIT anti-slop skill from Together AI: picks the page structure first, then runs 57 slop-test gates.Verdict Very usefulShip licence, open source permissiveAgent channels skillReviewed
  • Hyperbrowser DESIGNMDPaste a domain, get a basic Google-style DESIGN.md via Hyperbrowser's branding API (bring your own key).Verdict NicheLook only licence, not statedAgent channels apiReviewed
  • ibelick UI SkillsSeven short MIT skills: baseline-ui rules, motion-performance and accessibility fixes, and an evidence-gated improve-ui auditor.Verdict Very usefulShip licence, open source permissiveAgent channels mcp, cli, skillReviewed
  • ImpeccableApache-2.0 design skill with 24 commands, a deterministic slop detector for CI, and PRODUCT.md/DESIGN.md context.Verdict Very usefulShip licence, open source permissiveAgent channels llms-txt, cli, skillReviewed
  • NeuformRemixable AI-generated landing pages with per-template design breakdowns and 71 copyable prompt skills.Verdict UsefulConditional licence, proprietary paidAgent channels promptsReviewed
  • OpenDesignApache-2.0 local design engine for coding agents, with 151 forkable DESIGN.md packages and MCP.Verdict Very usefulShip licence, open source permissiveAgent channels mcp, cli, skillReviewed
  • Refero Styles2,000+ real brand styles extracted into agent-readable DESIGN.md files, searchable by mood, with an MCP connection.Verdict Very usefulLook only licence, not statedAgent channels mcpReviewed
  • Stitch SkillsGoogle Labs' Stitch skills and source of the "Stitch format"; three DESIGN.md writers with different layouts.Verdict UsefulShip licence, open source permissiveAgent channels skillReviewed
  • StyleSeed23-skill engine that locks decisions in STYLESEED.md, builds OKLCH palettes from one colour, and scores UI to 80 or above.Verdict UsefulShip licence, open source permissiveAgent channels skillReviewed
  • SuperdesignDrives the hosted superdesign.dev canvas from your agent to branch drafts and compare models.Verdict UsefulShip licence, open source permissiveAgent channels cli, skillReviewed
  • TailGridsReact and Tailwind library with blocks, Figma system, CLI, MCP server, llms.txt and a design.md; MIT core, paid Pro blocks.Verdict UsefulConditional licence, mixedAgent channels mcp, llms-txt, cli, registryReviewed
  • TypeUIStyle-named design skills (SKILL.md + DESIGN.md) via an MIT CLI/registry and a paid hosted MCP.Verdict UsefulConditional licence, mixedAgent channels mcp, cli, skillReviewed
  • TypeUI DESIGN.md ExtractorMIT Chrome extension that turns the open tab's computed styles into a DESIGN.md or SKILL.md, locally.Verdict UsefulShip licence, open source permissiveAgent channels skillReviewed
  • UI Skills306 design-engineering skills from 84 authors, with a routing skill, CLI, MCP and 18 real company DESIGN.md files.Verdict Very usefulConditional licence, mixedAgent channels mcp, llms-txt, cli, skillReviewed
  • UI UX Pro MaxSearchable local database of styles, palettes and font pairs, queried by a script; writes MASTER.md plus page overrides.Verdict Very usefulShip licence, open source permissiveAgent channels cli, skillReviewed
  • VessaPaid hosted brand guidelines with motion tokens, a public brand.json and llms.txt per brand, and an OAuth MCP.Verdict UsefulLook only licence, not statedAgent channels mcp, llms-txtReviewed
  • visualize (display.dev)Brand-aware HTML reports, decks and dashboards, checked by named bans and deterministic detectors.Verdict Very usefulShip licence, open source permissiveAgent channels skillReviewed

Format comparison ​

"Core" below means the eight body sections of Google's spec (Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts) or their counterparts in the nine-part layout that awesome-design-md popularised (Visual Theme & Atmosphere through Agent Prompt Guide). DESIGN.md and Refero Styles are left out because their pages don't document a fixed layout.

SourceBase formatSections beyond the coreDeliveryLicence of files
designmd.supplyGoogle spec (version: alpha YAML, {token} references)noneCopy button (markdown, Tailwind v4, CSS variables); self-hostNot stated; app code MIT
Design.md StoreGoogle Labs spec, with Spacing in place of LayoutAccessibility, MotionManual download, llms.txt indexCustom: any project, no republishing raw files
getdesign.mdGoogle Stitch spec (the README lists the nine-part layout)Responsive Behavior, Iteration Guide; light/dark preview HTMLnpx getdesign add, GitHub, downloadMIT (free set); paid files not resellable
AuraGoogle-style YAMLComposition, Motion, WebGL & Effects, Guardrails (no Do's and Don'ts)Copy from site, remote MCPNo per-item licence; Pro templates need a paid plan
NeuformGoogle section orderIcons, Buttons, Motion, WebGL/Three.js notesDESIGN.md tab per template (may need an account)Not stated
Hyperbrowser DESIGNMDThin Google-style YAML (colors, heading/body fonts)Brand Identity; lacks spacing, radius, elevation, components and Do's and Don'tsCopy/download, SDK callNot stated; repo has no licence file
DesignMD (designmd.me)Nine-part layout with YAML front matterResponsive Behavior, Agent Prompt Guide, provenance recordCLI, agent skill, Figma importNot stated; terms reserve rights
DesignMD.ccNine-part layoutResponsive Behavior (measured breakpoints), Agent Prompt Guide; tokens JSONWeb, npx @designmdcc/cliNot stated; CLI MIT
OpenDesignNine-part layout, plus manifest.json and tokens.cssResponsive Behavior, Agent Prompt Guide with known gaps; optional USAGE.md, DTCG JSON, Tailwind v4GitHub repo, od CLI, MCPPer package (manifest.source); software Apache-2.0
TypeUIOwn format: short YAML + Overview, Style Foundations, ColorsCompanion SKILL.md: Accessibility, Writing Tone, Do/Don't rules, Component Rule Expectations, Quality Gatesnpx typeui.sh pull, GitHub, OAuth MCPRegistry MIT; site files under an EULA
TypeUI DESIGN.md ExtractorTypeUI format, no YAMLMission, Brand, Accessibility, Writing Tone, Quality Gates (mostly fixed template text)Chrome extension, local downloadMIT template; extracted brand values aren't yours
ImpeccableGoogle Stitch format, written by /impeccable documentSeparate PRODUCT.md (users, purpose, accessibility); its detector checks code against the documented fonts, colours, type sizes and radiiAgent skill command, npx impeccableNot stated; tool Apache-2.0
design.devGoogle spec, linted against eight rules that mirror @google/design.mdExports CSS variables, Tailwind v4 or DTCG JSON; its style packs also ship as SKILL.md, a Cursor rule and a prompt overlayWeb generator (copy or export), style packs at fixed URLsNot stated; Terms forbid republishing
agentcn (Extract DESIGN.md recipe)designmd.supply's pipeline with one vision-model callTailwind v4 @theme block and CSS variablesshadcn CLI or MCP install into your agent project; needs a context.dev keyRecipe code MIT; output not stated
UI Skills18 files published by the companies themselves; layout not documentedcreate-design-md skill for writing your ownSite collection, CLI, MCPNot stated per file; check each publisher
Vessa (not a DESIGN.md)Own brand.json (vessa.brand v1), plus a markdown llms.txtNine fixed sections including logo and clear space, moodboard, applications and voice do's and don'ts; colour roles with usage share and CMYK; motion easings, durations and staggerPublic URL per brand, OAuth MCP for editingNo licence to reuse other people's guidelines

What a complete DESIGN.md tends to contain, taken across these sources:

  • YAML front matter with version, name, description, and colors, typography, spacing, rounded and components tokens, where components point at other tokens by path ({colors.primary}) instead of repeating values.
  • An overview of the visual theme and atmosphere: mood and intent in a few sentences.
  • Colors by role, with prose on when and why to use each one rather than a second list of hex codes, and optionally each colour's rough share of the palette (Vessa).
  • Typography as a role table (size, weight, line height, tracking) for display, heading, body and label.
  • Layout and spacing: the base rhythm and the scale.
  • Elevation and depth, and shapes (the radius scale).
  • Component stylings with the states each one must cover.
  • Do's and Don'ts written as hard limits ("no new accent colours") rather than advice.
  • Responsive behaviour with the actual breakpoints.
  • Accessibility (a WCAG AA target, contrast, visible focus) and motion (named durations, easing curves and stagger) as standard sections.
  • Brand material beyond the UI where it matters: logo files and clear space, and voice do's and don'ts (Vessa).
  • An agent prompt guide at the end: example prompts, an iteration guide for extending the system, and a list of known gaps.
  • Provenance: which pages were read, when, and which values were measured versus inferred.
  • Optional companions: a stricter SKILL.md with quality gates, light and dark preview pages, and compiled token files (CSS variables, Tailwind, DTCG JSON) rebuilt from the same source.
  • A separate product context file (who it's for, what it does, accessibility needs) kept beside the visual rules, so every design command reads both (Impeccable's PRODUCT.md).
  • A pointer from AGENTS.md to the DESIGN.md, so any agent that reads the project file finds the design system (design.dev).

Patterns worth reusing ​

  • Measure first, write second: take token values from computed styles and live media queries, and let the LLM only describe them (DesignMD.cc, designmd.supply).
  • Keep uncertainty in the prose, never in the token values, and write "not measured" instead of inventing a number (designmd.supply, designmd.me).
  • Crawl several pages, not just the homepage, and repeat the extraction in dark mode before trusting a file (designmd.me, TypeUI DESIGN.md Extractor).
  • Keep one active DESIGN.md per project so the agent never gets conflicting instructions (TypeUI).
  • Ship ready-made rules-file snippets (CLAUDE.md, .cursor/rules, Copilot instructions) that tell each agent to treat the file as ground truth (DesignMD.cc, designmd.me).
  • Keep the file next to the HTML it was derived from, so the agent has both the rules and a concrete reference (Aura).
  • Lint the file in CI (valid YAML, resolvable references, contrast) so it stays trustworthy as it changes (Design.md Store, design.dev).
  • Check new UI against the project's own documented tokens, not only generic rules, and fail the build on drift (Impeccable).
  • Keep who and why (PRODUCT.md) apart from how it looks (DESIGN.md) (Impeccable).
  • Prefer files a company publishes about its own system when you want a real, maintained reference rather than a reverse-engineered one (UI Skills).
  • Publish a machine-readable twin of every human-readable guideline, as JSON and llms.txt at stable URLs (Vessa).
  • Ship one style in several formats (DESIGN.md, SKILL.md, an editor rule) from a single source, so every agent gets the same constraints (design.dev).
  • Name styles by aesthetic rather than by brand when you want files others can reuse without trademark worries (TypeUI).

Pitfalls ​

  • Almost no generator states a licence for its output: MIT on a CLI or repo covers the tool, not the brand description it writes (DesignMD.cc, designmd.supply, Hyperbrowser DESIGNMD, designmd.me).
  • Libraries that do state terms are often strict: no republishing raw files (Design.md Store), no redistribution or competing registries (TypeUI's EULA), no products confusable with the referenced brand (getdesign.md).
  • Brand-derived files describe someone else's identity; use them to understand a style, and keep logos, trademarks and imagery out of your product.
  • Prose sections are usually LLM-written and some values are marked as inferred; check the Do's and Don'ts against the live site.
  • Formats don't fully interoperate: the TypeUI extractor has no YAML block, Aura drops Do's and Don'ts, Hyperbrowser's output lacks spacing and components, and Vessa's brand.json is its own format, so tools built for the Google spec may not parse them without conversion.
  • Extraction recipes can depend on paid services: agentcn's DESIGN.md recipe needs a context.dev key, and its default model IDs are hard-coded.
  • Generating from someone else's site raises the same rights question as any brand file; Hallmark's study asks you to confirm the source is your own or a public reference for your brand before it writes a design.md.
  • Headline counts are often inflated or inconsistent (getdesign.md's 550+ versus about 73 free files, OpenDesign's 151 versus 152+, DesignMD.cc's five versus ten free runs); trust the repo or the FAQ over the landing page.
  • Several sites block plain curl or forbid automated retrieval in their terms; use the official CLI or GitHub repo for scripted access.
  • Cached files can lag behind the live site they describe (designmd.supply).