AIパネルのインタフェース
パネルの状態
AIパネルには、動作中のさまざまな状態が表示されます。
アイドル状態 (Idle State)：入力が可能な状態です。チャット履歴がない場合は、始めに役立つ4つのお勧めのプロンプトが表示されます。お勧めのプロンプトをクリックすると、入力フィールドに入力されます。入力されたプロンプトは自動的には送信されません。
処理状態 (Processing State)：AIがリクエストを分析しています。「Fetching...」、「Analyzing...」などのステータスインジケータが表示されます。
編集状態 (Editing State)：AIがプロトタイプを変更しています。「ProtoPie AI is taking control」と書かれたバナーと、キャンセル時に使用する[Stop]ボタンが、キャンバスの一番下に表示されます。
チャットの動作
- 送信されたプロンプトはチャット領域の一番上に表示されます。
- セッションでのチャット履歴は保存されません。タブを閉じたり、リセットしたりすると、履歴が消去されます。
- 新しく始めるには、パネルのヘッダーにあるリセットボタンをクリックします。
@メンションの使用
@を入力すると、プロンプトの特定のレイヤーをメンションできます。これにより、AIの理解が深まり、名前だけでレイヤーを記述した場合と比較して、より正確なインタラクションが生成されます。
例：「タップされたら@ButtonLayerを灰色にする」
レスポンスのコントロール
AIが応答した後の選択肢は複数あります。
👍 / 👎 によるフィードバック：レスポンスの品質を評価して、AIの向上に役立てることができます。レスポンスのコピー：レスポンスの内容全体 (コードブロックを含む) をクリップボードにコピーします。リライト：同じプロンプトの異なるレスポンスを生成し直します。
- 最新のレスポンスにのみ使用できます。
- 新しいプロンプトを送信したり、手動で編集を行った場合は、表示が消えます。
AIのレスポンスのタイプ
Studio AIは、リクエストによって異なる形式でレスポンスを返します。
テキストレスポンス
書式設定に対応した、ヘッダー、本文、リンク、インラインコード、ブロッククォート、テーブルを含むプレーンテキスト。説明、ドキュメントQ&A、一般的なレスポンスに使用されます。
Mermaid図
AIは、フローチャート、ユーザーフローなどの図の描画を指示された場合、Mermaid.jsシンタックスを使用してビジュアルダイアグラムを生成できます。フローチャートは、ワークスペースの既存のオブジェクトやインタラクションをベースに作成されます。図は、以下のオプションを含むインタラクティブな画像として作成されます。
- コードのコピー：Mermaid.jsソースコードをコピーします。
- 画像としてダウンロード：作成された図を.svg形式で保存します。
数式ブロック
ProtoPieの数式専用のコードブロックで、以下が表示されます。
- シンタックスの強調表示
- Copyボタン
- ProtoPieの数式ドキュメントへのHow to useリンク
コードブロック
言語ラベル、構文の強調表示、Copyボタンを含む一般的なコード例 (JSON、JavaScriptなど)。
リソースカード
AIがドキュメントを参照する場合、インタラクティブなリソースカードを表示します。
公式記事：ProtoPieアイコン、記事タイトル、パンくずパス、「Official Article」ラベル
YouTube動画：動画のサムネイル、「Youtube Video」ラベル
外部リンク：地球アイコンとURL
複数のリソースがページ番号と一緒にカルーセル表示されます。
プランブロック
AIは、インタラクション作成のプランニングプロセスを表示します。
プランニング中：「Planning...」と展開可能なコンテンツを表示します。コンテンツを展開すると、全分析が表示されます。
完了時：表示が折りたたまれ、「Planned」とチェックマークが表示されます。コンテンツには以下が含まれます。
- ゴール：AIが作成を目指す内容
- 構造：使用する要素
- 作成順序：ステップごとの実行計画
- インタラクション：トリガー → レスポンスのマッピング
タスクブロック
インタラクション作成の実行の進捗状況を表示します。
進行中：「Working...」と回転するアイコン
終了：「X tasks done」とチェックマーク
各タスクには、アクションのタイプ (追加、編集、削除など) と影響を受ける要素が表示されます。チェックマークは完了したタスク、スピナーは進行中のタスクを示します。