Design System
Export a Design System as Markdown and design tokens for coding assistants.
Export writes DESIGN_SYSTEM.md, a Markdown file for a coding assistant to read before it builds interface: the rules it must follow first, then page archetypes, patterns, components with the source files to reuse, and tokens. The same page downloads the whole system as JSON and the tokens as tokens.json and tokens.css. Exports contain approved content only.
Get started freeDESIGN_SYSTEM.md
The file is written in this order: critical rules, important rules, principles, other rules, page archetypes, patterns, components, tokens, content rules and accessibility rules. At Standard and Complete detail, drafts follow under a heading saying they are not approved for general use. Deprecated components and patterns come last, under a heading saying not to use them in new work, each with what replaces it.
- Detail
- Compact has critical rules, principles, pattern rules, component sources and semantic tokens. Standard has most guidance. Complete has everything, including examples and states.
- Scope
- The entire Design System, Foundations, or the components or patterns you select. A selection brings the assistant rules written for it, and Important and Critical rules are always included.
- What are you building?
- An optional line, such as Customer list page, printed at the top of the file.
- Copy context
- Copies the Markdown instead of downloading it.
- The brand
- A Standard or Complete export of the whole system ends with the Brand section's colors, typography, logos and written guidance.
Rules a coding assistant reads first
Assistant rules are instructions written for coding assistants. Each has a scope (global, component, pattern or platform) and a priority of Normal, Important or Critical, and Critical rules come first in every export.
- Component instructions
- A component's Implementation instruction, such as "Use the existing component. Do not create local styles for it.", is repeated in exports with its source file and styles file.
- Rules from your repository
- A codebase import records the interface instructions in AGENTS.md, CLAUDE.md and style guides as rules, set to Critical where the file says they must always be followed.
- Approved content only
- Anything still under Needs review is left out, and the Export page says how much is waiting.
Token and system files
- design-system.json
- The complete system in the Magpie Design System format, which Magpie imports.
- tokens.json
- The tokens in the W3C Design Tokens format.
- tokens.css
- The tokens as CSS custom properties in :root. A token that refers to another becomes var() of that token's variable, and a color's value for another theme goes under :root[data-theme] with that theme's name, such as dark.
- ZIP
- All of these files, DESIGN_SYSTEM.md at Complete detail, a README and the Brand section's downloadable files.
- Import again
- A downloaded DESIGN_SYSTEM.md or design-system.json can be imported into Magpie again.
A section for AGENTS.md or CLAUDE.md
The Export page gives a section to paste into AGENTS.md or CLAUDE.md, the instruction files a coding assistant reads in a repository. It names the Design System and the file it is documented in, and tells the coding assistant to consult that file before adding interface, to reuse documented components and page patterns, and not to create new colors, control sizes, modal patterns or navigation conventions unless required.
Magpie does not edit those files; you paste the section yourself.
The current system at a stable address
When the system is unlisted or public and its For developers section is shared, /design-system/<address>/assistant.md returns the system as Markdown as it is when the address is fetched, without the sections that are not shared. Adding ?level=compact, ?level=standard or ?level=complete changes the detail.
The shared For developers section lists a context link for each component and pattern, the files to download, the section for AGENTS.md and the contents of tokens.css. A private system's address needs a Magpie sign-in, so a coding assistant cannot read it.
Give your coding assistant your design rules.
Create a Magpie account, open Design System, write or import a system, then choose Export.