get_design

Get one brand's full DESIGN.md (frontmatter + body) — the workhorse for "make this look like X".

The most-called tool in the agent loop. get_design fetches the complete DESIGN.md for a single brand—everything: token definitions, design rationale, accessibility guidance, motion principles. It is the source of truth the agent reads before generating UI that matches a brand.

Input schema

{
  "slug": "string"
}
PropertyTypeRequiredDescription
slugstringyesThe design slug, e.g. "linear", "stripe", "vercel". Find slugs via list_designs or search_designs.

Output

Raw markdown string (webdesignhot/0.1 format): YAML frontmatter block followed by markdown body.

---
name: Linear
tagline: Minimalist devtools, maximum signal
agent-prompt: |
  Linear's palette is almost monochrome: off-black backgrounds, muted grays for UI chrome, 
  a single saturated accent (#5e6ad2 indigo) for interactive elements. Type is Inter (system default).
  Radii are tight: 6px for small elements, 12px for cards. No rounded corners above that.
  Spacing is 4px grid. Keep motion fast (150ms) and conservative.

colors:
  surface: '#08090a'
  border: '#23252a'
  accent: '#5e6ad2'
  text: '#ebebf0'
  
radii:
  xs: '6px'
  sm: '12px'

type-scale:
  family: Inter
  sizes: [11, 13, 15, 17, 20, 24, 32]

motion:
  easing: cubic-bezier(0.4, 0, 0.2, 1)
  default-duration: 150ms
---

# Linear design system

An ultra-minimal design language for engineering tools...

(full markdown body with sections, code examples, rationale)

The agent reads the agent-prompt header first—this is the architectural framing. Then it reads the token definitions and markdown body to ground every color, type, radius, and motion decision.

Example: agent dialogue

User: “Make this card look like Linear”

Agent calls:

get_design({ slug: 'linear' })

Response: Full DESIGN.md (as above)

Agent generates:

<div className="bg-[#08090a] border border-[#23252a] rounded-[6px]">
  <h3 className="text-[#ebebf0] font-inter text-[17px]">...</h3>
</div>

With Linear’s actual tokens. The color #5e6ad2 is from the file. The radius 6px is from radii.xs. The type is Inter. Without get_design, the agent would write bg-zinc-900 border-zinc-800 rounded-md—directionally close, but not Linear.

When to use

  • After discovery. Once list_designs or search_designs returns a slug
  • Before generation. Before the agent writes any styled UI matching a specific brand
  • User references a brand by name. “Make this look like [Brand]” → call get_design to get real tokens, not guessed ones

When not to use

  • If the user hasn’t picked a specific brand yet, use search_designs first to find one
  • If you only need a high-level comparison (e.g., “how different are Linear and Stripe?”), use diff_designs
  • If you want to export the tokens for a build tool, use export_design