デザインモード
デザインモードでは、視覚的なプロンプトでエージェントに指示できます。Agents Window のブラウザから、要素をクリックしたり、ページ上に描画したり、音声で変更内容を伝えたりできます。Cherri Code が必要なコンテキストをキャプチャしてコードを編集するので、その間に次の変更に取りかかれます。
UI の作業は空間的な要素が多くなります。変更内容を文章で説明する代わりに、選択した要素、その背後のコード、周囲のレイアウト、ページ上の視覚的な関係を指示に含められます。これにより、気づいた点を修正するまでのサイクルが短縮されます。
実行中のアプリで要素をクリックし、選択した要素に対してプロンプトを出すと、エージェントがコードを編集します。
デザインモードを開く
デザインモードは、Agents Window 内のブラウザで利用できます。ブラウザを開き、CmdCtrl + Shift + D でデザインモードをオンにします。同じショートカットでオフにすると、通常のブラウズに戻ります。
エージェントに指示する方法
デザインモードでは、意図を伝えるための方法がいくつかあります。
要素を選択する
実行中のプロダクト内の任意の要素をクリックしてターゲットにします。エージェントはその要素とコードを取得するため、アプリを離れることなく、画面に表示されている対象を正確に指定してプロンプトできます。
複数の要素を選択する
複数選択は、要素間の関係に基づいて変更する場合に便利です。2 つのコンポーネントを指定して、一方をもう一方に合わせる、重複するコンテンツを削除する、またはグループ全体を調整するようエージェントに依頼できます。
複数の要素を選択し、まとめてどのように変更するかを説明します。
ページ上に描画する
描画すると、指示の対象となるページ上の領域をエージェントに伝えられます。混み合ったセクションを丸で囲んだり、領域を四角で囲んだり、アニメーションページの一部に印を付けたりできます。注釈はビューポートの静止フレーム上に表示されるため、エージェントはあなたが指示した時点の正確なページ状態を確認できます。
音声で指示する
入力の代わりに、音声で指示できます。エージェントの実行中もマイクは使用できるため、待たずに次の変更をキューに追加できます。
音声入力と描画を組み合わせて、変更内容を説明します。
キーボードショートカット
| 操作 | ショートカット |
|---|---|
| デザインモードを切り替える | CmdCtrl + Shift + D |
| 領域を選択する | Shift + ドラッグ |
| 要素をチャットに追加する | CmdCtrl + L |
| 要素を入力欄に追加する | OptionAlt + クリック |
エージェントが認識する情報
要素を選択すると、コンテキストに相補的な2つの情報が追加されます。
- 要素のID: XPath、コンポーネント、属性、計算済みスタイル、Fiberツリーのpropsです。これにより、エージェントはソースを見つけて、適切なコードを編集できます。
- スクリーンショット: レイアウト、周囲の要素、ページの正確な状態です。これにより、エージェントは変更の空間的なコンテキストを把握できます。
流れを止めずに作業する
インターフェースを調整していると、1つの編集から次の編集へと自然につながっていきます。コンポーネントを調整し、その周囲の余白に気づき、別のコンポーネントも合わせる必要があるとわかります。
デザインモードなら、気づいた変更をその場で送信できます。1つの要素を指定して変更内容を説明し、ページの別の部分に移動して、最初の編集が完了する前に次の編集を送信できます。これにより、マルチタスクを行い、複数のサブエージェントを同時に管理しやすくなります。エージェントの処理が完了すると、アプリがホットリロードされ、変更が実行中のプロダクトに反映されます。
このワークフローには、インターフェース作業に強い高速なモデルが最適です。Composer 2.5 をおすすめします。