Platforms

Using the Figma plugin for Claude Code (preferred):
The recommended way to set up the Figma MCP server in Claude Code is by installing the Figma plugin, which includes MCP server settings as well as Agent Skills for common workflows.
Run the following command to install the plugin from Anthropic's official plugin marketplace.
claude plugin install figma@claude-plugins-official

Manual setup for Claude Code
Run the following command in your terminal to add the Figma MCP to Claude Code:
claude mcp add --transport http figma https://mcp.figma.com/mcp
Tip: To make your Figma MCP server available across all projects, install it with the --scope user flag:
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

Manual setup for Codex:
In your terminal, run the following command:
codex mcp add figma --url https://mcp.figma.com/mcp

Using the Figma plugin for Cursor (preferred):
Install the plugin by typing the following command in Cursor's agent chat:
/add-plugin figma
The plugin includes:
MCP server configuration for the Figma MCP server
Skills for implementing designs, connecting components via Code Connect, and creating design system rules
Rules for proper asset handling from the Figma MCP server

## Figma MCP Integration Rules
These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.
### Required flow (do not skip)
1. Run get_design_context first to fetch the structured representation for the exact node(s).
2. If the response is too large or truncated, run get_metadata to get the high-level node map and then re-fetch only the required node(s) with get_design_context.
3. Run get_screenshot for a visual reference of the node variant being implemented.
4. Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
5. Translate the output (usually React + Tailwind) into this project's conventions, styles and framework. Reuse the project's color tokens, components, and typography wherever possible.
6. Validate against Figma for 1:1 look and behavior before marking complete.
### Implementation rules
- Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
- Replace Tailwind utility classes with the project's preferred utilities/design-system tokens when applicable.
- Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.
- Use the project's color system, typography scale, and spacing tokens consistently.
- Respect existing routing, state management, and data-fetch patterns already adopted in the repo.
- Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design-system tokens and adjust spacing or sizes minimally to match visuals.

For Claude Code, you can do something similar in your CLAUDE.md file:

# MCP Servers
## Figma MCP server rules
  - The Figma MCP server provides an assets endpoint which can serve image and SVG assets
  - IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
  - IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
  - IMPORTANT: do NOT use or create placeholders if a localhost source is provided

---
name: figma-design-to-code
description: "**MANDATORY prerequisite** — you MUST invoke this skill BEFORE calling the `get_design_context` Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. ... This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped."
disable-model-invocation: false
---

### 2. Treat the output as a reference, not final code
- The returned code is React + Tailwind enriched with hints. You MUST treat it as a REFERENCE, not as final code to paste verbatim.
- You MUST adapt it to the target project's language, framework, component library, styling system, and conventions. Match the surrounding code.

### 3. Reuse what the project already has
- Before writing new code, You MUST check the target project for existing components, layout patterns, and design tokens that match the design intent.
- You MUST reuse the project's existing components and tokens instead of generating new equivalents from scratch.

### 4. Honor the response hints by priority
Apply the hints in this order — earlier sources override later ones:
1. **Code Connect snippets** → use the mapped codebase component directly.
2. **Component documentation links** → follow them for usage and guidelines.
3. **Design annotations** → follow any designer notes or constraints.
4. **Design tokens (CSS variables)** → map them to the project's token system.
5. **Raw hex / absolute positioning** → loosely structured; lean on the screenshot for intent.

- **Render every icon/image from its exported asset.** Never hand-write or inline `<svg>`/`<path>`, never author your own icon file, never drop an icon or leave a placeholder

import figma from '@figma/code-connect/react'

figma.connect(Button, 'https://...', {
  props: {
    label: figma.string('Text Content'),
    disabled: figma.boolean('Disabled'),
    type: figma.enum('Type', {
      Primary: 'primary',
      Secondary: 'secondary',
    }),
  },
  example: ({ disabled, label, type }) => {
    return (
      <Button disabled={disabled} type={type}>
        {label}
      </Button>
    )
  },
})

## Prerequisites

