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 ​

Showing 50 of 57 sites

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
  • Atlassian DesignAtlassian's design system: tokens, primitives, component guidelines and accessibility rules, with llms.txt files for agents.Verdict UsefulShip licence, open source permissiveAgent channels llms-txtReviewed
  • Babylon.jsApache-2.0 WebGL and WebGPU engine from Microsoft, with a playground, node editors, sandbox and inspector for building 3D in the browser.Verdict UsefulShip licence, open source permissiveAgent channels llms-txtReviewed
  • 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
  • ColorBoxPalette generator built on OKLCH and OKLAB, checking WCAG contrast as you edit and exporting CSS, Tailwind, Figma tokens or JSON.Verdict Very usefulLook only licence, not statedAgent channels llms-txtReviewed
  • D3The library for bespoke data visualisation, with a gallery of notebook examples that doubles as a vocabulary of chart forms.Verdict UsefulShip licence, open source permissiveAgent channels noneReviewed
  • 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
  • Diagram DesignAgent skill that draws 45 editorial diagram types as self-contained HTML and SVG, brand-matched to your site, installed in one command.Verdict Very usefulShip licence, open source permissiveAgent channels skill, cliReviewed
  • 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
  • hamurUnstyled accessible components with one shared core and five framework adapters — React, Vue, Svelte, Angular and Solid — under the MIT licence.Verdict UsefulShip licence, open source permissiveAgent channels noneReviewed
  • 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
  • mdxcnCallouts, steps, terminals, timelines and charts for MDX, drawn with text and installed through the shadcn CLI.Verdict UsefulShip licence, open source permissiveAgent channels registry, llms-txt, skillReviewed
  • model-viewerWeb component documentation for showing interactive 3D models in a page or in AR, with a quick start, examples and FAQ.Verdict UsefulShip licence, open source permissiveAgent channels noneReviewed
  • 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
  • Mozaika588 real products decoded into measured design systems, screens and sections, queryable over MCP with DESIGN.md and token export.Verdict UsefulConditional licence, proprietary paidAgent channels mcp, llms-txt, skillReviewed
  • Needle EngineShips 3D scenes to the web from Unity, Blender or code, with a product-led site that shows the editor as the interface.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
  • Nord Design SystemNordhealth's health-care design system, with 65 Web Components documented as contracts, status badges and installable agent skills.Verdict Very usefulConditional licence, source availableAgent channels llms-txt, skillReviewed
  • Open UICross-system component research that maps names, visual states and behavior differences for common web controls.Verdict NicheConditional licence, mixedAgent channels noneReviewed
  • Pajamas Design SystemGitLab's design system docs, which switch colour mode and five theme variants live, so the palette is proved rather than described.Verdict UsefulShip licence, open source permissiveAgent channels noneReviewed
  • PeleRenders Mermaid diagrams to SVG synchronously, themed through CSS variables, with no runtime dependencies.Verdict UsefulShip licence, open source permissiveAgent channels noneReviewed
  • PrimerGitHub's design system, with tokens, primitives, component docs, UI patterns and an MCP server for agents.Verdict Very usefulConditional licence, mixedAgent channels mcpReviewed
  • 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
  • SentDeveloper-tool landing page for one SMS, WhatsApp and RCS API, with a cost estimator and a per-country rate sheet instead of plan cards.Verdict NicheConditional licence, proprietary paidAgent channels apiReviewed
  • 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
  • SkrewwwReact design system where one component set adapts through tokens across shape, surface and brand, with contracts agents can read.Verdict UsefulLook only licence, not statedAgent 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
  • SuperTurns a Notion page into a website, sold on a themed layer — custom fonts, icons, illustrations and components over a plain document.Verdict UsefulConditional licence, proprietary paidAgent channels mcpReviewed
  • 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

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).