Wonder

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

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

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

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