Export the design tokens of this site as a spec for a design tool such as Claude Design, together with the context a designer needs to use them. Do not change anything on the site.
The same two files work for an agent in Figma, Paper or any other design tool: every name in them is a CSS variable, so a tool that can read a table can use them.
1. Run get-design-context. Then run get-tokens, get-notes, list-components with get-component for each one, and get-site-assets. Export the tokens as they are now. On a new site they are the seed. On a site that has been styled they carry the customisations, and the design agent must work from those.
2. Write the first document, tokens.md, with these sections in this order.
Header: the site name, today's date, whether the tokens are still the seed (tokensAreSeed from get-design-context) or have been customised, and one sentence: this spec exists so that a design made outside Delta, in Claude Design, Figma, Paper or another design tool, can be ported back through MCP with the same token names.
Token table: one row per token. Columns: Delta name (category and key, for example color / action), CSS variable (for example --color-action; nested steps as --text-sm-size, --title-lg-leading), value. Group the rows by category in this order: color, font, weight, tracking, text, title, space, radius, border, shadow, layout, breakpoint. Above each group, copy that category's purpose note from the token file (the _meta text). For colours, add a fourth column with the job description of each name (the _desc text). Copy these texts as they are. Do not paraphrase and do not invent a description for a name that has none.
Rules for the design agent, copied verbatim:
- Semantic classes are free. Values are not. Every colour, size, radius, shadow, weight and font in the design maps to a token by its CSS variable name.
- Never write a raw value. When no token covers a job, declare a composed property with a bare name (for example --card-bg, not --color-card-bg), build it from tokens, and list it in a section called Composed properties with the tokens it is built from. Compose colours with color-mix(). Never derive a colour by arithmetic. Derive an off-scale size with calc() from the token that shares its meaning.
- Propose a new token only for a job no existing name covers. List proposals in a section called Proposed tokens, each with the job it does. Do not use a proposed token as if it existed.
- Type steps travel whole: take size, line height and tracking from the same step.
- Contrast floor: text 4.5:1, large text and borders 3:1, measured against the composited background. Delta refuses a palette below this floor at write time.
- Breakpoints are literal values in media queries, not variables.
- An -on-contrast ink is used only on the contrast surface, in the same rule as its background. on-action is used only on action.
Port-back contract: the design comes back as HTML and CSS that reference the CSS variables above, plus the sections Composed properties and Proposed tokens, plus a list of every token whose value the design changed, as name and new value. Delta writes changed values through update-tokens, composed properties into site.css once, and pages through the page abilities. Anything that is not a token reference, a listed composed property or a listed proposal is sent back for mapping.
3. Write the second document, context.md, with these sections in this order. Copy from the site. Do not invent.
Design notes: the content of notes.md as it is. Say at the top that these are standing rules and the design must follow them.
Components: for each component, its name, its purpose line, the class names it uses, and its markup. Tell the design agent to reuse these before inventing a new pattern, and to keep the class names as they are so the design ports back.
Composed properties: every custom property declared at the top of site.css, with the tokens it is built from. Tell the design agent to use these before declaring its own, and to add new ones to the Composed properties section of its design, not here.
Layout conventions: which space steps this site uses for section gaps and for cluster gaps, which title step maps to each heading level, and the container widths in use. Read them from site.css and the templates. If a convention is not settled, say so rather than guess.
4. Return both documents in chat. Do not upload them and do not write anything to the site.
Export a token spec for a design tool
A read-only export of the current tokens and the site context a designer needs. Written for Claude Design, readable by Figma, Paper or any tool that keeps the names.