ds-pilot

Servidor MCP que expone tu sistema de diseño (componentes + tokens) a agentes de IA. Evita que el agente cree componentes duplicados o codifique valores que deberían ser tokens.

Instalación

npx @lyse-labs/ds-pilot init

Esto hará lo siguiente:

• Detectará tu directorio de componentes y archivo de tokens

• Configurará el servidor MCP en .mcp.json

• Añadirá instrucciones del sistema de diseño a tu CLAUDE.md

Uso

Servidor MCP (para agentes de IA)

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

Una vez configurado, tu agente de IA podrá:

• search_components("button") — buscar componentes existentes

• get_component_props("Button") — ver propiedades, tipos y valores predeterminados

• list_tokens("color") — listar todos los tokens de color

• get_token("color.primary") — obtener un valor de token específico

CLI (para ti)

# 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

Formatos compatibles

Componentes

• React (.tsx, .ts, .jsx, .js)

• Vue / Nuxt (.vue con <script setup lang="ts">)

• Propiedades con tipos, valores predeterminados y variantes estructuradas

• Exportaciones con nombre y por defecto

Tokens

• DTCG JSON (estándar W3C)

• JSON anidado simple (exportación de Figma)

• Propiedades personalizadas de CSS

• Resolución de alias y metadatos de grupo

Cómo funciona

1. Escáner: lee tu base de código y extrae nombres de componentes, propiedades y valores de tokens

2. Servidor MCP: expone estos datos como herramientas que un agente de IA puede llamar

3. Instrucciones de CLAUDE.md: le indican al agente que verifique si existen componentes antes de crear otros nuevos

El agente deja de adivinar y empieza a reutilizar.

Licencia

MIT