AIコーディングの「デザインだけ残念」問題を埋めるMCPサーバーが出てきた

Claude CodeもCursorもCodexも、ロジックを書かせれば優秀だ。APIのつなぎ込み、データベース設計、テスト生成——どれも人間が感心するレベルで仕上げてくる。

だがフロントエンドのデザインを任せると、途端に微妙になる。

色がちぐはぐ、余白のバランスがおかしい、タイポグラフィに統一感がない。コードとしては動くが、見た目が「とりあえず作りました」感から抜け出さない。AI IDEのユーザーなら一度は経験しているはずだ。

AI Designer MCPは、まさにこの穴を埋めにきたツールだ。

MCPサーバーとしてIDEに接続する

AI Designerの正体は、MCPサーバーだ。Claude Code、Cursor、Codex、VS Code（Copilot）、Windsurf——主要なAIコーディングツールのどれにでも接続できる。

セットアップはワンコマンド。OAuthでブラウザ認証を済ませると、CLIが各ツールに合った設定ファイルを自動生成する。Claude Codeなら.claude/settings.jsonに、Cursorなら.cursor/mcp.jsonに、適切なフォーマットで書き込まれる。

接続後は、普段の開発フローの中で「このページのUIをデザインして」と指示するだけだ。エージェントがAI Designer MCPを呼び出し、デザインを生成してくれる。

コードベースを読んでからデザインする

このツールの一番の強みは、プロジェクトの文脈を理解してからデザインを生成する点だ。

MCPサーバーがプロジェクトを解析し、使用フレームワーク（Next.js、React、Vue、Svelte等）、コンポーネントライブラリ（shadcn/ui、Radix等）、CSSトークン、ルート構造を自動検出する。その情報を踏まえた上でUIを生成するから、既存のコードベースに自然に溶け込むデザインが出てくる。

たとえばshadcn/uiを使ったNext.jsプロジェクトなら、shadcn/uiのコンポーネントとTailwind CSSのトークンに準拠したUIが生成される。「見た目は良いけどプロジェクトの技術スタックと合わない」という問題が起きにくい。

自然言語でデザインを調整する

生成されたデザインが一発で完璧ということはまずない。ここでAI Designerの反復設計機能が活きる。

「余白をもう少し広く」「ヘッダーの色をブランドカラーに合わせて」「モバイル版も作って」——こうした自然言語のフィードバックを渡すと、前のデザインをベースに調整してくれる。ゼロからやり直しにならない。

デスクトップとモバイルの両ビューポートに対応しているのも実用的だ。レスポンシブデザインのプレビューまでMCPサーバーの中で完結する。

料金は月25ドルから

プラン	月額	クレジット	備考
Free	$0	5（生涯）	お試し用
Pro	$25（約3,750円）	100/月	1クレジット = 1デザイン生成

無料枠は5回分しかないので、実質的にはPro契約が前提だ。月100回のデザイン生成が$25。1回あたり約37.5円。デザイナーに外注するコストと比べれば桁違いに安いが、「MCPサーバーにこの値段を払うか」は判断が分かれるところだろう。

年払いにすると約17%割引が適用される。

Figma MCPとの違い

デザイン系MCPサーバーとしては、Figma公式のMCPも存在する。Figma MCPはFigmaのデザインファイルをコーディングエージェントに読み込ませるもので、「既にFigmaでデザインがある」プロジェクト向けだ。

AI Designerは逆のアプローチ。デザインファイルがない状態から、コードベースの文脈に合ったUIを生成する。つまり「デザイナーがいない/デザインが未定」のプロジェクトで力を発揮する。

個人開発やスタートアップの初期フェーズ、プロトタイピングで「とりあえずそれっぽいUIを作りたい」場面には、AI Designerのほうが合っている。

正直な感想

光る点。 AIコーディングツールの「デザインが弱い」という最大の弱点を、MCPという拡張性の高い仕組みで補っている点は正しいアプローチだと思う。コードベースのフレームワークやCSSトークンを自動検出する仕組みは、手動でプロンプトに書くより遥かに楽だ。

微妙な点。 無料枠が生涯5回というのは率直に少なすぎる。「本当に使えるかどうか」を判断するのに5回では足りない。月100回のPro枠も、頻繁にデザインを生成するプロジェクトでは心許ない。

もう一つ。出力がTailwind CSSベースのため、TailwindやCSS-in-JSを使っていないプロジェクトでは追加の変換作業が発生する可能性がある。すべての技術スタックで同じ体験が得られるわけではない。

AIコーディングに「デザインレイヤー」が載る流れ

AI Designerが面白いのは、「コーディングエージェントにデザイン能力を後付けする」というコンセプトだ。

これまでのAI開発ツールは、コードとデザインを別々のツールで扱うのが前提だった。デザインはFigma、コードはCursorやClaude Code、その間を人間が橋渡しする。AI DesignerのようなMCPサーバーが普及すれば、デザインの初期生成から反復までコーディングエージェントのワークフロー内で完結するようになる。

プロのデザイナーの仕事が奪われるという話ではない。「デザイナーがいないプロジェクトの初期UIの質」が底上げされる。これはソフトウェア開発全体にとってポジティブな変化だ。