Design Atlas

← Atlas

Documentation ​

How sites document components, design systems and style — for human readers and increasingly for coding agents.

Start here ​

  • The Component Gallery — aggregates how 95 different design systems document the same components.
  • shadcn/ui — llms.txt and an MCP registry published alongside human-facing docs.
  • DESIGN.md — a whole design system distributed as a single markdown file.
  • Refero Styles — real brand styles extracted into AI-readable DESIGN.md files.
  • Carbon Design System — a large system documented well for both audiences: tabbed component pages for people and a clean llms.txt index for agents.

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

  • Adobe SpectrumAdobe's Spectrum design system pairs visual foundations, components and patterns with separate open-source implementations.Verdict Very usefulConditional licence, mixedAgent channels noneReviewed
  • Ahmad ShadeedHands-on CSS layout articles and an interactive lab for inspecting modern selectors, grids and container queries.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Angular NativeAlpha MIT framework for building native iOS and Android apps with Angular, Expo and React Native's rendering layer.Verdict NicheShip licence, open source permissiveAgent channels llms-txtReviewed
  • Anime.jsJavaScript animation engine with fine-grained control over complex sequences and SVG effects, and a clear, well-documented API.Verdict UsefulShip licence, open source permissiveAgent channels noneReviewed
  • Anthropic Design PluginAnthropic's Apache-2.0 designer plugin: structured critique, UX copy, WCAG review and handoff templates.Verdict UsefulShip licence, open source permissiveAgent channels skillReviewed
  • AstryxMeta's React design system with rich form controls, strong accessibility hooks and a plugin-based table.Verdict Very usefulShip licence, open source permissiveAgent channels cliReviewed
  • Base UIUnstyled, accessible React primitives from the Radix, Floating UI and MUI teams, now shadcn's default.Verdict Very usefulShip licence, open source permissiveAgent channels llms-txtReviewed
  • Carbon Design SystemIBM's Apache-2.0 system: about 50 components, 2,775 icons and 1,576 pictograms, llms.txt, and an IBMid-gated MCP.Verdict Very usefulShip licence, open source permissiveAgent channels mcp, llms-txt, skillReviewed
  • Design System Checklist230 items across language, foundations, 29 components and maintenance, with shareable progress links.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • 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
  • Designer Skills111 small design-practice skills in nine plugins, with a router that picks one entry point.Verdict UsefulShip licence, open source permissiveAgent channels skillReviewed
  • Devouring DetailsRauno Freiberg's paid interactive manual on interaction craft, with 23 chapters and downloadable React prototypes.Verdict Very usefulLook only licence, not statedAgent channels noneReviewed
  • DialKitMIT live control panel for tuning springs, easing, layout and timelines in React, Vue, Svelte, Solid and plain JS.Verdict Very usefulShip licence, open source permissiveAgent channels llms-txt, promptsReviewed
  • Every LayoutIntrinsic CSS layout primitives with free visual examples, interactive demos and configurable generators.Verdict UsefulConditional licence, proprietary paidAgent channels noneReviewed
  • GPUI KitA Rust desktop UI framework showcase with component examples, theme controls, docking, data tables and application stories.Verdict UsefulConditional licence, mixedAgent channels llms-txtReviewed
  • IBM Design Language colorIBM's color reference shows palette families, accepted gradients, UI themes, accessibility rules and examples in use.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Inclusive ComponentsHeydon Pickering's 11 in-depth posts on making common components accessible, each ending in a checklist.Verdict Very usefulLook only licence, not statedAgent channels noneReviewed
  • Josh W. ComeauInteractive CSS guides where you can resize layouts, change rules and inspect the resulting interface.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • Laws of UX30 psychology principles with takeaways and origins, served as llms.txt and markdown; CC BY-NC-ND.Verdict Very usefulConditional licence, cc noncommercialAgent channels llms-txtReviewed
  • Modern CSS SolutionsPractical CSS references with rendered examples for responsive layouts, components, typography and interaction states.Verdict UsefulLook only licence, not statedAgent channels noneReviewed
  • MorphrigInteractive manual on how SVG icon morphing works, with measured browser findings and llms-full.txt.Verdict UsefulLook only licence, not statedAgent channels llms-txtReviewed
  • No AI SlopRemoves AI writing patterns while keeping the writer's voice, and has a detect-only mode.Verdict UsefulShip licence, open source permissiveAgent channels skillReviewed
  • Open UICross-system component research that maps names, visual states and behavior differences for common web controls.Verdict NicheConditional licence, mixedAgent channels noneReviewed
  • RadixWorkOS-maintained primitives, Themes, 15px icons and the 12-step Radix Colors system.Verdict Very usefulShip licence, open source permissiveAgent channels llms-txtReviewed
  • 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
  • Shadcn LabsIndex of the independent Shadcn Labs registries: termcn, pdfcn, emailcn, ogimagecn, shadercn and more.Verdict UsefulShip licence, open source permissiveAgent channels noneReviewed
  • shadcn/uiAccessible React components copied into your repo and edited freely, with llms.txt, a CLI and an MCP registry.Verdict Very usefulShip licence, open source permissiveAgent channels mcp, llms-txt, cli, registry, skillReviewed
  • shieldcnshadcn-styled README badges, charts and headers from 45+ providers, with a README builder and agent skill.Verdict UsefulShip licence, open source permissiveAgent channels llms-txt, registry, skillReviewed
  • startercnMIT Next.js template for publishing your own shadcn registry, with Fumadocs docs, llms.txt and skill discovery.Verdict UsefulShip licence, open source permissiveAgent channels llms-txt, api, skillReviewed
  • Stop SlopSmall prose skill listing AI phrases and sentence shapes to cut, with a 50-point score.Verdict UsefulShip licence, open source permissiveAgent channels skillReviewed
  • The Book of ShadersClassic step-by-step guide to fragment shaders with editable live examples; learning only, all rights reserved.Verdict Very usefulConditional licence, proprietary freeAgent channels noneReviewed
  • The Component GalleryReference that compares how 95 design systems name, structure and document the same 60 components.Verdict Very usefulLook only licence, not statedAgent channels noneReviewed
  • UI Playbook (stale)Rauno Freiberg's nine component "plays" listing the states, traps and ARIA rules each one needs.Verdict UsefulStaleShip licence, open source permissiveAgent channels noneReviewed
  • UIAble790+ components, 390+ blocks and templates built on shadcn/ui and Base UI, with command-palette-searchable docs.Verdict Very usefulConditional licence, mixedAgent channels noneReviewed
  • 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

