Using Fragments MCP in Claude for Design System-Aware UI Workflows

A Claude MCP design system workflow is most effective when Claude can query your component metadata instead of guessing from generic React examples. Fragments exposes your real component docs, props, usage rules, and tokens through MCP so Claude can build UI that matches your system.

Configure Claude for Fragments MCP

Add the Fragments server to your project-level MCP config:

{
  "mcpServers": {
    "fragments": {
      "command": "npx",
      "args": ["-y", "@fragments-sdk/mcp@latest"]
    }
  }
}

Then generate the compiled Fragments data with the CLI Reference:

fragments build

Recommended Claude Workflow

Use Claude in three passes for better results:

1. Discovery pass: ask Claude to find candidate components for the feature.
2. Inspection pass: ask for props, examples, and usage constraints.
3. Implementation pass: ask Claude to generate code using the chosen components only.

This pattern keeps Claude aligned with the components docs and reduces rework during review.

Example Prompt

Use the Fragments MCP tools to build a dialog-based confirmation flow.
Discover the components first, inspect the selected components for props and usage rules,
then implement the flow using our design system components and token-friendly styling.

FAQ

Can Claude use MCP tools and repository context together?

Yes. That is the ideal setup: repository context for local code and MCP for structured design system metadata.

What should I do if Claude cannot find fragments.json?

Run fragments build again and confirm the output path in your Fragments config. The MCP docs include troubleshooting notes.

CTA

Configure the MCP Tools docs first, then validate your compiled output with the CLI Reference and review generated UI against the components docs.