Carbon Design System

Onboarding and setup

Last updated Sep 28, 2026

Set up Carbon MCP, connect your preferred AI client, and install the tools needed to access Carbon resources.

Onboarding and setup

Before you begin

To use Carbon MCP, connect it to a supported AI client and complete the required setup steps. After setup is complete, your AI client can retrieve Carbon documentation, components, design tokens, icons, guidance, and code directly from the source.

Prerequisites

Carbon MCP uses IBMid (w3id for IBMers) for authentication. If you do not have one, create an IBMid before continuing.

Connect to the Carbon MCP server

Connect your AI client to the Carbon MCP server using the server configuration provided for your environment. Once connected, your AI client can access Carbon MCP tools and retrieve Carbon resources during AI interactions.

The Carbon MCP server is hosted at https://mcp.carbondesignsystem.com/mcp.

Most AI clients support OAuth authentication. To connect, add the server URL as a remote MCP server and sign in with your IBMid when prompted. For clients that use an mcp.json configuration file, use the following minimal configuration:

Token and session ID

If your client does not support OAuth discovery, you can authenticate using a token and session ID instead.

  1. Generate a token and session ID.
  2. Copy your credentials and add them to your Carbon MCP configuration.

Set up your AI client and install the carbon-builder skill

Carbon MCP works with several AI clients. Each client requires two steps: connecting your client to the Carbon MCP server and installing the carbon-builder skill, which gives your AI the Carbon-specific context it needs to follow Carbon conventions, use the right components, and produce consistent output. Select your client to get started.

IBM Bob

IBM Bob is an AI coding assistant from IBM. Install Carbon MCP from the Bob Marketplace to give Bob direct access to Carbon components, tokens, icons, guidance, and code.

    1. In Bob, select the settings icon in the upper-right corner.
    2. Select the MCP tab, then search for "Carbon" in the text field.
    3. Find Carbon in the results and select the Install button.
    4. Enter your Carbon access token and session ID in the modal dialogue, then select Install.

    Note: Do not choose "Project (current workspace)" as it can potentially introduce the risk of your token being committed to your repository.

    1. Select Bob Advanced mode. This mode is required to use skills in Bob.
    2. Download the carbon-builder skill and extract it.
    3. Place the skill in .bob/skills/ at your project root (project-scoped) or in ~/.bob/skills/ (global).

    Project-scoped (recommended for teams)

    macOS and Linux:

    Windows (PowerShell):

    Global

    macOS and Linux:

    Windows (PowerShell):

    1. Add .bob/skills/carbon-builder/ to your repository so the skill is shared across the team.

    To verify the carbon-builder skill is installed in Bob:

    1. Open Bob and run /list-skills command.
    2. Confirm carbon-builder appears in the list.

Claude Desktop

Claude Desktop is Anthropic's desktop AI application. Add Carbon MCP as a custom connector.

    1. Open Settings > Connectors.
    2. Click Add Custom Connector.
    3. When prompted for a name, enter carbon-mcp.
    4. Under the Remote MCP server URL input, enter https://mcp.carbondesignsystem.com/mcp.
    5. Click Continue.
    6. For the Authentication radio button, select Always required.
    7. For the OAuth client, select No client ID — register one automatically.
    8. Click Add.
    9. If prompted by Claude Desktop to allow a connection to Carbon MCP, click Allow.
    1. Download the carbon-builder skill. Claude Desktop accepts the compressed file directly. There is no need to extract it before uploading.
    2. Open Settings > Capabilities and ensure Cloud code execution and file creation is enabled.
    3. Navigate to Customize > Skills.
    4. Click + to upload a skill and select the downloaded carbon-builder.zip.

    Claude Desktop activates the skill automatically based on its description. You can verify it appears in your Skills list and toggle it on or off from there.

    Note: Custom skills are private to your account. Each team member will need to upload the skill individually.

Cursor

