install_design
Drop a brand's DESIGN.md into the agent's working directory.
install_design is the MCP equivalent of the CLI add command. When called from an agent loop, it returns both the raw markdown and the fallback npx command. If the agent has filesystem access, it writes the file directly. If not, it tells the user to run the CLI command.
Input schema
| Parameter | Type | Required | Description |
|---|---|---|---|
slug | string | yes | The design slug, e.g. "stripe", "linear", "vercel". See list_designs for available slugs. |
out | string | no | Output filename. Default is DESIGN.md. |
Output
The tool returns:
{
"command": "npx design-md add stripe",
"out": "DESIGN.md",
"bytes": 15200,
"markdown": "---\nname: stripe\n...\n",
"hint": "If you have filesystem access, write `markdown` to `out`. Otherwise instruct the user to run `command`. Then read DESIGN.md as the visual source of truth — every color, type scale, radius, motion, accessibility token must come from it."
}
command— The human-readablenpxfallback. Use if you don’t have filesystem write access.out— The target filename. UsuallyDESIGN.md; respects theoutinput param.bytes— File size in bytes. Useful for progress indication or validation.markdown— The raw DESIGN.md content (YAML frontmatter + markdown body).hint— Guidance for the agent: write the markdown to disk and treat the resulting file as the canonical token source.
Example: agent dialogue
User: “Install Stripe’s design system into my repo so I can reference it.”
Agent calls:
install_design({ slug: 'stripe' })Response:
{ command: 'npx design-md add stripe', out: 'DESIGN.md', bytes: 15247, markdown: '---\nname: stripe\n...' }Agent: “I’ve written
stripe.design.md(15 KB, 8 color tokens, 12 sections). You can nowimportit or point my next request at the file. Every component I generate will use Stripe’s exact values:#0A0E27for background, Inter for body text,6pxradius.”
When to use
- When the user says “save” or “add” a brand to their project
- When you want the tokens as a committed file in the repo (vs. in-memory lookup via
get_design) - When setting up a design-system reference for long-form generation tasks (e.g., building an entire component library)
Compared to get_design
get_design fetches the same markdown but returns it in the response only. The agent holds it in context but does not write a file. Use get_design for quick lookups (“What’s Stripe’s primary color?”). Use install_design when you want to commit the file to the project as a reference layer.
| Scenario | Tool |
|---|---|
| ”Make this card look like Stripe” (one-off) | get_design |
| ”Add Stripe as a design reference to my repo” (setup) | install_design |
| ”Compare Stripe and Linear colors” | diff_designs (or both get_design calls) |
Related
get_design— fetch in-memory (no file write)list_designs— discover available brands- CLI
add— terminal equivalent