mcp
Provides UX capabilities to enhance the design output and understanding of AI systems.
What it can do
What data it sees
Do you need an account
No: the server works without sign-in
Provides UX capabilities to enhance the design output and understanding of AI systems.
How to connect
How to connect mcp to Claude
The server address to paste into Claude settings:
https://design.googleapis.com/mcp
- Open Claude (claude.ai or the desktop app).
- Go to Settings → Connectors.
- Click Add custom connector.
- Paste the server address copied below into Remote MCP server URL and click Add.
- In a chat, click + → Connectors and switch the new connector on.
Custom connectors are available on Free, Pro, Max, Team and Enterprise plans (Free is limited to one). On Team and Enterprise an organization Owner adds the connector first under Organization settings → Connectors.
Authorization
After you click Add, a sign-in window for the service opens. Sign in with your own account and approve access. Claude never sees your password.
How to connect mcp to ChatGPT
The server address to paste into ChatGPT settings:
https://design.googleapis.com/mcp
- Open ChatGPT in a browser (chatgpt.com). A Plus, Pro, Business, Enterprise or Edu plan is required.
- Turn on developer mode once: Settings → Apps → Advanced settings → Developer mode.
- Open Settings → Connectors and click Create.
- Fill in the form: Name (anything), Description (one line about what the service does), MCP server URL (copy it below).
- Under Authentication choose OAuth if the service requires sign-in, otherwise None. Click Create.
- In a new chat open + → Apps/Connectors and enable the connector.
OpenAI has renamed this section before (Connectors → Apps/Plugins). If the label differs, search settings for "developer mode". On Business/Enterprise workspaces an admin must allow custom connectors first.
Authorization
On first use ChatGPT opens the service's sign-in window. Sign in and approve access.
How to connect mcp to Cursor
The server address to paste into Cursor settings:
https://design.googleapis.com/mcp
Fastest: click Open in Cursor below and confirm the prompt.
Manually:
- In Cursor open Settings → Cursor Settings → MCP and click Add new global MCP server.
- Paste the JSON copied below into
~/.cursor/mcp.json(per project:.cursor/mcp.jsonin the repo root). - Save the file. The server appears in the MCP list; authorize it there if asked.
Authorization
If the service needs sign-in, an authorize button appears next to the server in the MCP list.
Server tool list (5)
Raw names from tools/list. Only developers need these.
| generate_color_scheme | Generates a Material Design color scheme from one or more key colors. Always use this when you need to create a color scheme for an application. The input is one or more named colors in hex format, and the output is a color scheme with a map of color role names to colors in hex format. |
| search_icons | Finds appropriate Material Design icons matching keywords that describe their usage, style, or shape. |
| icons_instructions | Provides essential and critical instructions on how to use Material Icons and Material Symbols efficiently on Web. |
| search_fonts | Finds appropriate fonts matching categories and/or languages. |
| describe_font | Describes a font family in detail, including its look and feel, supported styles, weights and how to use it. |