ds-pilot

デザインシステム（コンポーネント + トークン）をAIエージェントに公開するためのMCPサーバーです。エージェントによるコンポーネントの重複作成や、トークン化すべき値のハードコードを防ぎます。

インストール

npx @lyse-labs/ds-pilot init

これにより、以下の処理が行われます：

• コンポーネントディレクトリとトークンファイルの検出

• .mcp.json へのMCPサーバーの設定

• CLAUDE.md へのデザインシステムに関する指示の追加

使用方法

MCPサーバー（AIエージェント用）

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

設定が完了すると、AIエージェントは以下の操作が可能になります：

• search_components("button") — 既存のコンポーネントを検索

• get_component_props("Button") — プロップス、型、デフォルト値を確認

• list_tokens("color") — すべてのカラー（色）トークンを一覧表示

• get_token("color.primary") — 特定のトークン値を取得

CLI（ユーザー用）

# 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

対応フォーマット

コンポーネント

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

• Vue / Nuxt (.vue （<script setup lang="ts"> を使用）)

• 型、デフォルト値、構造化されたバリアントを持つプロップス

• 名前付きエクスポートおよびデフォルトエクスポート

トークン

• DTCG JSON (W3C標準)

• シンプルなネストされたJSON (Figmaエクスポート)

• CSSカスタムプロパティ

• エイリアスの解決とグループメタデータ

仕組み

1. スキャナーがコードベースを読み取り、コンポーネント名、プロップス、トークン値を抽出します。

2. MCPサーバーがこのデータをAIエージェントが呼び出せるツールとして公開します。

3. CLAUDE.mdの指示により、エージェントは新しいコンポーネントを作成する前に既存のものを確認するようになります。

エージェントは推測をやめ、再利用を開始します。

ライセンス

MIT