Wonder

Wonderとは？

Wonderは、AIによるデザイン生成、チャットベースの反復、編集を1つのキャンバスで統合したデザインツールです。主な目的は、チームが初期アイデアから本番用UIへ移行する際に、別途ハンドオフの手間を省くことです。

Wonderは実コードをデザイン形式として構築されています。キャンバス上で作成したものがそのまま出荷するコードにマッピングされ、React + Tailwindのコピーも可能です。

主な機能

• キャンバス上でAIでデザイン生成: デザインしたいものを記述して、その場でビジュアルを生成し、やり取りを減らします。
• 編集中にデザインシステムとチャット: 同じキャンバス上で作業を進めながら、チャットインターフェースで反復・洗練します。
• 精密な編集とバリエーション: スタイル変更、バリエーション作成、スペーシング調整、画像アセット交換を同一ワークフローで。
• 本番用コードで構築: デザインは「実コード」であり、React + Tailwindとしてコピー可能で、手動再構築を避けます。
• 過去の作業を活用した反復（フローステート保持）: 前のデザインを基にオプションを探求し、編集コンテキストを失いません。
• コードコンテキストとエージェントワークフロー対応: 「Code and Canvas, Finally connected」を謳い、エクスポートやエージェント送信が可能。「Explore Wonder MCP」「Wonder Toolkit」も言及。

Wonderの使い方

1. アプリで新規デザインプロジェクトを開始（パブリックアルファエントリーポイントから）。
2. デザインしたいものを記述し、キャンバスに初期レイアウトを生成。
3. チャットと直接編集で洗練—例: スペーシング調整、テーマ/スタイル変更、バリエーション作成。
4. 結果をコピー/エクスポートしてReact + Tailwindに（またはコーディングエージェントに送信）、デザインと実装を一致させます。

ユースケース

• 0-to-1 UIレイアウト作成: 欲しいデザインを記述して初版を素早く生成し、意図した方向に反復。
• コンテキストを失わないデザインバリエーション: 前のオプションを再訪し、新バリエーションを探求しながらキャンバスの編集/フローステートを保持。
• デザイナー主導の本番ハンドオフ削減: Wonder作成物を直接React + Tailwindコピーし、デザインから実装コードへ。
• テーマ/スタイル別のバリエーション作成: テーマ・スタイル変更後、スペーシングなどのレイアウト詳細を調整して複数版作成。
• エージェント支援のデザイン-to-コードワークフロー: コーディングエージェントと併用し、エクスポート/送信で同一プロジェクトの実装継続。

FAQ

• Wonderの「what you see is what you ship」とは？ デザイン形式がコードに1:1マッピングし、実コード（React + Tailwind）をコピーして出荷可能。再構築とハンドオフを減らします。

• 生成後デザインを編集可能？ はい。AIと並行した精密編集をサポート。スタイル変更、バリエーション作成、スペーシング調整、画像交換を含む。

• Wonderはデザイナー専用？開発者も？ デザイナーが全ループを担うワークフローを強調しつつ、コードコンテキストとエージェント対応で両役が同一ワークフロー利用可能。

• 複数バージョンの反復ワークフロー対応？ 前のデザインを基に反復探求し、フローステートを失いません。

代替ツール

• デザイン-to-コードエクスポート付きWebベースUIデザインツール: 専用キャンバスでデザイン後、後でアセット/コードエクスポート。Wonderの「実コード」に対し、デザイン/コードマッピングに追加ステップが必要。
• AI支援デザイン・プロトタイピングツール: プロンプトからモックアップ/プロトタイプ生成後、別途実装。Wonderは直接出荷可能なコード裏付けデザインを強調。
• コンポーネント駆動UI開発ワークフロー（例: デザインシステム、コードファースト）: コードコンポーネントから開始。Wonder比でチャット・キャンバス駆動が少なく、実装優先。
• IDE + UIライブラリ自動コード生成: 開発環境でUIコード生成/修正。Wonderはコードにマッピングする共有キャンバス中心の生成・編集。