Skip to content
← All install options

Install Better Design MCP in Claude Desktop

Follow the setup below to give Claude Desktop Better Design's systems and interface guidance.

  1. 1

    Open Customize

    In Claude (web or Desktop), open Customize in the sidebar.
  2. 2

    Add a custom connector

    Go to Connectors, click the +, then choose Add custom connector.
  3. 3

    Fill in the form

    Name it Better Design, paste , click Add, then sign in with OAuth. Claude discovers the endpoints, so there is no API key to paste. Works on Free, Pro, Max, Team, and Enterprise (Free is limited to one custom connector).

Which Claude plans can add the connector

Custom connectors work on Free, Pro, Max, Team and Enterprise plans. A Free account can add one custom connector.

On Team, only Owners and Primary Owners can add a custom connector. On Enterprise, Owners, Primary Owners and people with a role that can manage libraries can add one. They add it in Organization settings, then Connectors. Each member then opens Customize, then Connectors, and selects Connect.

Turn the connector on in a chat

Select the + button at the lower left of the chat box, then Connectors. Each connector has a toggle, so you can turn Better Design on or off for each conversation. Then ask for something small, such as a design system for your product.

What the agent can use after setup

Better Design gives the agent design context and review tools. The agent still writes the code, and your repository stays the source of truth.

  • Find a catalog design system or create one for your brand before frontend work starts.
  • Load UI principles for visual choices and UX principles for flows and behavior.
  • Get component and icon guidance that matches the chosen system.
  • Run review rules, comprehension checks and spacing checks on rendered pages.

Fix a Claude connector

Claude connects to the server from Anthropic's servers, not from your computer, so a local firewall or VPN does not block it.

  • You cannot add the connector on a Team or Enterprise plan: ask an Owner to add it for the organization.
  • You need to change the URL or the sign-in: remove the connector, then add it again. Claude does not edit a custom connector in place.
  • The connector does not answer in a chat: open +, Connectors, and check that its toggle is on for this conversation.
  • You set up a local server in claude_desktop_config.json: that is a separate setup, and claude.ai does not see it. Use the connector steps above instead.

Questions

Do I need an API key for Claude?

No. You sign in with OAuth when you add the connector. The form also has a Request headers field for fixed credentials, but Better Design does not need it.

Does the connector work in both Claude.ai and Claude Desktop?

Yes. A custom connector belongs to your Claude account, so it appears in Claude on the web and in Claude Desktop once you add it.

Can a Free account use Better Design?

Yes. Free accounts can add one custom connector. Remove another custom connector first if you already have one.

Official Claude Desktop resources

Related