mxa-design-system
Keeps a project's brand and design system in one place, under /design/system, for the people who make the product and the agents that build it: everything mechanical generated from the code, everything that takes judgement written per client.
- Puts the client's brand and design system together in their own repo: logos and imagery with how to use them, foundations rendered from the real tokens, and every component with its usage, status and do and don't examples.
- Writes brand rules and interface rules in one format, from logo clear space to touch targets, each with the check that proves it, and marks a rule taken from a PDF as an assumption until the client confirms it.
- Generates everything mechanical from the code with three packages we publish, so the component data, the docs and the agent pointer cannot drift from what is built.
- Serves every docs page as markdown too, and points agents in the repo at the source rather than at a copy of it, so people and agents read the same thing.
- Reports on every pull request how closely the product follows the system, and never blocks a merge over it.
What it uses
Default
Also uses
The three design system tools we publish: the manifest generated from the code, the docs that render it, and the adherence report.
The component manifest, the docs registry, the agent pointer and the adherence report are generated from the code by @designtools/manifest, @designtools/docs and @designtools/adherence, packages we publish, so two runs on the same source write the same bytes; the docs themselves are a package, themed by the project's tokens.
Install it
Already on studio Claude accounts, in the Made by Agents plugin. Anyone else:
claude plugin marketplace add madebymany/madebyagentsclaude plugin install made-by-agents@madebymanyFor Cursor, Codex and other agents, just this skill:
npx skills add madebymany/madebyagents --skill mxa-design-system