mxa-tokens
Generates a project's whole design-token system, colour from one brand seed plus the spacing, size, type, radius, shadow and motion scales, and checks the tokens reach the running app.
- Generates the whole colour system, every tint and shade, from a single brand colour.
- Covers the spacing, size, type, radius, shadow and motion scales as well as colour, so nothing is styled from a literal number.
- Checks that the generated tokens reach the running app, because a palette nothing imports is not a design system.
- Re-themes a project from a new brand colour without anyone editing values by hand.
- Explains why a colour utility does nothing, which on this stack usually means a stock class the generator has cleared.
What it uses
Default
@designtools/tokens
The colour and token generator we publish.
Colour is generated from one brand seed by @designtools/tokens, a package we publish. The skill holds the contract around it.
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-tokens