AIDesigner 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: ユーザースコープ設定。

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

1. プロジェクト内で初期化コマンドを実行します：

   Copy

   npx -y @aidesigner/agent-skills init <ホスト> --trust-project
   

   (<ホスト> を codex、cursor などに置き換えてください)

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

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

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

詳細なセットアップガイド、ツールリファレンス、トラブルシューティングは 公式ドキュメント で利用可能です。

ユースケース

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

技術詳細

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

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

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