- **Figma MCP server must be connected** — verify that Figma MCP tools (e.g., `get_code_connect_suggestions`) are available before proceeding. If not, guide the user to enable the Figma MCP server and restart their MCP client.
- **Components must be published** — Code Connect only works with components published to a Figma team library. If a component is not published, inform the user and stop.
- **Organization or Enterprise plan required** — Code Connect is not available on Free or Professional plans.
- **URL must include `node-id`** — the Figma URL must contain the `node-id` query parameter.
- **TypeScript types** — for editor autocomplete and type checking in `.figma.ts` files `@figma/code-connect/figma-types` must be added to `types` in `tsconfig.json`:
  ```json
  {
    "compilerOptions": {
      "types": ["@figma/code-connect/figma-types"]
    }
  }
  ```

## Step 2: Discover Unmapped Components
Call the MCP tool `get_code_connect_suggestions` with:
- `fileKey`, `nodeId`, `excludeMappingPrompt` — `true` (returns a lightweight list of unmapped components)
- **"No published components found in this selection"** — inform the user they need to publish the component to a team library in Figma first, then stop.

## Reading order
**MUST READ before writing any code:**
1. This file (`overview.md`) — product character, rules, and workflows
2. `setup.md` — providers, CSS imports, build configuration
3. `foundations/` — all token files (color, typography, spacing, surfaces)
4. `components/overview.md` — full component catalog with alternative names
**Read on-demand:**
- `components/{name}.md` — read BEFORE using that component

### Before using a component
1. Check `components/overview.md` for the component catalog
2. Read `components/{name}.md` for the specific component
4. Do NOT write code using a component until you have read its guidelines file
### Before using an icon
2. Do NOT guess icon names — verify the icon exists first
4. Icons are ALWAYS imported from `lucide-react`, never from `@brettmcm/astraui`

## Rules
IMPORTANT: Every desktop page MUST include `SidebarNavigation` — the 60px dark icon rail on the far left. No exceptions.
IMPORTANT: The page background is ALWAYS `brand-tertiary`. Never use white or gray as the page canvas.
IMPORTANT: Do NOT use `brand-primary` or `brand-secondary` as backgrounds for large areas — they are for small accents and interactive highlights only.
- Always use design system components over raw HTML elements (`InputField` not `<input>`, `SelectField` not `<select>`)
- All spacing must use design system tokens (`gap-xl`, `p-2xl`) — never hardcode pixel values
- Surface color defines layout hierarchy, not borders — do not add borders between layout regions
- Icons always come from `lucide-react` — never create inline SVGs or guess icon names
- Navigation hierarchy is strict: `SidebarNavigation` → `SecondaryNav` → `Tabs`. Never skip levels.

npx storybook add @storybook/addon-mcp
npx mcp-add --type http --url "http://localhost:6006/mcp" --scope project

```md title="AGENTS.md"
When working on UI components, always use the `your-project-sb-mcp` MCP tools to access Storybook's component and documentation knowledge before answering or taking any action.

- **CRITICAL: Never hallucinate component properties!** Before using ANY property on a component from a design system (including common-sounding ones like `shadow`, etc.), you MUST use the MCP tools to check if the property is actually documented for that component.
- Query `list-all-documentation` to get a list of all components
- Query `get-documentation` for that component to see all available properties and examples
- Only use properties that are explicitly documented or shown in example stories
- If a property isn't documented, do not assume properties based on naming conventions or common patterns from other libraries. Check back with the user in these cases.
- Use the `get-storybook-story-instructions` tool to fetch the latest instructions for creating or updating stories. This will ensure you follow current conventions and recommendations.
- Check your work by running `run-story-tests`.

Remember: A story name might not reflect the property name correctly, so always verify properties through documentation or example stories before using them.
```

// .storybook/main.ts — CSF 3
// Replace your-framework with the framework you are using (e.g., react-vite, vue3-vite, angular, etc.)

const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    // ... your existing addons
    {
      name: '@storybook/addon-mcp',
      options: {
        toolsets: {
          dev: false,
        },
      },
    },
  ],
};

export default config;

{
  "components": {
    "components-button": {
      "id": "components-button",
      "name": "Button",
      "path": "./src/components/Button/Button.stories.tsx",
      "stories": [
        {
          "id": "components-button--default",
          "name": "Default",
          "snippet": "const Default = () => <Button>Button</Button>;"
        },
        {
          "id": "components-button--disabled",
          "name": "Disabled",
          "snippet": "const Disabled = () => <Button disabled>Button</Button>;"
        }
      ],
      "import": "import { Button } from \"@mealdrop/ui\";",
      "jsDocTags": {},
      "description": "Primary UI component for user interaction",
      "reactDocgen": {
        "props": {
          "large": {
            "required": false,
            "tsType": { "name": "boolean" },
            "description": "Is the button large?",
            "defaultValue": { "value": "false", "computed": false }
          }
        }
      }
    }
  }
}

