AIDesigner MCP サーバー
Claude Code、Cursor、Codex、VS Code/Copilot、WindsurfなどのAIコーディングアシスタントに、コードベース内で直接、実用レベルのUIデザインを生成、改良、統合する力を与える軽量MCPサーバーです。
概要
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: ユーザースコープ設定。
インストールとセットアップ
-
プロジェクト内で初期化コマンドを実行します：
npx -y @aidesigner/agent-skills init <ホスト> --trust-project(
<ホスト>をcodex、cursorなどに置き換えてください) -
CLIはMCPサーバーを登録し、OAuthサインイン用のブラウザウィンドウを開きます。
-
AIアシスタントのMCPパネル経由で接続します（例：Claude Codeで
/mcpを実行し、"aidesigner"を選択）。 -
プロンプトを開始します：「ダークモード対応のモダンな価格設定ページを生成して」または「このダッシュボードをブランドカラーを使って改良して」。
詳細なセットアップガイド、ツールリファレンス、トラブルシューティングは 公式ドキュメント で利用可能です。
ユースケース
- 迅速なフロントエンドプロトタイピング: エディターを離れることなく、数分でアイデアから完成度の高いUIへ。
- デザインシステム準拠: 生成されるすべてのコンポーネントが既存のトークンやコンポーネントを尊重することを保証します。
- 反復的なUI改良: 自然言語を使用して、レイアウト、アクセシビリティ、またはレスポンシブネスを微調整します。
- フルスタック開発: 美しいインターフェースを含む完全な機能を構築するために、コーディングエージェントと組み合わせます。
- チームコラボレーション: AI支援開発と手動開発の両方で一貫したデザイン品質を維持します。
技術詳細
- プロトコル: Model Context Protocol (MCP) — 標準化されたツールおよびコンテキスト公開方式。
- 配布方法: npm を通じて利用可能（
@aidesigner/agent-skillsおよび関連パッケージ）。 - 認証: OAuth ベースで、自動トークン管理を実装。
- ステータス: 活発に開発中。Product Hunt で早期導入が進む v0.1.0 をリリース済み。
AIDesigner MCP は、AI コーディングアシスタントを単なるコード生成器から、設計とコーディングを完遂するフルパートナーへと進化させ、美しい本番品質の UI をすべての開発者が利用可能にします。
詳細情報、ライブデモ、最新のアップデートについては、aidesigner.ai をご覧ください。