1つのキャンバスで生成と編集
AI で新しいデザインプロジェクトを始めたあと、別のツールへ移動せずに同じキャンバス上で直接洗練できます。
Wonder
Wonderは、AIでレイアウトを生成し、共有キャンバスで編集し、コード対応のワークフローで書き出しや同期ができるWebベースのデザインツールです。
Wonder とは何か
Wonderは、AI生成、キャンバスベースの編集、コード対応ワークフローを組み合わせたデザインツールです。アイデアからデザインへ、さらに実装へと進む際に、デザインとコードを別々の受け渡しとして扱わずに進めたい人向けに作られています。
この製品は、1つの作業面を中心に設計されています。新しいデザインの生成、細かな編集、コードコンテキストを使った作業、そしてコードへの書き出しや送信ができます。MCPドキュメントでは、Wonder MCP server を通じて対応するコードエージェントが Wonder のキャンバス内容を読み書きできるようにすることで、このワークフローを拡張しています。
主な機能
精密な反復編集
スタイルの更新、余白の調整、コピーの編集、レイアウト生成、バリエーション作成などを、デザイン画面を離れずに的確に行えます。
コードに裏打ちされたデザイン出力
実際のコードコンテキストを元に作業し、デザインから React + Tailwind をコピーできるため、出力を実装可能な状態に近づけられます。
エージェントとの MCP 連携
MCP を通じて Wonder を対応するコードエージェントに接続し、エージェントが Wonder のキャンバス内容を双方向に読み書きできるようにします。
長時間のセッション向けワークフロー機能
チャット履歴、コマンドパレットでの移動、レイヤー検索、メッセージ編集を使って、長時間のデザインセッションを整理しやすくします。
内蔵アセットとビジュアル生成
プレースホルダーのアセットだけでは足りない場合に、画像やシェーダーベースのビジュアルをキャンバス上で直接生成できます。
Wonder を使う場面
アイデアから最初のキャンバスへ
プロンプトから始めて初期デザインを生成し、別のツールへ引き渡すのではなく同じワークスペースで編集を続けたいときに Wonder を使います。
既存デザインの反復改善
すでにデザインがあるものの、余白、コピー、レイアウト、コンポーネントのバリエーションなどを細かく調整する必要があるときに使います。
本番コード向けのデザイン
React + Tailwind などのコードエクスポート経路や、MCP を通じたコードエージェントへの直接接続を含め、デザイン出力を実装に近い形に保ちたい場合に Wonder を使います。
コードエージェントとの共同作業
Claude、Cursor、Codex、または同様のクライアントが、ビルドプロセスの一部として Wonder のキャンバス内容を読み取ったり更新したりする必要がある、エージェント支援ワークフローで使います。
複数の方向性を探る
複数の方向性を比較したり、以前のプロンプトを見直したり、レイヤーやチャットをより丁寧に管理したりする必要がある長めの探索セッションで、キャンバスツールを使います。
Pros and Cons
Pros
- デザイン生成、編集、コードコンテキストを1つのキャンバスにまとめています。
- React + Tailwind、Tailwind、CSS、PNG などの直接エクスポート経路をサポートしています。
- MCP ドキュメントは、複数のコードエージェントやカスタム MCP クライアントへの具体的な橋渡しを提供しています。
- 料金ページには無料の導入プランに加え、より多くの利用向けの有料プランが表示されています。
Cons
- ソースで示されている料金情報は、プラン名、月額料金、クレジット上限に限られており、提供資料にはより詳しい請求の説明がありません。
- 公開ドキュメントでは対応エージェントと MCP 設定が強調されていますが、収集したソースで文書化されているのは列挙されたもの以外の広範なサードパーティ連携ではありません。
FAQ
Wonder はどのようにコードエージェントに接続しますか？
Wonderは、デザインファイルを Claude、Cursor、Codex、Antigravity、Lovable、およびカスタムMCPクライアントなどのエージェントに接続する `https://mcp.wonder.so/mcp` のMCPサーバーを提供します。セットアップは、クライアントに応じてプラグインベースと手動のフローで説明されています。
Wonder はどのエージェントとクライアントをサポートしていますか？
MCPドキュメントによると、Wonderは Cursor、Claude Code、Claude Desktop、Codex、Antigravity、Lovable、およびカスタムMCPクライアントをサポートしています。Cursor、Claude Code、Codex については、対応している場合、公式の Wonder プラグインを使うことが推奨されています。
Wonder から何をエクスポートできますか？
変更履歴によると、Wonder はセクションを Tailwind または CSS としてエクスポートしたり、選択範囲を PNG としてコピーしたり、キャンバスから直接コードをエクスポートしたりできます。ホームページでも、デザインを React + Tailwind としてコピーできると説明されています。
Wonder には無料プランがありますか？
料金ページには無料プランと有料プランが表示されています。無料は月額 $0 からで、有料ティアには Pro、Pro+、Max があり、より高いクレジット上限と追加機能が含まれます。
Wonder は誰向けですか？
Wonder は、AI でデザインを生成し、キャンバス上で正確に編集し、同じワークフロー内で実際のコードコンテキストを扱うためのデザインツールとして紹介されています。ホームページとドキュメントでは、デザインとコードを連携させたい人向けと位置づけられています。
Quick Facts
- カテゴリ
- デザインツール
- Webサイト
- wonder.design
- プラットフォーム
- Web アプリ
- 主なワークフロー
- AI によるデザイン生成、キャンバス編集、コードエクスポート
- 連携
- Cursor、Claude Code、Claude Desktop、Codex、Antigravity、Lovable、およびカスタムMCPクライアント向けの Wonder MCP
- 価格
- 無料プランと Pro、Pro+、Max プラン
Wonderの代替品
ByteAsk
ByteAskは、C/C++向けのターミナル起点AIコーディングエージェント。リポジトリを編集し、コンパイラやデバッガ、サニタイザ、テストで変更を検証してから差分を表示。無料枠あり。
CreateOS Sandbox
CreateOS Sandboxは、FirecrackerマイクロVM上でコードやエージェントのワークロードを実行できる分離型コンピュート環境です。SDK、CLI、MCPで制御可能。
hob
hobは、エージェントのセッション、ターミナル、履歴、後続作業を、既存のツールやプロバイダーに合わせて整理できる独立したコーディングエージェント向けワークスペース。ローカルでの制御を重視する開発者に最適。
Ably Chat
Ably Chatは、カスタムのリアルタイムチャットアプリを構築できるチャットAPIプラットフォームです。ルーム単位のメッセージ、入力中表示、プレゼンス、リアクション、メッセージ更新に対応し、利用量ベースの料金も選べます。
Make Real
Make Realは、tldraw SDKとAIモデルを使い、手描きワイヤーフレームを動作するHTMLプロトタイプに変換するNext.jsアプリです。キャンバスでスケッチし、コード生成し、埋め込みプレビューで確認できます。
Manta AI
Manta AIは、URLからアプリの挙動を把握し、回帰を検出し、スクリプトやセレクタ管理なしでテストを生成できる自律型Webアプリテストツールです。