Cursor is an AI-powered code editor. Add Carbon MCP using the deeplink or manually through the command palette.

  • Click the deeplink to add Carbon MCP automatically, or set it up manually:

    1. Open the command palette.
    2. Select View: Open MCP Settings.
    3. Click Add custom MCP. A configuration file opens where you can add your MCP servers.
    4. Add the following configuration:
    1. Save and close the file.
    2. Log in with your IBMid when Cursor prompts you.
    3. Quit and relaunch Cursor.
    1. Cursor uses MDC-format rule files in .cursor/rules/.
    2. Download the carbon-builder skill and extract it.
    3. Create the rules directory:

    macOS and Linux:

    Windows (PowerShell):

    1. Create .cursor/rules/carbon-builder.mdc with the following content:

    Add the body of SKILL.md (everything below the closing --- of the frontmatter) below the configuration, followed by any reference file content from the references/ directory.

    1. Verify that carbon-mcp is configured as an MCP server in Cursor's settings.

    Note: Cursor does not load the references/ directory automatically. Add the content of any reference files directly into the MDC file, or create additional .mdc rule files with alwaysApply: false as needed.

Figma Make

Figma Make is an AI-powered design-to-code tool. IBMers connect through the IBM tab; non-IBMers create a custom connector.

  • For IBMers:

    1. Open Figma Make and click Connectors.
    2. Select the IBM tab.
    3. Click Connect next to Carbon MCP.
    4. A browser window opens. Log in with your IBMid when prompted.
    5. After logging in, return to Figma Make. The Carbon MCP connector dialogue should still be open. If it is not, reopen Connectors and select the IBM tab.
    6. Turn on the Enable write tools option.
    7. For each of the following tools, open its dropdown and select Always run:
      • docs_search
      • code_search
      • get_charts
      • labs_search
      • code_audit
    8. Click Back, then click X to close the Connectors menu.

    Starting your first Make with Carbon MCP:

    1. In Figma Make, create a new Make file.
    2. Select a model from the model selector.
      Note: Gemini was observed to consume fewer tokens. Anthropic's Claude Opus 4.6 model (or later) tended to produce more accurate and complete code output.
    3. In the chat box, click Select a Make kit, then choose Carbon MCP - React v11 Make Kit.
    4. Click Connectors, then select Carbon MCP from your available connectors to attach it to the session.
    5. Add the published skill by entering /carbon-builder-figma-make-react in the chat, or select Skills > Use skills > carbon-builder-figma-make-react.
    6. Paste your Figma frame directly into the chat.
    7. Add the following user prompt to the same message to generate Carbon source code from the input design.
    1. Send the prompt to begin generation.

    For non-IBMers:

    Your Figma admin must enable user creation of custom connectors before completing the following steps.

    1. Open Figma Make and click Connectors.
    2. Select the Created by you tab.
    3. Click Create connector.
    4. In the Create connector dialogue, enter carbon-mcp as the name and click Next.
    5. In the MCP server URL field, enter https://mcp.carbondesignsystem.com/mcp and click Create.
    6. Click Connect next to Carbon MCP.
    7. A browser window opens. Log in with your Figma account when prompted.
    8. After logging in, return to Figma Make. The Carbon MCP connector dialogue should still be open. If it is not, reopen Connectors and select the Created by you tab.
    9. Turn on the Enable write tools option.
    10. For each of the following tools, open its dropdown and select Always run:
      • docs_search
      • code_search
      • get_charts
      • labs_search
      • code_audit
    11. Click Back, then click X to close the Connectors menu.

    Starting your first Make with Carbon MCP:

    1. In Figma Make, create a new Make file.
    2. Select a model from the model selector.
      Note: Gemini was observed to consume fewer tokens. Anthropic's Claude Opus 4.6 model (or later) tended to produce more accurate and complete code output.
    3. In the chat box, click Select a Make kit, then choose Carbon MCP - React v11 Make Kit.
    4. Click Connectors, then select Carbon MCP from your available connectors to attach it to the session.
    5. Add the published skill by entering /carbon-builder-figma-make-react in the chat, or select Skills > Use skills > carbon-builder-figma-make-react.
    6. Paste your Figma frame directly into the chat.
    7. Add the following user prompt to the same message to generate Carbon source code from the input design.
    1. Send the prompt to begin generation.
    2. Paste or attach your input design (for example, a Figma frame or image), then include the suggested user prompt in the same message and send it to begin generation.
    1. Download the carbon-builder skill. Figma Make accepts the compressed file directly. There is no need to extract it before uploading.
    2. In Figma Make, open Settings > Skills.
    3. Click + to upload a skill and select the downloaded carbon-builder.zip file.