If you have Storybook Test set up in your Storybook, the testing toolset provides tools that allow the agent to run component tests (including accessibility checks, if set up) and interpret their results. It also includes instructions to resolve issues. As the agent develops, it can choose to run tests to validate its work. If it finds issues, it can fix them and re-run the tests to confirm they are resolved. This creates a _self-healing_ loop that helps ensure the quality of the generated UI, without requiring you to intervene.

#### `run-story-tests`
Runs tests for specific stories and returns results, including any accessibility issues (if configured). Also instructs the agent to interpret the results and resolve any issues found.

We provide a package, `@storybook/mcp`, which is a library that creates a `tmcp`-based MCP server exposing Storybook component/docs knowledge from manifests.

### Prerequisites
- Node.js 20+
- A manifest source containing:
  - `components.json` (required)
  - `docs.json` (optional)

This is the minimal implementation of a server using `@storybook/mcp`:

```ts title="server.ts"
const storybookMcpHandler = await createStorybookMcpHandler();

export async function handleRequest(request: Request): Promise<Response> {
  if (new URL(request.url).pathname === '/mcp') {
    return storybookMcpHandler(request);
  }

  return new Response('Not found', { status: 404 });
}
```

/**
 * Button is used for user interactions that do not navigate to another route.
 * For navigation, use [Link](?path=/docs/link--default) instead.
 *
 * @summary for user interactions that do not navigate to another route
 */
export const Button = // ...

// ✅ Good to demonstrate a specific use case
export const Primary: Story = {
  args: { primary: true },
};

// ❌ Bad - demonstrates too many concepts at once, making
// it less clear and less useful as a reference for agents
export const SizesAndVariants: Story = {
  render: () => (
    <>
      Small Button
      Medium Button
      Large Button
      Outline Button
      Text Button
    </>
  ),
};

# Storybook
> Storybook is a frontend workshop for building UI components and pages in isolation.
Current version: Version 10.5 (10.5)