Patterns worth reusing ​

  • Publish an llms.txt or markdown index alongside human docs so agents can parse the catalog directly, without scraping HTML.
  • Distribute an entire design system as one markdown file an agent can treat as source of truth for style.
  • Tag each documented entry with badges (accessibility, code examples, unmaintained) for an at-a-glance trust signal.
  • Link out to the original system's documentation instead of duplicating anatomy and guidance content.
  • Serve component docs at predictable URLs (e.g. /r/<name>.md) so an agent can fetch exactly the page it needs.
  • Offer a Human/Agent toggle on the docs: the agent view states purpose, workflow and install snippets in plain Markdown, with ready prompts next to it (DialKit).
  • Document a spec format with best-practice pages on writing for AI, semantic token naming and versioning, not just a field reference (Design.md Store).
  • Serve markdown from the same URLs through content negotiation (Accept: text/markdown) instead of keeping a separate agent docs site, and say in llms.txt when the resource fits and when it doesn't (Laws of UX).
  • Document every component under the same headings so a missing state or accessibility note stands out (UI Playbook, Carbon Design System).
  • Put a live, editable example or a scrubbable figure next to each concept, and publish the measurements behind any claim (The Book of Shaders, Morphrig).
  • End each component page with a short checklist a reviewer can tick off (Inclusive Components).
  • Export README images as light and dark <picture> pairs so they follow the reader's theme (shieldcn).

Pitfalls ​

  • Aggregators are only a gateway: detailed anatomy and guidance still live on the original system's site, not inline.
  • Community-submitted documentation varies in freshness; some catalogued systems are explicitly flagged "unmaintained."
  • No licence is stated for many community-submitted design systems — verify before using one on a commercial project.
  • Terms can forbid automated retrieval even when robots.txt allows AI crawlers; read both before pointing an agent at a docs site (Design.md Store).
  • Free to read is not free to reuse: The Book of Shaders reserves all rights, Laws of UX forbids derivatives and commercial use, and Morphrig states no licence at all.
  • Good docs date too: UI Playbook was last pushed in January 2023 and Inclusive Components in 2018, so check examples against current standards.
  • Some docs only render in the browser; point agents at the repo sources instead (Design System Checklist's src/translations/en/*.js, UI Playbook's MDX files).