Other clients

The following instructions cover Claude Code, VS Code, and any other client not listed above.

  • Claude Code

    1. Run the following command to add Carbon MCP to Claude Code:
    1. Log in with your IBMid when Claude Code prompts you.
    2. To confirm that Carbon MCP is connected, run the following command:
    1. Confirm that carbon-mcp appears in the list.

    VS Code

    1. Run the following command to add Carbon MCP to VS Code:
    1. Log in with your IBMid when VS Code prompts you.
    2. To confirm that Carbon MCP is connected, open the MCP settings in VS Code and confirm that carbon-mcp appears in the list.

    Any other client

    If your client is not listed above, refer to your client's documentation for connecting to remote servers.

    1. Add https://mcp.carbondesignsystem.com/mcp as the server URL.
    2. Log in with your IBMid when prompted.
    3. For clients that require a token and session ID instead of OAuth, use the following configuration:
    1. Replace <TOKEN> and <SESSION> with your Carbon MCP token and session ID.

  • Claude Code

    Claude Code discovers skills automatically from .claude/skills/ at your project root. No additional configuration is needed beyond having Carbon MCP connected.

    1. Download the carbon-builder skill and extract it.
    2. Place the skill in .claude/skills/ at your project root.

    Project-scoped (recommended for teams)

    macOS and Linux:

    Windows (PowerShell):

    Global

    macOS / Linux:

    Global

    Windows (PowerShell):

    1. Add .claude/skills/carbon-builder/ to your repository so the skill is version-tracked alongside the project and available to every team member without a separate install.

    GitHub Copilot coding agent

    GitHub Copilot coding agent supports Agent Skills from .github/skills/ in your repository. There is no global install location because the agent runs against the contents of the repository.

    1. Download the carbon-builder skill and extract it.
    2. Place the skill in .github/skills/ in your repository.

    Repository-scoped:

    macOS and Linux:

    Windows (PowerShell):

    1. Add .github/skills/carbon-builder/ to your repository so the skill is available to GitHub Copilot coding agent when it works on issues, pull requests, or delegated coding tasks.

    GitHub Copilot coding agent reads the name and description fields from SKILL.md and loads the skill automatically when the current task matches the skill's purpose.

    VS Code

    VS Code supports Agent Skills as project skills in .github/skills/, .claude/skills/, or .agents/skills/, and as personal skills in ~/.copilot/skills/, ~/.claude/skills/, or ~/.agents/skills/.

    Use .github/skills/ to share the skill with your team. Use ~/.copilot/skills/ to make it available across all your local projects.

    1. Download the carbon-builder skill and extract it.
    2. Place the skill in your preferred location.

    Project-scoped (recommended for teams)

    macOS and Linux:

    Windows (PowerShell):

    Global

    macOS / Linux:

    Windows (PowerShell):

    1. Add .github/skills/carbon-builder/ to your repository so the skill is version-tracked and available to other team members using VS Code.

    To verify the carbon-builder skill is available in VS Code:

    1. Open the Command Palette and run Chat: Open Chat Customizations.
    2. Open the Skills tab and confirm carbon-builder appears in the list.

    Any other client

    Most agent tools load context from a Markdown file or a dedicated directory at the project root. Common locations include AGENTS.md, AGENT.md, .agent/instructions.md, .agent/skills/, and .rules/. Refer to your client's documentation for the exact path and format it expects.

    1. Download the carbon-builder skill and extract it.
    2. Add the body of SKILL.md (everything below the closing --- of the frontmatter) into the appropriate instructions file for your client. If your client supports a directory of files, copy the carbon-builder/ folder into that directory instead.
    3. Refer to your client's documentation for the exact path and format it expects.