Using Fragments MCP in Cursor for Design System-Aware UI Generation

A Cursor MCP design system workflow works best when Cursor can query your real component metadata before it writes code. Fragments gives Cursor that hosted query layer through MCP so the assistant can list reviewed primitives, read token vocabulary, conform generated code, and prove the result against your actual contract.

This guide shows the minimum setup and a repeatable prompting workflow.

## Configure Cursor for a Design System MCP Workflow

Add the hosted Fragments MCP endpoint to your project config:

```json // .cursor/mcp.json { "mcpServers": { "fragments": { "type": "http", "url": "https://app.usefragments.com/api/mcp", "headers": { "Authorization": "Bearer ${FRAGMENTS_API_KEY}" } } } } ```

Before Cursor can use the endpoint, create a Fragments Cloud API key and select a canonical design-system binding in Cloud.

## Prompting Pattern That Produces Better Output

Use a staged workflow instead of asking Cursor to build everything at once:

1. Ask Cursor to query `design_system/list_primitives` for candidate components. 2. Ask it to query `design_system/list_tokens` before styling. 3. Ask it to implement the UI, then use `design_system/conform` or `design_system/prove_compliant` before it stops.

This keeps the assistant grounded in the [components docs](/components) and reduces made-up props.

## Example Cursor Prompt

```text Use the Fragments MCP tools to build a settings form. First query design_system/list_primitives and design_system/list_tokens, then implement the form and run design_system/prove_compliant on the result. ```

## FAQ

### Why not just paste the component docs into the prompt?

Because the docs change. MCP lets Cursor query the latest metadata directly, which scales better than manually copying docs into prompts.

### Can Cursor use both MCP and normal code search?

Yes. That combination is ideal. MCP provides structured design system data while normal code search gives local implementation context.

## CTA

Start with the [MCP Tools docs](/mcp), verify the Cloud catalog is ready, and use the [components docs](/components) as the human-readable review layer.