Wonder

Wonderは、チームがビジュアルキャンバス上でデザインを生成・編集し、コードへエクスポートまたは同期できるAIネイティブなデザインツールです。MCP接続にも対応し、Freeプランと有料プランがあります。

コードに接続されたAIデザインキャンバス

Wonderは、レイアウトの生成、編集、コードコンテキストとの同時作業を1つのキャンバスを中心に行えるAIネイティブなデザインツールです。サイトでは、AIと対話しながらデザインし、結果を実際のコードと整合させる方法として位置づけられています。

この製品は、デザインから本番環境までを直接つなぐ流れを重視しています。Wonderによると、デザインはコードによって裏付けられており、React + Tailwindとしてコピーでき、MCPサーバー経由でコーディングエージェントに接続できるため、従来の引き継ぎなしにキャンバスと開発ツールの間で作業を移せます。

Wonderは反復的な探索もサポートしています。新しいデザインプロジェクトを開始し、バリエーションを作成し、レイアウトや余白を調整し、コピーを編集し、画像を差し替え、キャンバス上でアセットを生成できます。MCPのドキュメントでは、そのワークフローを Cursor や Claude Code などの対応エージェントへ拡張しています。

会社の利用規約では、Wonderは実際のHTMLとCSSに基づいてデザインを作成、編集、共同作業するためのツールであり、本番対応のコードエクスポートを備えていると説明されています。製品は wonder.design で提供されており、Free ティアと、より多く使う方向けの有料プランがあります。

主な機能

AI支援のキャンバスデザイン

ビジュアルキャンバス上でデザインを生成し、同じワークスペースを離れずに細かな変更を加えられます。

チャット主導の反復

チャットを通じてデザインを編集でき、1つのキャンバス上でデザインとAIとのやり取りをまとめて行えるように設計されています。

コードに整合した出力

Wonderのデザイン形式をコードに1:1で対応付け、別の引き継ぎ工程なしでデザインを本番へ移行できるようにします。

本番ワークフローへのエクスポート

デザインから React + Tailwind をコピーするか、結果をコーディングエージェントに送ってさらに開発できます。

MCPベースのエージェント接続

WonderのMCPサーバーを使って、対応するコーディングエージェントがキャンバス内容を双方向に読み書きできるようにします。

ビジュアルアセット生成

画像を生成し、シェーダーを使って、デザインフロー内でより豊かなビジュアル要素を直接作成できます。

実践的なワークフロー

製品UIをゼロから設計する
新しいレイアウトを生成し、キャンバス上で編集しながら、最終的に公開されるコードと整合した状態を保てます。
既存画面を反復改善する
余白、スタイル、文言、画像の選択、バリエーションを調整しながら、同じ作業コンテキスト内でデザインを進められます。
デザインからコードへの共同作業
Wonderをコーディングエージェントに接続し、設計と実装の間を移動しながら、エージェントにキャンバスの読み書きを行わせられます。
ビジュアルアセットを作成する
プロジェクトでプレースホルダー以上の豊かなアセットが必要な場合に、画像やシェーダーベースのビジュアルをデザインフロー内で直接作成できます。
導入前にツールを評価する
Freeプランでワークフローを試し、チームにさらに多くのクレジットや追加のMCPツール呼び出しが必要なら有料ティアへ移行できます。

Pros and Cons

Pros

1つのキャンバス内でデザインの生成、編集、反復ができます。
React + Tailwind のエクスポートを含め、実際のコードとデザインを整合させられます。
MCPを通じてコーディングエージェントと接続し、キャンバスとコードの双方向ワークフローを実現できます。
Freeプランで始められ、より多く使う場合に向けた明確な有料プランがあります。
画像やシェーダーなど、ビジュアルデザインツールとアセット生成機能の両方を提供しています。

Cons

料金ページではクレジットベースの利用上限が示されているため、大量の作業はプランの容量に依存します。
MCPのセットアップ手順はクライアントごとに異なり、プラグインが利用できない場合は一部の連携で手動設定が必要です。
ソース資料には、詳細なエンタープライズ向け制御やコンプライアンス機能についての説明はありません。

FAQ

Wonderは何に使うものですか？

Wonderでは、ビジュアルキャンバス上でデザインを生成し、細かな編集を行い、同じ画面でコードのコンテキストと並行して作業できます。また、MCPサーバーにより、対応しているコーディングエージェントがWonderのキャンバス内容を読み書きできます。

Wonderにはどのコーディングエージェントが接続できますか？

ドキュメントによると、Wonderは現在 Cursor、Claude Code、Claude Desktop、Codex、Antigravity、Lovable、およびカスタムMCPクライアントをサポートしており、公式プラグインを使う場合は Cursor、Claude Code、Codex が最も早く接続できます。

Wonderではどのような出力ができますか？

Wonderは本番対応のコードをエクスポートでき、ホームページではデザインから React + Tailwind をコピーできると案内されています。利用規約でも、ユーザーは本番対応のコードをエクスポートできると記載されています。

Wonderには無料プランがありますか？

料金ページには Free プランと、有料の Pro、Pro+、Max プランが表示されています。Free は月額 $0、Pro は月額 $20、Pro+ は月額 $60、Max は月額 $200 です。

WonderのMCP認証はどのように機能しますか？

MCPのドキュメントでは、APIキーの管理は不要で、OAuthベースのサインインを使用し、認可後はトークンが自動的に更新されると説明されています。

Quick Facts

カテゴリ: デザインツール / 開発者向けツール
プラットフォーム: wonder.design のWebアプリ
ワークフロー: キャンバス上でデザインし、その後コードへエクスポートまたは同期
連携: Cursor、Claude Code、Claude Desktop、Codex、Antigravity、Lovable、およびカスタムクライアント向けのMCPサーバー
料金: Freeプランに加え、Pro、Pro+、Maxの有料プラン
会社: Aquila Labs, Inc. d/b/a Wonder