歸藏(guizang.ai)（@op7418）のスレッド

AI Studio のビルド モードで 1 回のクリックでタスクを完了するために使用できる一連のプロンプトをまとめました。 世界クラスのフロントエンドエンジニアおよび UI/UX デザイナーとして活動します。 React (es6 モジュール)、Tailwind CSS、Google Gemini API (@google/genai) を使用して、「高忠実度インタラクティブ ビジュアル ノベル」Web アプリケーションを作成します。 ### 1. デザイン哲学とUIスタイル（重要） UI は「日本の商業ギャルゲー（ビジュアルノベル）」の美学に厳密に従う必要があります。 - **雰囲気:** ダークファンタジー、サイバーパンク、ポーランド風、ハイエンド。 - **AI 生成のアート スタイル:** 生成されるすべての画像に「日本のセルロイド アニメ スタイル (セルロイド/平图)」を適用します。 - **ダイアログボックス:** 単純な長方形ではありません。以下の機能を備えている必要があります。 - 「Glassmorphism」の背景（暗く、ぼやけている）。 - 装飾的なテクノロジー/ファンタジー ボーダー (二重線、シアン/ゴールドの輝くネオン アクセント)。 - ボックスの左上に、専用の様式化された「ネームプレート」が取り付けられています。 - 左側に装飾フレームが付いた大きな長方形のキャラクターアバター（3:4 比率）。 - **タイポグラフィ:** タイピングライター効果を備えた、クリーンで読みやすいセリフ体またはサンセリフ体。 - **アニメーション:** 背景/キャラクターのスムーズなフェードイン、激しいシーンのシェイク効果、戦闘のフラッシュ効果。 ### 2. コア機能 1. **ストーリー エンジン:** 定義済みのスクリプトを反復処理します (ストーリー コンテンツは以下に提供します)。 2. **AI画像生成（Gemini Nano/Flash）:** - **背景:** `gemini-2.5-flash-image` を使用して、現在のプロット位置に基づいてシーンの背景を自動的に生成します。 - **キャラクター立ち絵（ポートレート）:** キャラクター立ち絵を自動生成します。「カード」スタイルのフレーム（角丸、内側の影、枠線）を適用することで、生写真ではなく、洗練されたアセットのように見えます。 - **プロンプトエンジニアリング:** 一貫性を保つために、すべての画像プロンプトに「日本のセルロイドアニメスタイル、傑作、フラットカラー」を自動的に追加します。 3. **テキスト読み上げ (TTS):** Web Speech API を使用して会話を読み上げます。キャラクターごとに異なるピッチ/速度を割り当てます（例：モンスターには深い/遅い、主人公には普通）。 4. **Gemini Insight:** `gemini-2.5-flash` を使用して現在のシーンの感情と伝承を分析するボタン。 ### 3. データ構造 - ストーリー スクリプトを保存するには定数ファイルを使用します。 - プロパティ `id`、`name`、`visualDescription` (AI 生成用)、`voicePitch`、`voiceRate` を使用してキャラクターを定義します。 - プロパティ `type`、`visualDescription` を使用して背景を定義します。 ### 4. ストーリー内容（小説） 次の小説の内容を構造化されたスクリプトに解析してください。 [ここに小説の本文を貼り付けてください] ### 5. 技術要件 - Gemini には `process.env.API_KEY` を使用します。 - 非同期画像生成を適切に処理します (UI に「生成中...」ローダーを表示します)。 - 単一ファイル構造が推奨、または標準モジュール構造 (アプリ、コンポーネント、サービス)。 - レイアウトがレスポンシブでありながら、横向き表示に最適化されていることを確認します。 今すぐ完全なコードを生成します。