クリエイタービュー
レイアウト概要
クリエータービューは、コンポーネントエリアの任意のグループをダブルクリックして開く3パネルの編集環境です。左側にブロックリスト、中央にコードエディター、右側にライブプレビューがあり、下部にAIプロンプトボックスが配置されています。
ブロックリストパネル
左パネルには現在のグループのすべてのブロックが表示されます。各ブロックにはブロック名と番号付きファイルリストのカードプレビューが表示されます。上部のツールバーを使用して戻る、リスト表示と分割表示を切り替える、または+ボタンをクリックして新しいブロックを追加します。
コードエディター
中央パネルはタブ付きコードエディターで、ブロックコンテンツの記述と編集を行います。タブはファイルタイプ別に整理されています:
テキスト
ブロック用のドキュメント、Markdown、またはプレーンテキストコンテンツを記述します。
HTML
コンポーネントのHTML構造を編集します。
CSS
コンポーネントにスタイルを追加します。
JavaScript
コンポーネントにインタラクティブ性とロジックを追加します。
ライブプレビュー
右パネルにはコンポーネントのライブプレビューがレンダリングされます。エディターでHTML、CSS、JavaScriptを追加すると、プレビューがコンパイル結果を表示するように更新されます。ファイルをドラッグ&ドロップしたり、コンテンツを直接プレビューエリアに貼り付け(Ctrl+V)してブロックに追加することもできます。目のアイコンを使用してプレビューを切り替え、BGトグルでプレビューの背景を変更します。
AIプロンプトボックス
下部のバーはAIプロンプトボックスです。変更を記述してAIにブロックのコンテンツを生成または修正させるために使用します。モデルセレクター、テキスト入力フィールド、音声および絵文字入力、生成ボタンが含まれています。2つのモードトグル — AとV — でダイレクトAIモードとバリエーションモードを切り替えます。
AI生成カテゴリ
AIモデルセレクターは、AIが生成するコンテンツの種類を決定する生成カテゴリを表示します:
テキスト生成
コード、ドキュメント、マークアップなどのテキストベースのコンテンツを生成または編集します。
画像生成
テキストプロンプトから画像を作成するか、AIで既存の画像を編集します(テキストから画像、画像から画像)。
動画生成
テキストの説明から動画を生成するか、静止画像を動画にアニメーション化します(テキストから動画、画像から動画)。
AI直接モード(A)
Aトグルがアクティブな場合、AIはコンポーネントを直接その場で修正します。フィールドテキストには「コンポーネントに適用する変更を記述してください」と表示され、どのファイルが修正されるかを示すバッジが表示されます(例:「修正対象: text」)。このモードは、現在選択されているファイルへの素早い特定の編集に最適です。
バリエーションモード(V)
Vトグルがアクティブな場合、AIはコンポーネントをその場で編集する代わりに、複数のバリエーションを生成します。フィールドテキストが「生成したいバリエーションを記述してください」に変わり、作成するバリエーション数を選択できる− / +コントロール付きのカウンターが表示されます。生成されたバリエーションは専用パネルに表示され、レビューして好みのバージョンをグループに追加できます。
