Figma Context MCP
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Description from the maker (original English)
Explore Carbon docs, components, tokens, icons, charts, and code examples.
These three are never merged into one score: opinions, measurements and popularity are different things.
We have not written a plain-language summary for this one yet. Below are the facts we read from the registry.
Pick the AI app you use, then copy the settings.
You need
Which app do you use?
Pick your app above. We remember it, so next time the button says “Install in …”.
Works in Claude on the web, desktop and mobile:
https://mcp.carbondesignsystem.com/mcpRun this in your terminal
claude mcp add --transport http carbon https://mcp.carbondesignsystem.com/mcpPaste into .cursor/mcp.json in your project, or ~/.cursor/mcp.json
{
"mcpServers": {
"carbon": {
"url": "https://mcp.carbondesignsystem.com/mcp"
}
}
}Your browser asks to open the app, then the app shows the settings and asks you to confirm. Key values are left empty for you to fill in.
Paste into .vscode/mcp.json in your project
{
"servers": {
"carbon": {
"type": "http",
"url": "https://mcp.carbondesignsystem.com/mcp"
}
}
}Your browser asks to open the app, then the app shows the settings and asks you to confirm. Key values are left empty for you to fill in.
ChatGPT connects only to servers on the internet:
https://mcp.carbondesignsystem.com/mcpMenu names can differ slightly by plan and over time.
Your choice stays on this device in a cookie; no account needed.
These settings are generated from the maker’s registry entry. If the README says otherwise, follow the README.
The server asks you to sign in before it lists its tools.
We check information anyone can see; we have not read the code. Checks that do not apply are left out of the count. · Checked Nov 10, 2026
The registry name was verified against the domain mcp.carbondesignsystem.com (the registry checks domain ownership)
We have not read this repo from GitHub yet
We have not read this repo from GitHub yet
Responded in 695 ms (HTTP 401)
Declares OAuth sign-in, so your AI app can take you to log in
Not checked yet; we read the tool list when we check the endpoint
Compared with every active server in this category in the registry. Stars count only when the publisher owns the repo.
It passed 3 of 3 applicable basic checks. We have not read the code. Before adding a key or token, see what access the server asks for and use a key with only the permissions you need.
The registry does not list a required key, though some servers ask you to sign in on first use.
It runs in the maker’s cloud. Connect over the internet with nothing to install, but what you send passes through the maker’s servers.
The GitHub repo last changed –, and the latest version (1.14.0) reached the registry 31 days ago.
Apps that support MCP, such as Claude Desktop, Claude Code, Cursor and VS Code. It connects by URL, so apps that accept remote MCP servers work too, such as ChatGPT in developer mode.
In the same category: Figma Context MCP, Claude Real Video, Figma MCP Server
Servers in the same category from other makers, sorted by stars.
Reading a card:↓ Downloads per weeki★ GitHub starsiThree pillars: reviews · checks · usageiUpdated = latest version published to the registryi
Give your coding agent access to your Figma data. Implement designs in any framework in one-shot.
Let any LLM watch a video locally — and search everything it has ever watched.
Figma’s official server gives AI your design data so it can turn designs into code or describe them accurately. Connects to Figma’s cloud.
Copied from the maker’s repo as written. PopNx MCP has not reviewed or endorsed it. HTML, images and scripts are removed. Links lead off this site.
The Carbon Design System, available to any AI agent.
Carbon MCP is a hosted server that gives AI agents direct access to Carbon's components, icons, charts and documentation through MCP, the open Model Context Protocol standard for connecting AI applications to external tools and data. It runs on IBM Cloud, so any MCP client can connect with a URL and an IBMid sign-in. This repository is where you report issues, request features and get the Carbon Builder skill.
Connect · Carbon Builder skill · Tools · Coverage · Report an issue
Terms of Use for the hosted service · Apache-2.0 for the Carbon Builder skill
Carbon MCP makes any agentic AI application an instant expert in the Carbon Design System, so teams deliver consistent, high-quality user experiences with greater speed.
| Benefit | What it means |
|---|---|
| Direct access to Carbon | AI agents query the Carbon Design System for the context they need: colors, typography, component source, usage guidelines. |
| Better generated code | Code examples and documentation from Carbon MCP let AI tools generate high-fidelity Carbon UI code that follows design and development practice. |
| One answer for the whole team | Designers, developers and PMs get consistent answers and examples from a shared source of truth, which reduces drift and rework. |
The Carbon MCP server is hosted remotely at https://mcp.carbondesignsystem.com/mcp. Add it to your client as a remote MCP server and sign in with your IBMid when asked.
Clients that read an mcp.json file use this minimal configuration:
{
"mcpServers": { "carbon-mcp": { "type": "streamable-http", "url": "https://mcp.carbondesignsystem.com/mcp" } } }
| Client | Setup |
|---|---|
| IBM Bob | Onboarding: IBM Bob |
| Claude Desktop | Onboarding: Claude Desktop |
| Cursor | Onboarding: Cursor |
| Figma Make | Onboarding: Figma Make |
| Claude Code, VS Code, GitHub Copilot and other clients | Onboarding: Other clients |
| Clients without OAuth | Token and session ID |
The full onboarding and setup guide covers what to have before you begin, the prerequisites, connecting to the server and every client above.
If your client does not support OAuth discovery, you can authenticate with a token and session ID instead.
Carbon Builder is a portable AI skill that turns an agent into an expert Carbon Design System engineer. It retrieves live component examples, variants, props and documentation from the Carbon MCP server, generates Carbon React and Web Components code, and builds Carbon Charts across every supported framework.
The server supplies the facts; the skill tells the agent when to ask for them and how to turn the answers into working code. Together they produce better results than either alone.
Install it with the skills CLI, choosing the line for your agent:
npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a bob
npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a claude-code npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a cursor npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a codex npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a github-copilot npx skills add https://github.com/carbon-design-system/carbon-mcp/tree/main/public/skills/carbon-builder -g -a gemini-cli
The CLI supports many more agents; see skills.sh. The skill has its own page at skills.sh/carbon-design-system/carbon-mcp/carbon-builder.
To install without the CLI, download carbon-builder.zip, unzip it, and copy the carbon-builder/ folder to your client's skills location. The skill README lists the path for each client, and the onboarding guide walks through it in Set up your AI client and install the Carbon Builder skill.
| Tool | What it returns |
|---|---|
code_audit | A check of your code against Carbon guidelines covering design tokens, component usage, accessibility, layout and best practices. |
code_search | Carbon React and Web Components code examples, icons and pictograms, including complete example application files. |
docs_search | Carbon Design System and IBM Products documentation, such as component guidance, usage, accessibility and reference material. |
get_charts | Carbon Charts code examples for React, Angular, Vue, Svelte, Vanilla JS and HTML. |
labs_search | Code examples, props, events and usage docs for Carbon Labs experimental components. |
Carbon MCP continues to evolve. Current coverage:
| Corpus | Examples | What is indexed |
|---|---|---|
@carbon/react | Button, Tabs, TextInput | Code examples and documentation, multiple variants per component, complete props and imports |
@carbon/web-components | button, tabs, text-input | Code examples and documentation, multiple variants per component, complete props and imports |
| Carbon for IBM Products | Tearsheets, PageHeader | Code examples and documentation, multiple variants per component, complete props and imports |
| Carbon Icons and Pictograms | Settings, User, UserAvatarFilled | Code examples and documentation, usage |
@carbon/ai-chat | basic, custom-element, history | Code examples and documentation, full code examples, complete props and imports |
@carbon/charts | Chart types, with links to demos | Chart type descriptions, links to demos, full code examples, complete props and imports |
@carbon-labs/* | React: AnimatedHeader, Processing, Resizer, UIShell, What's New | Code examples and documentation for preview candidates, multiple variants per component, complete props and imports |
The Concepts page describes the content in more detail.
| Document | Covers |
|---|---|
| Overview | Carbon MCP overview and key benefits |
| Concepts | The Carbon MCP tools and content coverage |
| Onboarding and setup | Authentication, connecting common MCP clients, installing the Carbon Builder skill |
| Prompts | Prompting guidance and best practices |
| Token conservation | Keeping
Only the beginning is shown; read the rest in the repo