Skip to content
← All install options

Install Better Design MCP in Devin

Windsurf is now Devin. Run npx better-design, or follow the Devin app steps below.

Install from the terminal
Adds Better Design without replacing your other servers.
terminal
npx better-design

Or configure Devin manually

Use the Devin app or paste the settings below when you need to inspect every value.

Set up in one command
Run it in your terminal. It connects your coding tools and adds the rule that tells agents to use Better Design on every UI change.
terminal
npx -y better-design
Adding the server by hand? Paste this rule into CLAUDE.md or AGENTS.md too.
markdown
<!-- better-design:start -->
## Better Design

For every UI build, run these steps in order, and never present a page that skipped step 2 or 4:
1. Design system: keep the product's own design. Use its theme and components when the code has them, or its `extract-from-url` tokens for a live site. Only a product with no design of its own takes `find-design-system`, then `get-design-system-kit`.
2. Principles: `get-ui-principle` before styling, `get-ux-principle` before behavior.
3. Build. A product screen sits inside its app shell, with realistic sample data and an app-scale title.
4. Review: `get-review-rules`, `check-comprehension` and `inspect-spacing`. Fix every critical and serious finding.

Always use the Better Design MCP tools for any frontend, UI, UX, interaction, flow, form, navigation, dialog, error, onboarding, component, styling, article widget, calculator, estimator, converter, generator, quiz, checklist, React Native, Expo, Three.js, Shopify, or sales work, without me having to explicitly ask. For a calculator or article widget, load `get-widget-guide`; for React Native or Expo, load task guidance with `get-react-native-guide`; for Three.js or React Three Fiber, use `get-three-js-guide`; for Shopify Liquid or theme work, use `get-shopify-guide`; for sales conversations or assets, use `get-sales-principle`. Load visual guidance with `get-ui-principle`, load flow guidance with `get-ux-principle`, and self-review with `get-review-rules` and `check-comprehension`. Run `inspect-spacing` on rendered DOM evidence. For dashboards, deploy the exact source to a public HTTPS preview; `finalize-dashboard-review` must return VALID after Better Design captures it at 390, 1440, and 1728. Start UI builds with `find-design-system`. For a custom brand, call `create-design-system`, poll `get-design-system-status`, and run its React install command in coding hosts; in inline canvases, call `get-design-system-kit` with target `html` and the generated projectId. For a catalog system, call `get-design-system-kit` with target `react` in coding hosts or `html` in inline canvases. For a Shopify store, load `get-shopify-guide`, then call `get-design-system-kit` with target `shopify`.
<!-- better-design:end -->

Or add the server to Devin by hand:

Install from the Devin app

  1. 1

    Open Settings

    Press Cmd , (on Windows, Ctrl ,). Devin opens a Devin Settings tab with a sidebar.
  2. 2

    Open Devin Local, Configuration

    In the sidebar, under Devin Local, choose Configuration. Scroll to the MCP servers block.
  3. 3

    Open the MCP marketplace

    Select Open Devin MCP marketplace. Better Design is not in the catalog, so select Add custom MCP at the top right.
  4. 4

    Paste the block and save

    Devin opens ~/.config/devin/mcp_config.json in the editor (on Windows, %APPDATA%\devin\mcp_config.json). Merge the JSON below into it and save.
  5. 5

    Verify the server

    In the marketplace sidebar, under MCPs, choose Installed. better-design shows Connected. From a terminal, devin mcp get better-design shows the same entry.
  6. 6

    Still on the legacy Cascade agent?

    Cascade reads ~/.codeium/windsurf/mcp_config.json. In that file, name the URL field serverUrl and leave out transport.

Need more detail? Read the official Devin MCP documentation.

Config
json
{
  "mcpServers": {
    "better-design": {
      "url": "https://better-design.com/api/mcp",
      "transport": "http",
      "headers": {
        "Authorization": "Bearer <YOUR_API_KEY>",
        "X-Better-Design-Client": "devin"
      }
    }
  }
}