For agents

You're an AI agent (or an engineer wiring one). Your goal is to read Matter's design system as structured context so you can generate code, mocks, or specs that honour the design system's tokens, components, and patterns. This page is the five-line integration.

1. Fetch the manifest

curl -s https://design.mattermode.com/design-system.json

The manifest carries:

version — pin against this; matches packages/tokens/package.json#version (currently 2.3.0)
generated_at — deterministic ISO timestamp from git HEAD's commit time
tokens — full catalogue, grouped by kind (colors, radii, shadows, motion, layout, spacing, typography, density)
components — every exported component, with import_path, source_url, page_url, has_page
recipes, patterns, pages — every authored page indexed by slug
motion_grammar, voice, accessibility — canonical rules

2. Validate

curl -s https://design.mattermode.com/design-system.schema.json

The JSON Schema describes every field. Validate the manifest against it before consuming — schema drift means your agent has cached a payload that's older than your prompt.

import Ajv from "ajv";
import schema from "./design-system.schema.json";
import payload from "./design-system.json";

const ajv = new Ajv();
const validate = ajv.compile(schema);
if (!validate(payload)) {
  throw new Error(`Manifest drift: ${ajv.errorsText(validate.errors)}`);
}

3. Use the flat-text bundle for prompt context

curl -s https://design.mattermode.com/llms-design.txt | head -40

llms-design.txt is every MDX page concatenated as flat text, capped at ~150 KB. Inject it as a system prompt or a tool-call result when you need the agent to write code that honours the design system without you authoring a prompt template.

4. Fetch one page

curl -s https://design.mattermode.com/api/raw/components/button

Per-page raw MDX. Reach for this when the agent needs a single component's details and you don't want to ship 150 KB of context.

5. Pin against the version

async function fetchDesignSystem() {
  const res = await fetch("https://design.mattermode.com/design-system.json", {
    headers: { "If-None-Match": cachedEtag },
  });
  if (res.status === 304) return cached;
  const payload = await res.json();
  if (payload.version !== EXPECTED_VERSION) {
    throw new Error(`Design system bumped: ${payload.version} (expected ${EXPECTED_VERSION})`);
  }
  return payload;
}

When the version changes, your agent's prompt template should be reviewed — new tokens, new components, or removed primitives can change what the agent should generate. The changelog tracks each version's deltas.

What the manifest gives you

You want to…	Field
Reference a color by token	`tokens.colors[].css_var` (e.g. `--fg-muted`)
Reference a component by import path	`components[].import_path` + `components[].name`
Link a generated page to its docs	`components[].page_url`
Cite a recipe	`recipes[].slug`
Honour the voice rule	`voice.rules[]` — feed verbatim into the system prompt
Honour accessibility	`accessibility.contract` (always `"AA"`) + per-component `a11y` blocks in MDX

What the manifest doesn't give you

The actual rendered visual. For pixel-level fidelity, the agent should fetch a ComponentPreview screenshot — that's a separate endpoint (not yet shipped).
The Figma node ID. Each component MDX carries a FigmaLink node="…" block; that's the right surface to read for design-to-code mappings.
The compiled CSS. Tokens are surfaced as values, not as compiled CSS rules. If you need the compiled CSS, fetch https://design.mattermode.com/_next/static/css/... directly (subject to change; not stable).

The voice rule

The single rule every agent must honour when generating Matter copy:

Never compare Matter to other products. No "Matter's analog of X," no "deliberate deviation from Y," no "mirrors Z's grammar." Describe what Matter does plainly and self-contained. Factual references to standards (WAI-ARIA roles, RFC 7807, OAuth 2.1) are fine; framing Matter's design as a comparison to a named competitor is not.

This rule lives in payload.voice.rules[] so your agent can quote it verbatim into the prompt.

Worked examples

Use case	Pattern
Generate a Matter-branded React component	Fetch `design-system.json` → pick the relevant component from `components[]` → write JSX using the documented props from that component's MDX page
Validate a generated component honours the system	Parse the generated source → check every color literal is a CSS variable → check every component import is in `components[]`
Migrate a V1 consumer to V2	Fetch the page at `/components/<v1-name>` and find the "Migration target" callout in the When-to-use section
Score a screen against the system	Walk the rendered DOM → check every color is a token → check every component name is in `components[]` → check accessibility against the per-component `a11y:` frontmatter

When the manifest doesn't have what you need

The manifest is the canonical structured surface. When something isn't in it, either:

The page doesn't exist. Read the authoring rules and propose the missing page via a PR.
The data shape isn't structured yet. Open an issue tagged agent-payload describing what you need.

Don't synthesise design-system data. Don't invent tokens or components. If the agent is reaching for something not in the manifest, that's a signal — either the design system needs to grow, or the agent's task is outside the design system's surface.

Getting started for agents