今回のアップデートで、デザイン機能（Browser Layout Editor）とデバッグ機能（Debug Mode）が統合され、「見た目を作って、動かない原因を即座に特定する」という一連のフローがAIだけで完結するようになりました。
1. 【デザイン】Browser Layout Editor（旧プレビューの進化形）
単なるプレビューではなく、「Figmaのようにコードをいじる」ことが可能になりました。
- 直感的なドラッグ操作: ブラウザ上の要素をマウスで掴んで移動。並び替えも自由自在です。
- ビジュアル・プロパティ調整: サイドバーのカラーピッカーやスライダーで、CSSの数値を直感的に変更。
- ポイント＆プロンプト: 修正したい箇所をクリックして「ここを派手にして」と指示。AIが裏側のコード（ReactのPropsやTailwind等）を自動更新します。
- 状態の即時検証: ボタンのHover時やエラー表示など、コンポーネントの「状態（State）」をエディタ上で切り替えながらデザインを追い込めます。
2. 【デバッグ】Debug Mode（推測から「科学的検証」へ）
「デザインはいいけど、ボタンを押しても動かない」といったバグを、エンジニアのように解決します。
- ログによる事実確認: 従来のAIは「たぶんここが原因です」と推測していましたが、2.2からは「一時的なログを出力して、実行時の挙動を確認」してから修正案を出します。
- 3フェーズ・アプローチ:
- Explain: バグの原因を分析し、調査用ログを埋め込む。
- Reproduce: 実際に動かしてエラーログを収集・特定。
- Verify: 修正案を適用し、デバッグ用コードを綺麗に削除して完了。
3. 【タスク管理】Plan Mode & Multi-agent Judging
より複雑なデザイン制作や機能実装を支える「司令塔」機能です。
- Plan Modeの視覚化: 制作ステップをMermaid形式（フローチャート）で自動生成。どこまで進んだか一目でわかります。
- Multi-agent Judging: 複数のAI（Claude 3.5や最新の独自モデル等）が同時に解決策を提案し、「どちらのデザイン案・コードが最適か」をAI自身が評価して推薦してくれます。
