Agentic Product Lifecycle

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 is inside

Colour is generated from one brand seed by @designtools/tokens, a package we publish. The skill holds the contract around it.

Drives
@designtools/tokens
Evals
3

Works with

The outside tools and connectors this skill drives.

  • @designtools/tokens, the colour and token generator we publish

This one is required. The skill is built around it rather than choosing between alternatives.

Install it

npx skills add madebymany/madebyagents --skill mxa-tokens
Read the skill itself