Kaiju Hub AI

クリエイタービュー

レイアウト概要

クリエータービューは、コンポーネントエリアの任意のグループをダブルクリックして開く3パネルの編集環境です。左側にブロックリスト、中央にコードエディター、右側にライブプレビューがあり、下部にAIプロンプトボックスが配置されています。

Creator View three-panel layout showing block list on the left, Text tab code editor in the center, and Start Creating live preview on the right with AI Prompt Box at the bottom

ブロックリストパネル

左パネルには現在のグループのすべてのブロックが表示されます。各ブロックにはブロック名と番号付きファイルリストのカードプレビューが表示されます。上部のツールバーを使用して戻る、リスト表示と分割表示を切り替える、または+ボタンをクリックして新しいブロックを追加します。

コードエディター

中央パネルはタブ付きコードエディターで、ブロックコンテンツの記述と編集を行います。タブはファイルタイプ別に整理されています:

テキスト

ブロック用のドキュメント、Markdown、またはプレーンテキストコンテンツを記述します。

HTML

コンポーネントのHTML構造を編集します。

CSS

コンポーネントにスタイルを追加します。

JavaScript

コンポーネントにインタラクティブ性とロジックを追加します。

Creator View HTML tab showing editable HTML code with div and h1 elements in the center code editor panel

ライブプレビュー

右パネルにはコンポーネントのライブプレビューがレンダリングされます。エディターでHTML、CSS、JavaScriptを追加すると、プレビューがコンパイル結果を表示するように更新されます。ファイルをドラッグ&ドロップしたり、コンテンツを直接プレビューエリアに貼り付け(Ctrl+V)してブロックに追加することもできます。目のアイコンを使用してプレビューを切り替え、BGトグルでプレビューの背景を変更します。

Creator View with markdown source in the center editor and rendered Markdown Preview on the right showing Project Name, Table of Contents, and Installation sections

AIプロンプトボックス

下部のバーはAIプロンプトボックスです。変更を記述してAIにブロックのコンテンツを生成または修正させるために使用します。モデルセレクター、テキスト入力フィールド、音声および絵文字入力、生成ボタンが含まれています。2つのモードトグル — AとV — でダイレクトAIモードとバリエーションモードを切り替えます。

AI Prompt Box in Direct AI Mode showing text input, microphone and emoji icons, orange A toggle active, V toggle, and Generate button

AI生成カテゴリ

AIモデルセレクターは、AIが生成するコンテンツの種類を決定する生成カテゴリを表示します:

テキスト生成

コード、ドキュメント、マークアップなどのテキストベースのコンテンツを生成または編集します。

画像生成

テキストプロンプトから画像を作成するか、AIで既存の画像を編集します(テキストから画像、画像から画像)。

動画生成

テキストの説明から動画を生成するか、静止画像を動画にアニメーション化します(テキストから動画、画像から動画)。

AI Gen Categories dropdown showing Text Gen, Image Gen, and Video Gen options with Select AI model button

AI直接モード(A)

Aトグルがアクティブな場合、AIはコンポーネントを直接その場で修正します。フィールドテキストには「コンポーネントに適用する変更を記述してください」と表示され、どのファイルが修正されるかを示すバッジが表示されます(例:「修正対象: text」)。このモードは、現在選択されているファイルへの素早い特定の編集に最適です。

Direct AI Mode panel showing lightning bolt icon, Direct AI Mode title, Make direct modifications to your component with AI description, and Will modify text badge

バリエーションモード(V)

Vトグルがアクティブな場合、AIはコンポーネントをその場で編集する代わりに、複数のバリエーションを生成します。フィールドテキストが「生成したいバリエーションを記述してください」に変わり、作成するバリエーション数を選択できる− / +コントロール付きのカウンターが表示されます。生成されたバリエーションは専用パネルに表示され、レビューして好みのバージョンをグループに追加できます。

Variations panel showing No variations yet message with palette icon, prompt input for describing variations, minus and plus counter controls, purple V toggle active, and Generate button

Kaiju Hub AIに表示されるサードパーティのロゴ、商標、ブランド名はそれぞれの所有者に帰属します。識別目的のみに使用され、推奨、後援、提携を意味するものではありません。