コードエディタがデザインツールになる——AIDesigner MCPが示すUI生成の新アプローチ
「AIが生成したUIはどれも同じに見える」——この不満は、生成AIを使い始めたデザイナーや開発者の間で根強い。プロンプトを変えても出てくるのは似たようなカードレイアウト、似たような青いボタン。量産感の正体は、コンテキストの欠如だ。ツールがリポジトリの構造もデザイントークンも知らないまま汎用的なUIを吐き出している。
2026年4月、AIDesigner社はその問いに対するひとつの回答として、MCPサーバー「AIDesigner」のv0.1.0をnpmで公開した。
AIDesigner MCPとは何か
AIDesigner MCPは、コードエディタ内から自然言語でUIを生成・改善するHTTPベースのMCPサーバーだ。Claude Code、Cursor、Windsurf、VS Code（GitHub Copilot拡張）、Codexに対応しており、エディタを離れることなくデザイン作業を完結させることを目指している。
提供する機能は主に2つある。
generate_design は、テキストプロンプトからHTML＋インラインTailwind CSSを生成する。PC・モバイル両対応のレスポンシブレイアウトを出力できる。ここで重要なのは、このツールが単にHTMLを生成するだけでなく、リポジトリのフレームワーク・CSSトークン・ルート構成を自動検出して出力に反映する点だ。つまり、すでにデザインシステムを持つプロジェクトなら、そのルールに沿ったコンポーネントが出てくる。
refine_design は、生成済みのUIを自然言語フィードバックで反復調整する機能だ。「もう少し余白を広く」「フォントをもう1段階大きく」「ヘッダーの背景をダークにして」という粒度の指示を受け付け、レイアウト・色・タイポグラフィを段階的に詰めていける。
CLIがPNGプレビューを生成するため、コードを実行して確認するより先に見た目を把握できる点も実用的だ。
使い方：セットアップからUI生成まで
セットアップは1コマンドから始まる。
npx -y @aidesigner/agent-skills init <host>
実行するとOAuth認証フローが起動し、認証が完了するとMCPサーバーがエディタに登録される。Claude Code、CursorなどMCPに対応したエディタであれば、以降はチャット欄から generate_design や refine_design を呼び出せる。
料金体系はFreemiumだ。Freeプランは無料枠付き（具体的なクレジット数は非公開）、Proプランは月25ドルで100クレジット/月が使える。UI生成・調整を業務で頻繁に使うならProプランが現実的な選択肢になるが、まず試す分にはFreeプランで十分なケースが多いだろう。
競合ツールとの比較
AIデザイン生成ツールの市場は、すでにいくつかの有力プレイヤーが存在する。AIDesignerの立ち位置を整理しておく。
| ツール | アプローチ | 価格 | 特徴 |
|---|---|---|---|
| AIDesigner | エディタ内MCP | Free / $25/月 | リポジトリ文脈を読んで生成、エディタ離脱不要 |
| v0.dev (Vercel) | Webアプリ | Free / $20/月〜 | shadcn/ui+React生成、Vercelデプロイ統合 |
| Figma + Claude Code to Figma | コード→Figma | $15/seat/月〜 | 既存UIのFigma化（逆方向） |
| Bolt.new | Webアプリ | Free / $25/月 | ブラウザ内IDE |
| Lovable | Webアプリ | Free / $25/月 | MVP高速開発、Supabase統合 |
既存ツールの多くは「ブラウザで動くWebアプリ」だ。v0.dev、Bolt.new、Lovableはいずれもブラウザ上でUIを生成し、コードをエクスポートするという流れを取る。優れたツールだが、生成結果をエディタに持ち込む手間が生じる。
一方、Figmaが2026年2月に発表した「Claude Code to Figma」ワークフローは方向性が逆だ。エディタのコードをFigmaのデザインに変換する、いわば「コードからデザインへ」の流れを作った。
AIDesignerはその逆——「エディタ内でデザインを完結させる」方向を選んだ。エディタからFigmaに出ていかず、コードとデザインをエディタの中で循環させるアプローチだ。
筆者の視点：エディタ内完結の意味
AIDesignerが面白いのは、ポジショニングの選択にある。Webアプリとして独立したプロダクトを作るより、MCPを使って既存のエディタに乗り込む方法を選んだ。
これにはトレードオフがある。エディタ側がMCPに対応している必要があり、現状はClaude Code、Cursor、Windsurf、VS Code＋Copilot、Codexに限定される。ただ2026年4月時点でMCPのインストール数が9,700万を超えていることを踏まえると、MCP対応エディタはもはや「一部の人だけが使うもの」ではない。
もうひとつの課題は、リポジトリ文脈の検出精度だ。「既存のデザイントークンを読んで生成する」という機能は、CSSトークンが整理されていないプロジェクトではその恩恵が薄くなる。デザインシステムが整備されたチームほど恩恵を受けやすく、まさにそれが必要なプロジェクトが一番使いやすい設計になっている。
エディタ内でUIを作る発想自体は新しくないが、MCPを経由することで「AIとリポジトリの文脈をつなぐ」部分をAPIとして切り離した点は、他のツールにはない設計上の工夫だ。v0.1.0という初期バージョンの段階でどこまで使えるか、実際に試してみる価値はある。
Sources: