Connect

One URL. No account, no API key, nothing to install. It speaks Streamable HTTP, so any current MCP client can use it.

https://dessys.van-breda.com/mcp

Claude Code

claude mcp add --transport http design-framework https://dessys.van-breda.com/mcp

Add --scope user to have it in every project, or --scope project to commit it for your team.

Claude Desktop and claude.ai

Open Settings, then Connectors, add a custom connector, and paste the URL above. If your version only reads a config file, bridge it with mcp-remote:

{
  "mcpServers": {
    "design-framework": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://dessys.van-breda.com/mcp"]
    }
  }
}

Cursor

In ~/.cursor/mcp.json or .cursor/mcp.json:

{
  "mcpServers": {
    "design-framework": { "url": "https://dessys.van-breda.com/mcp" }
  }
}

VS Code

In .vscode/mcp.json:

{
  "servers": {
    "design-framework": { "type": "http", "url": "https://dessys.van-breda.com/mcp" }
  }
}

Anything else

Point any MCP client that supports Streamable HTTP at the URL. No headers needed. If you only want the text, framework.md is the whole framework as one markdown file, and llms.txt is a short index for crawlers and agents.

Make your assistant use it every time

Connecting makes the tools available. A few lines in your project instructions make your assistant reach for them without being asked. Put this in CLAUDE.md, .cursor/rules, or wherever your tool reads project rules:

## Design
This project follows the Dessys design framework, available as the
design-framework MCP server.

- Before building or changing any UI, call list_sections, then get_section
  for the laws that apply to the component.
- When the work is done, call review_checklist with the component name and
  fix anything that doesn't hold before reporting back.
- If a design decision isn't covered by the framework, say so instead of
  guessing.

What's in the server

Three tools and one resource.

list_sections

Lists every section with its id. Takes no arguments.

law-1-no-surprises: Law 1: No surprises
law-2-optimism: Law 2: Optimism
law-3-reveal-the-whole-work-in-small-pieces: Law 3: Reveal the whole, work in small pieces
...

get_section(id)

Returns one section. The id can be partial, so optimism finds law-2-optimism. Unknown ids return a hint to call list_sections.

get_section("law-2-optimism")

## Law 2: Optimism
Assume success, trust the user, guide instead of block.
- The code is stable and tested, so act instantly and reconcile later.
- No "are you sure?". Prefer undo over confirmation.
- When something is wrong, lead the user to the fix. Never just stop them.
- Assume the user doesn't know what went wrong, and be graceful about it.

review_checklist(component?)

Returns all eight laws as a checklist, framed for reviewing a component or screen. Pass the component name to focus the review.

Resource framework://full

The entire framework as markdown, for clients that prefer to load it as context.

Section ids

north-star
law-1-no-surprises
law-2-optimism
law-3-reveal-the-whole-work-in-small-pieces
law-4-saving-is-shown-not-announced
law-5-nothing-is-ever-lost
law-6-control
law-7-form-signals-function
law-8-summonable-structure
across-components
reference-component-the-form
context-not-instruction
grouping-and-density
typography-and-rhythm

The server and this site are both generated from the same file, so they always agree.