Wonder

Wonderとは？

Wonder はデザインとフロントエンド開発をひとつのワークフローに統合する、キャンバスベースのデザインツールです。エンジニアへのハンドオフを別途必要とする従来型のデザインツールとは異なり、Wonder は本番投入可能なコード（React + Tailwind）と 1:1 で対応するデザインを生成します。デザイナーはキャンバス上で直接プロンプトを出し、反復し、ビジュアルを磨き上げることができ、その間に裏側のコードもリアルタイムに更新されます。さらに MCP server を通じて Cursor や Claude Code などのコーディングエージェントと連携し、開発者はスクリーンショットや再構築なしにデザインコンテキストをそのままコードベースに取り込めます。

主な機能

• リアルタイムのデザイン・トゥ・コード

  キャンバス上で作成したすべての要素は、実際の HTML/CSS に裏付けられています。デザインフォーマットがコードと 1:1 で対応するため、デザイナーが見ているものと開発者が出荷するものに差はありません。

• キャンバスベースの AI 生成

  やりたいことを伝えるだけで、Wonder がレイアウト、コンポーネント、スタイルバリエーションをキャンバス上に直接生成します。任意の要素を選択して、その場でブラッシュアップできます。

• MCP Server 連携

  内蔵の MCP server を介して、Wonder を Cursor や Claude Code などのコーディングエージェントに接続できます。エージェントがデザインのコンテキストを直接読み取るため、手作業での描き直しやスクリーンショットは不要です。

• 画像生成を内蔵

  ツールを切り替えることなく、キャンバス上でそのまま画像を生成。プレースホルダー素材は不要——必要なものを説明すれば、その場に現れます。

• インタラクティブなビジュアルのための Shader 対応

  GPU アクセラレーションされた Shader エフェクトをデザインに加え、静的なモックアップを超えるリッチでインタラクティブなビジュアルを実現します。

• Credit ベースの段階的プライシング

  Free、Pro、Pro+、Max の 4 プランを用意。月間 Credit は 300 から 60,000 まで幅広く、試しに使うところから日常のプロダクション運用まで幅広くカバーします。

ユースケース

• プロダクト UI デザイン : Web アプリやモバイル UI を構築するデザイナーは、キャンバスから離れることなく、本番投入可能な React + Tailwind コンポーネントを生成・反復・エクスポートできます。
• デザインから開発へのハンドオフを排除 : デザインから開発への翻訳ロスに悩まされているチームは、Wonder を使うことで、出荷される製品をデザイン通りに、手作業での再実装なしで実現できます。
• マーケティングとランディングページ : マーケターやグロースチームは、ひとつのキャンバスからランディングページ、ピッチデック、プロモーション用グラフィックを素早くプロトタイプし、出荷できます。
• エージェントによる開発支援 : Cursor や Claude Code などの AI コーディングエージェントを使う開発者は、MCP 経由でリアルタイムなデザインコンテキストを取得し、フロントエンド実装を加速できます。
• 本物のコードによるビジュアルプロトタイピング : ファウンダーや個人開発者は、専任のデザイン／エンジニアリングチームがなくても、初期アイデアをインタラクティブで出荷可能なプロトタイプに仕上げられます。

よくある質問