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 -y 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 -y @webdesignhot/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-readable npx fallback. Use if you don’t have filesystem write access.
  • out — The target filename. Usually DESIGN.md; respects the out input 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 -y @webdesignhot/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 now import it or point my next request at the file. Every component I generate will use Stripe’s exact values: #0A0E27 for background, Inter for body text, 6px radius.”

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)