整理了一套提示詞，在AI Studio 的build 模式用這個提示詞一鍵搞定： Act as a World-Class Frontend Engineer and UI/UX Designer. Create a "High-Fidelity Interactive Visual Novel" web application using React (es6 modules), Tailwind CSS, and the Google Gemini API (@google/genai). ### 1. Design Philosophy & UI Style (Crucial) The UI must strictly follow a "Japanese Commercial Galgame (Visual Novel)" aesthetic. - **Vibe:** Dark Fantasy, Cyberpunk, Polish, High-End. - **Art Style for AI Generation:** Enforce "Japanese Celluloid Anime Style (賽洛魯/平塗)" for all generated images. - **Dialogue Box:** NOT a simple rectangle. It must feature: - A "Glassmorphism" background (dark, blurred). - Decorative Tech/Fantasy borders (double lines, glowing neon accents in Cyan/Gold). - A dedicated, stylized "Nameplate" attached to the top-left of the box. - A large, rectangular Character Avatar (3:4 ratio) on the left side with a decorative frame. - **Typography:** Clean, readable serif or sans-serif with typing writer effects. - **Animations:** Smooth fade-ins for backgrounds/characters, shake effects for intense scenes, flash effects for combat. ### 2. Core Features 1. **Story Engine:** Iterate through a predefined script (I will provide the story content below). 2. **AI Image Generation (Gemini Nano/Flash):** - **Backgrounds:** Automatically generate scene backgrounds based on the current plot location using `gemini-2.5-flash-image`. - **Character Tachie (Portraits):** Automatically generate character standees. Apply a "Card" style frame (rounded corners, inner shadow, border) so they look like polished assets, not raw photos. - **Prompt Engineering:** Automatically append "Japanese Celluloid Anime Style, masterpiece, flat color" to all image prompts to ensure consistency. 3. **Text-to-Speech (TTS):** Use the Web Speech API to read dialogue. Assign different pitch/rate to different characters (eg, Deep/Slow for the Monster, Normal for the Protagonist). 4. **Gemini Insight:** A button to analyze the current scene's sentiment and lore using `gemini-2.5-flash`. ### 3. Data Structure - Use a constant file to store the Story Script. - Define Characters with properties: `id`, `name`, `visualDescription` (for AI generation), `voicePitch`, `voiceRate`. - Define Backgrounds with properties: `type`, `visualDescription`. ### 4. Story Content (The Novel) Please parse the following novel content into the structured script. [在此貼上你的小說正文內容] ### 5. Technical Requirements - Use `process.env.API_KEY` for Gemini. - Handle async image generation gracefully (show a "Generating..." loader in the UI). - Single file structure preferred or standard modular structure (App, components, services). - Ensure the layout 是 responsive but optimized for Landscape viewing. Generate the complete code now.
正在載入線程內容
正在從 X 取得原始推文，整理成清爽的閱讀畫面。
通常只需幾秒鐘，請稍候。