## Documentation
- [Storybook Docs](https://storybook.js.org/docs): Main documentation
- [Full Documentation (Markdown)](https://storybook.js.org/llms-full.txt): Complete documentation in plain text for LLM consumption

## Markdown Access
Append `.md` to any docs URL to get clean markdown with code examples:
- `https://storybook.js.org/docs/writing-stories/decorators.md`

### Query Parameters
All markdown endpoints (`.md` URLs and `llms-full.txt`) support these query parameters:
- `renderer` - Framework filter for code snippets (default: `react`). Options: `react`, `vue`, `angular`, `svelte`, `web-components`, `solid`, `preact`, `html`, `ember`, `qwik`
- `language` - Language filter for code snippets (default: `ts`). Options: `ts`, `js`
- `codeOnly` - When `true`, returns only the code snippets without prose

Examples:
- `GET /docs/writing-stories/decorators.md?renderer=vue&language=ts`
- `GET /llms-full.txt?renderer=angular&language=js`

{
  "mcpServers": {
    "supernova": {
      "url": "https://mcp.supernova.io/mcp/ds/{ID}",
      "type": "http"
    }
  }
}

AI context management lets you define exactly what each team's agents need to know (design tokens, component APIs, component patterns, usage data, rules, and docs) and publish it as a focused, context-scoped MCP endpoint. Every coding or design tool your team uses can be plugged in directly.

[...]

Publish as a context-scoped MCP endpoint
Each context publishes as its own MCP endpoint. Cursor, Copilot, Claude Code, Codex, or any MCP-compatible tool can plug in directly. No custom integrations, no manual syncing.

Give agents access to real component data
Agents get access to real component APIs: props, import paths, valid compositions, and usage patterns. Engineers get accurate answers without leaving their flow. No more hallucinated component names or incorrect prop signatures.

Manage and distribute skills
Beyond raw data, you can build, curate, and refine the capabilities your agents bring to every interaction: knowledge files, rules, and custom skills. Ship them through predefined or custom exporters when ready.

Update once, and every agent gets it instantly
When your design system changes, your context updates automatically. Every connected agent is working from current information without anyone having to manually push updates.

# Supernova.io

> Supernova.io is the agentic design system platform that turns your tokens, components, documentation, and code patterns into connected intelligence — so your team and their AI agents build from the same source of truth.

Supernova is a design system and knowledge management platform for product teams: design system management, documentation, code automation, and design & engineering context ready for AI agents — connected to your tokens, components, and brand.

## Core

- [Homepage](https://www.supernova.io): Overview of Supernova — the design system and knowledge management platform that keeps product teams and their AI agents working from a single source of truth.

[...]

- [For AI agents](https://www.supernova.io/for-ai): Human-readable overview of key Supernova pages for LLMs and AI crawlers.

**Knapsack MCP exposes a secure MCP server endpoint per workspace.** The endpoint conforms to the Model Context Protocol specification, enabling compliant clients (such as Claude Desktop) to register a Knapsack workspace as a source. Each MCP server instance is identified by a workspace-specific endpoint, typically:

`https://mcp.knapsack.cloud/mcp/<workspace-id>`

The client authenticates and maintains a session via this endpoint to retrieve context-aware resources.

{
  "mcpServers": {
    "knapsack-mcp-toby": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://mcp.knapsack.cloud/mcp/toby"
      ]
    }
  }
}

#### Unlock the power of Data Sources

For teams who want more, Intelligent Tools allows you to create a contextual data layer to empower MCP workflows. In this release, you can connect three source types: **Storybook**, for live component implementation; your **Knapsack workspace**, for tokens, documentation, and patterns; and **Markdown files**, for any additional guidelines or reference content. Together, these give your AI a complete, grounded view of your design system.

Contact your sales partner to discuss unlocking data sources.

### Data Sources Available

Data Sources takes your MCP connection further. By linking external content — like your product codebase, brand guidelines, or Figma libraries — you give Knapsack a richer view of how your design system is actually built and used. The result: AI that can surface inconsistencies, flag drift, and generate outputs that stay true to your design standards at every layer.

# Knapsack Documentation

> Documentation for Knapsack, the design system platform that unifies design tokens, components, and docs so teams design, build, and ship consistent products.

## Instructions for AI Agents

- For clean Markdown of any page, append `.md` to the page URL
- For section-specific indexes, append `/llms.txt` to any section URL
- For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.knapsack.cloud/_mcp/server

This documentation site runs its own Model Context Protocol (MCP) server, so an AI coding assistant can query these docs directly instead of guessing from stale training data. Ask it how to configure SSO, wire up a Git provider, or troubleshoot a deploy preview, and it can pull the answer straight from these pages.

The server is available at:

`https://docs.knapsack.cloud/_mcp/server`

This MCP server exposes the content of *this documentation site*. It's a different thing from the [Knapsack MCP](/intelligent-tools), which connects AI tools to your own workspace's design tokens, components, and docs.

[...]

For a CLI client like Claude Code:

```bash title="Terminal"
claude mcp add --transport http knapsack-docs https://docs.knapsack.cloud/_mcp/server
```

## When to use which

* Pointing an agent at the whole site, or one section of it: `llms.txt`.
* Pointing it at a single page, or copying a page for your own agent: the `.md` URL or the page-action buttons.
* Interactive, conversational access from an AI coding tool: the [MCP server](/intelligent-tools/mcp-server).

AI tools are only as good as the context they're given. Knapsack's Intelligent Tools connect your AI assistant directly to your workspace — giving it live access to your design tokens, components, and documentation, so every output reflects your actual standards, not a generic approximation.

The connection details for MCP via login are identical for all your viewers: https://mcp.zeroheight.com/mcp

But to make sharing access easier, you can add the details to your styleguide using the Remote MCP details block.
You can add a Remote MCP details block to a page in your styleguide so that viewers are able to see instructions for connecting to the MCP from the styleguide.

Open the slash inserter on any page, select Remote MCP details and select MCP via login

Optionally configure which client tabs are visible using the block's settings

Optionally turn off Display help message if you're providing your own setup guidance

The zeroheight MCP server gives AI tools like Claude, Cursor, and GitHub Copilot direct read access to your design system documentation. Instead of copying and pasting guidelines into every prompt, your AI tool can look them up itself — so the answers it gives, and the code it writes, stay aligned with your design system.

[...]

To keep your AI tool grounded in your design system as it works, add something like this to your prompts: "Follow the design system guidelines available via the zeroheight MCP".

The zeroheight MCP exposes five tools. AI agents call these automatically as they work through your prompt — you don't invoke them directly.

list-styleguides
Discovers all zeroheight styleguides accessible via the connected MCP. Returns a list of styleguide IDs and names. This is typically the first call an agent makes.
Not called when using MCP via Link — the connection is already scoped to a single styleguide.

search-pages
Searches the styleguide for pages matching a keyword or topic and returns a list of relevant chunks from the styleguide. The agent will likely use this tool first and may fetch further content if the chunks are insufficient.
Note: only available for teams who have enabled AI features in zeroheight.

list-pages
Returns the full navigation tree for a styleguide — sections, categories, pages, and tabs.

get-page
Fetches the content of a specific page as Markdown, including usage notes, guidance, and any embedded assets. This is the source of truth for what the agent uses when applying your design system.

get-page-asset
Fetches images or file attachments referenced in a get-page response. Accepts multiple URIs in a single call.

So the AI selects pages by their titles and structure, not by reading everything. It doesn't read the whole styleguide to decide what's relevant — it makes a judgement call from the navigation layer. This means how you structure your styleguide directly affects what the AI finds and uses.

Structuring your styleguide for AI
Use clear, descriptive page titles — The AI navigates primarily by title.
One topic per page — The AI picks pages, not sections within pages. Avoid combining unrelated content on a single page.
Keep navigation flat where possible — Deeply nested structures are harder for an AI to traverse. Flatter hierarchies improve both discoverability and retrieval reliability.
Name sections and categories meaningfully — Section and category names are surfaced during MCP navigation. "Foundations > Colour" gives the AI a solid signal.
Write content as rules, not descriptions — Succinct, unambiguous language works better than detailed prose. State what to do, not just what exists.

{
  "mcpServers": {
    "zeroheight-mcp": {
      "command": "npx",
      "args": ["-y", "@zeroheight/mcp-server@latest"],
      "env": {
        "ZEROHEIGHT_ACCESS_TOKEN": "zhat_abc123",
        "ZEROHEIGHT_CLIENT_ID": "zhci_abc123"
      }
    }
  }
}

### Available Tools

**list-styleguides**
Discover available design systems that provide documented guidance for components, patterns, and styles. Call this tool first. If multiple systems are available, confirm with the user which should be used.
_Helpful to reference before generating UI so decisions can reflect established design approaches._

**list-pages**
View the navigation hierarchy of a design system — including categories, pages, and tabs — to better understand how guidance is organized. Call this tool immediately after list-styleguides with the desired styleguide ID.
_Helpful when determining where to look for component or pattern documentation before generating UI._

**get-page**
Fetch guidance from a specific design system page, including usage notes, recommendations, and supporting context.
_Particularly helpful ahead of UI generation to increase the likelihood that outputs reflect the intent of the design system._

The Markdown Export feature allows teams to turn any styleguide page into AI-ready context in one click. Styleguide viewers (and editors) can access a clean Markdown version of the page and send it directly to AI tools.

[...]

Open page MD link in...: opens a new tab in the browser with the AI tool with a pre-filled prompt referring to the page that reads:

For the duration of this conversation, refer to my design system page: [Markdown link]

This supports workflows such as:
- Asking an AI to summarise guidelines before applying them
- Validating UI decisions against documented standards
- Providing structured context to a coding agent
- Generating implementation examples aligned with system rules

Note: if styleguide or page is SSO or Password protected, then only the Copy page MD will be available since LLMs cannot access SSO or Password protected pages.

The Docs Agent watches for changes in Figma and proposes changes to your design system in zeroheight. This works by looking at changes to Figma like updates to components, the agent then identifies the change, reads your documentation and determines if anything needs to be changed so you can keep your docs up to date without manual work.

[...]

Are there any prerequisites for the Beta?
- You must be on an Enterprise plan
- Your organization must have "Allow use of AI features in styleguides" enabled
- You must have at least one styleguide setup that corresponds to one or more Figma files

[...]

Will you use our data for training purposes?
Neither zeroheight nor OpenAI will use customer data for model training purposes.