ds-pilot

MCP-Server, der Ihr Design-System (Komponenten + Tokens) für KI-Agenten verfügbar macht. Verhindert, dass der Agent doppelte Komponenten erstellt oder Werte hartcodiert, die als Tokens definiert sein sollten.

Installation

npx @lyse-labs/ds-pilot init

Dies führt zu Folgendem:

• Erkennt Ihr Komponentenverzeichnis und Ihre Token-Datei

• Konfiguriert den MCP-Server in .mcp.json

• Fügt Design-System-Anweisungen zu Ihrer CLAUDE.md hinzu

Verwendung

MCP-Server (für KI-Agenten)

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

Sobald die Konfiguration abgeschlossen ist, kann Ihr KI-Agent:

• search_components("button") — vorhandene Komponenten finden

• get_component_props("Button") — Props, Typen und Standardwerte einsehen

• list_tokens("color") — alle Farb-Tokens auflisten

• get_token("color.primary") — einen spezifischen Token-Wert abrufen

CLI (für Sie)

# 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

Unterstützte Formate

Komponenten

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

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

• Props mit Typen, Standardwerten und strukturierten Varianten

• Benannte und Standard-Exporte

Tokens

• DTCG JSON (W3C-Standard)

• Einfaches verschachteltes JSON (Figma-Export)

• CSS Custom Properties

• Alias-Auflösung und Gruppen-Metadaten

Funktionsweise

1. Scanner liest Ihre Codebasis und extrahiert Komponentennamen, Props und Token-Werte

2. MCP-Server stellt diese Daten als Tools bereit, die ein KI-Agent aufrufen kann

3. CLAUDE.md-Anweisungen weisen den Agenten an, vor der Erstellung neuer Komponenten nach vorhandenen zu suchen

Der Agent hört auf zu raten und beginnt mit der Wiederverwendung.

Lizenz

MIT