AIインタラクションの作成

概要

AIインタラクションの作成では、自然言語を使用してインタラクションを作成できます。トリガーやレスポンスを手動で設定する必要はありません。実現したいことを記述すると、Studio AIが適切なインタラクションロジックを生成します。

仕組み

1. AIパネルを開きます。
2. インタラクションのリクエストを自然言語で入力します。
3. 精度を高めるため、@メンションを使用して特定のレイヤーを参照します。
4. AIがワークスペースを分析し、インタラクションのプランを作成し、ステップごとに実行します。
5. 結果をレビューし、必要に応じて手動で修正します。

プロンプトの例

基本的なインタラクション：

• 「タップされたら@Buttonの色を変更する」
• 「@Cardがクリックされたらシーン2に移動する」
• 「@Layerを横にのみドラッグできるようにする」

複雑なインタラクション：

• 「右にあるボタンの色とテキストを変更するStopとStartのインタラクションを追加する。また、それに応じてタイマーを開始、停止する」
• 「電子メールが無効な場合、ボタンを灰色に変更する」
• 「トグルを作成する。1回目のタップではパネルを表示し、2回目のタップではパネルを隠す」

AIのプロセスについて

プロンプトを入力すると、Studio AIは以下を実行します。

1. ワークスペースを分析する：選択されたレイヤー、既存の変数、シーンのコンテキストをレビューします。
2. インタラクションのプランを作成する：実行するステップの要約を表示します。
3. ステップごとに実行する：影響を受けるレイヤーを強調表示しながら、トリガー、レスポンス、数式を作成します。
4. 完了を確認する：完了ステータスを表示し、必要に応じて元に戻すオプションを表示します。

コンテキストアウェアネス

Studio AIはワークスペースのコンテキストを理解します。

• 選択されたレイヤー：ユーザーが選択したレイヤーを参照します。
• 既存の変数：適切な場合は、複製を作成する代わりに変数を再利用します。
• シーンの構造：レイヤーの階層とグループを理解します。
• 前のインタラクション：同じセッション内の以前のリクエストを記憶します。

AI結果の処理

生成されたインタラクションのレビュー：

• AIが作成した要素がメンションされると、キャンバスに色付きの縁で強調表示されます。
• Propertiesパネルにすべてのインタラクションの詳細が表示されます。
• チャットのAIの説明セクションを展開/折りたたむことができます。
  

編集と修正：

• AIで生成されたすべてのインタラクションは、Studioのインタフェースから自由に編集可能です。
• Propertiesパネル、Interactionパネル、またはキャンバスで直接変更できます。
• AIは手動による編集を認識し、以降のリクエストではそれらを考慮します。
  

停止と復元

停止：実行中に[Stop]をクリックしてキャンセルします。変更が自動的に元に戻ります。

復元：完了後、[Revert]をクリックしてAIの最新の変更を取り消します。Revertは、キャンバスが手動で編集されるまで使用できます。

停止した場合の挙動：

• タスクの完了後に停止した場合：編集は維持され、タスクブロックが凍結されます。
• タスク中に停止した場合：編集が取り消され、プロンプトの入力に戻ります。
  

制限事項

ベータ期間中のAIインタラクションの作成：

• VLMなし：AIはキャンバスのビジュアルデザインを「見る」ことはできません。レイヤー構造とプロパティデータのみ読み取ります。
• 既存のレイヤーのインタラクションを作成します (新しいデザインやレイアウトは生成しません) 。
• 非常に複雑な条件付きロジックでは修正が必要になることがあります。
• コンポーネント内でインタラクションを作成したり変更したりすることはできません。
• セクション間のチャット履歴は保存されません。