ds-pilot

MCP server that exposes your design system (components + tokens) to AI agents. Prevents the agent from creating duplicate components or hardcoding values that should be tokens.

Install

npx @lyse-labs/ds-pilot init

This will:

• Detect your components directory and tokens file
• Configure the MCP server in .mcp.json
• Install the using-ds-pilot skill to .claude/skills/ (or fall back to CLAUDE.md instructions if skills are not supported)

Usage

MCP Server (for AI agents)

npx @lyse-labs/ds-pilot serve --components ./src/components --tokens ./tokens.json

Once configured, your AI agent can:

• search_components("button") — find existing components
• get_component_props("Button") — see props, types, defaults
• list_tokens("color") — list all color tokens
• get_token("color.primary") — get a specific token value

CLI (for you)

# List all components
npx @lyse-labs/ds-pilot list components --dir ./src/components

# List tokens filtered by type
npx @lyse-labs/ds-pilot list tokens --file ./tokens.json --type color

# Search components
npx @lyse-labs/ds-pilot search button --dir ./src/components

# Show component props
npx @lyse-labs/ds-pilot props Button --dir ./src/components

Supported Formats

Components

• React (.tsx, .ts, .jsx, .js)
• Vue / Nuxt (.vue with <script setup lang="ts">)
• Props with types, defaults, and structured variants
• Named and default exports

Tokens

• DTCG JSON (W3C standard)
• Plain nested JSON (Figma export)
• CSS Custom Properties
• Alias resolution and group metadata

How It Works

1. Scanner reads your codebase and extracts component names, props, and token values
2. MCP Server exposes this data as tools an AI agent can call
3. Skill (or CLAUDE.md fallback) tells Claude to check for existing components and tokens before writing UI code

The agent stops guessing and starts reusing.

License

MIT