MCP Server

ビルド済みファイルを直接実行するため、npm install は不要です。

git clone git@github.com:karakuri-ai/design-system.git

Cursor は .cursor/mcp.json、Claude Desktop は 設定 → Developer → MCP サーバー に以下を登録し、ツールを再起動 → 初回接続を承認すれば完了です。

{
  "mcpServers": {
    "karakuri-design": {
      "command": "node",
      "args": ["<cloneした場所>/design-system/mcp/dist/index.js"]
    }
  }
}

常駐サーバーはありません（セッションごとに自動起動・自動終了）。スキルも使う場合は ai-kit/skills/ 以下を各ツールの skills ディレクトリにコピーします。

接続だけでもルールは注入されますが、以下を追記すると AI が照会 → 作成 → 検証のワークフローを確実に守ります（Cursor は .cursorrules に同内容）。 プラグイン導入済みの Claude Code では、同じ規則を持つ karakuri-design スキルが自動で適用されるため、追記は不要です。

## KARAKURI Design System（MCP）

- UI コードを書く前に必ず karakuri-design MCP でコンポーネント・トークンを照会する
  （list_components / get_component / search_tokens）
- 生値（hex カラー・px・ms）を書く前に suggest_tokens で最近接トークンを確認する
- コード作成後は validate_code を実行し、エラー 0 件になるまで修正してから提示する
- トークン外の値はユーザー確認後にのみ /* ds-ignore(rule-id): 理由 */ 付きで使用する

あなた:「ログインフォームを作って」

AI（内部動作）:
 1. list_components   → Field / Input / Button を発見
 2. get_component     → Props・サイズ仕様・import 文を取得
 3. get_layout_pattern → フォームレイアウトを取得
 4. コードを作成（トークンのホワイトリスト内のみ）
 5. validate_code     → 違反があれば修正 → 0 件になるまで反復
 6. 完成コードを提示

Q. データ（トークン・コンポーネント）が更新されたら?

A. design-system を git pull するだけです。再設定・再ビルドは不要で、起動時に最新データを自動反映します。

Q. AI の応答が遅くなりませんか?

A. むしろ軽くなります。全ドキュメントを読み込ませる必要がなく、必要な情報だけをその場で照会するためです。

Q. MCP が落ちたら開発できなくなりますか?

A. なりません。接続がない場合、AI は通常どおり動作します（デザインシステムの自動順守が効かなくなるだけです）。

Q. 独自の色やサイズをどうしても使いたい場合は?

A. AI が「トークン外の値です」と確認を求めてきます。承認すると ds-ignore コメント付きで適用され、意図的な例外として記録されます。

Q. デザインシステム未導入のプロジェクトでも使えますか?

A. 照会・検証は可能です。生成コードを実際に動かす段階で npm install @karakuri-ui/react @karakuri-ui/tokens が必要になります。