# AIDesigner MCP サーバー

Claude Code、Cursor、Codex、VS Code/Copilot、WindsurfなどのAIコーディングアシスタントに、コードベース内で直接、実用レベルのUIデザインを生成、改良、統合する力を与える軽量MCPサーバーです。

Canonical URL: https://a2a-mcp.org/entry/aidesigner-mcp-ja

Language: ja

Category: MCP Servers

Updated: 2026-04-08

## 概要

AIDesigner MCPサーバーは、強力なAIコーディングアシスタントとプロフェッショナルなUI/UXデザインの間のギャップを埋める軽量な **Model Context Protocol (MCP)** サーバーです。Claude Codeなどのツールの最大の弱点の一つ——ネイティブのUIデザイン能力の低さ——に対処し、エディター内から直接インテリジェントなデザインツールにアクセスできるようにします。

このサーバーは、プロジェクトのフレームワーク、コンポーネントライブラリ、CSS/Tailwindトークン、およびデザインシステムを読み取り、既存のスタックにシームレスに適合する製品レベルのUIコードを生成します。Figmaとコードエディターを切り替えたり、AIが生成したデザインを手動で修正する必要はもうありません。

## 主な機能

- **コードベースを認識したデザイン生成**: UIを作成する前に、プロジェクトを分析してフレームワーク、コンポーネント、トークンを理解します。
- **`generate_design` ツール**: 自然言語のプロンプトから、製品レベルのUIコンポーネントやページを作成します。
- **`refine_design` ツール**: 会話形式の指示を使って、レイアウト、色、間隔、スタイルを反復的に改善します。
- **直接コード統合**: 手動での調整なしで、コードベースに直接挿入できるコードを出力します。
- **OAuth認証**: MCPホストによって自動的に処理されるトークンリフレッシュを備えた安全なサインインフロー。
- **幅広い互換性**: Claude Code、Codex、Cursor、VS Code (Copilot Agentモード)、およびWindsurfで動作します。
- **ゼロ摩擦セットアップ**: 単一の`npx`コマンドでインストールと設定が完了します。

## 対応AIコーディングツール

- **Claude Code**: `/mcp`コマンドと専用エージェントを使用した完全ガイド付きワークフロー。
- **Cursor**: AI駆動編集のためのシームレスな統合。
- **Codex**: プロジェクトレベルの設定サポート。
- **VS Code / GitHub Copilot**: エージェントモード互換性。
- **Windsurf**: ユーザースコープ設定。

## インストールとセットアップ

1. プロジェクト内で初期化コマンドを実行します：
   ```bash
   npx -y @aidesigner/agent-skills init <ホスト> --trust-project
   ```
   (`<ホスト>` を `codex`、`cursor` などに置き換えてください)

2. CLIはMCPサーバーを登録し、OAuthサインイン用のブラウザウィンドウを開きます。

3. AIアシスタントのMCPパネル経由で接続します（例：Claude Codeで `/mcp` を実行し、"aidesigner"を選択）。

4. プロンプトを開始します：「ダークモード対応のモダンな価格設定ページを生成して」または「このダッシュボードをブランドカラーを使って改良して」。

詳細なセットアップガイド、ツールリファレンス、トラブルシューティングは [公式ドキュメント](https://www.aidesigner.ai/docs/mcp) で利用可能です。

## ユースケース

- **迅速なフロントエンドプロトタイピング**: エディターを離れることなく、数分でアイデアから完成度の高いUIへ。
- **デザインシステム準拠**: 生成されるすべてのコンポーネントが既存のトークンやコンポーネントを尊重することを保証します。
- **反復的なUI改良**: 自然言語を使用して、レイアウト、アクセシビリティ、またはレスポンシブネスを微調整します。
- **フルスタック開発**: 美しいインターフェースを含む完全な機能を構築するために、コーディングエージェントと組み合わせます。
- **チームコラボレーション**: AI支援開発と手動開発の両方で一貫したデザイン品質を維持します。

## 技術詳細

- **プロトコル**: Model Context Protocol (MCP) — 標準化されたツールおよびコンテキスト公開方式。
- **配布方法**: npm を通じて利用可能（`@aidesigner/agent-skills` および関連パッケージ）。
- **認証**: OAuth ベースで、自動トークン管理を実装。
- **ステータス**: 活発に開発中。Product Hunt で早期導入が進む v0.1.0 をリリース済み。

AIDesigner MCP は、AI コーディングアシスタントを単なるコード生成器から、設計とコーディングを完遂するフルパートナーへと進化させ、美しい本番品質の UI をすべての開発者が利用可能にします。

詳細情報、ライブデモ、最新のアップデートについては、[aidesigner.ai](https://www.aidesigner.ai/) をご覧ください。

## Tags

- mcp
- mcpサーバー
- UIデザイン
- フロントエンド
- Claude Code
- Cursor
- AIコーディング
- デザインシステム
- Tailwind
- コンポーネントライブラリ

## Sources

- [Project website](https://www.aidesigner.ai/docs/mcp)