Fable Studio
從一句話變成一部完整的作品：一個單一的 HTML 檔案，立即執行、外觀精美、有聲音，且適合直立螢幕錄影。
此技能為您處理容易出錯的部分。assets/starter.html 包含一個經過測試的基礎框架（具備發光效果、相機、音訊、啟動畫面、錄製模式、影片及時間旅行控制）。您只需編寫場景，也就是內容。如此一來，您便能完全專注於設計與故事。
流程
1. 選擇模式
| 模式 | 時機 | 說明 | 模板 | 範例 |
|---|---|---|---|---|
| 世界 | 一個地點、一個物體、一種氛圍，供人環顧四周。例如：「建造……」、「場景」、「世界」、「街道」、「景觀」 | modes/welt.md | assets/szene-welt.js | beispiele/welt-tokio.js |
| 影片 | 一個有開頭與結尾的故事。例如：「短片」、「關於……的動畫」、「講述」、「自畫像」 | modes/film.md | assets/szene-film.js | beispiele/film-punkt.js |
| 時間旅行 | 隨時間發展的演變。例如：「……的歷史」、「演化」、「從 X 到現在」、「未來 30 年」 | modes/zeitreise.md | assets/szene-zeitreise.js | beispiele/zeitreise-menschheit.js |
如果不確定，請選擇世界。不要詢問。此技能的價值在於一句話就已足夠。
2. 閱讀
請依序閱讀以下內容，且僅閱讀這些：
references/engine.md（基礎框架的所有建構元件及函式庫的陷阱）- 所選模式的說明
- 所選模式的範例。它展示了密度與細心程度的標準。學習其工作方式，而非主題。
如有需要：references/visuals.md（光線、霧氣、霓虹燈、水、粒子等配方）、references/audio.md（音樂與音效）、references/styles.md（現成視覺風格）、references/performance.md（在手機上保持流暢）。
3. 將一句話擴展為草稿
使用者寫一句話。品質來自於您在撰寫程式碼之前，自行將其發展成完整的草稿。在心中確定：
- 核心畫面： 哪一個畫面會讓人印象深刻？所有其他元素都為此服務。
- 氛圍與色調： 兩到三種主色，加上一種深色基底。顏色越少，質感越高。
- 光線： 光從何處來？哪些部分自發光？
- 景深： 前景、中景、背景。使用霧氣與大小層次。
- 動態： 至少三個獨立移動的層次（例如雨水、車流、招牌）。
- 相機： 有目的的運鏡，而非隨意環繞。
- 音效： 符合氛圍的背景音效與音樂。
- 互動或戲劇性： 在世界模式中點擊會發生什麼？影片的情節弧線如何？時間旅行有哪些站點？
此草稿無需事先展示。您將直接建構它。
4. 建構
根據所選模式的模板，僅將場景寫入 szene.js 檔案。然後執行：
python3 scripts/bauen.py szene.js <name>.html
此腳本會將場景嵌入基礎框架，檢查語法，並針對不存在於框架中的內容發出警告。請勿修改基礎框架本身。如果缺少某些功能，請在場景中自行實作。
若無法執行指令：請完整且不變地輸出 assets/starter.html，並僅將佔位符 /*__SCENE__*/ 替換為您的場景。
固定規則（因為結果必須在任何地方執行，包括 Claude 應用程式的 Artifact）：
- 單一檔案。無外部圖片、字型、模型或音效。所有內容皆由程式碼產生。
- 唯一的函式庫是 three.js r128，它已在基礎框架中載入。不提供 OrbitControls、EffectComposer 或 Loader 等附加模組。相機與發光效果由基礎框架提供。
- 不使用
localStorage、import或第二個<script>。 - 螢幕上的文字使用使用者的語言。
5. 品質標準
在交付之前，請逐一檢查此清單。每一項都有其原因：缺少它，結果就會像技術展示而非完整的作品。
- 立即呈現畫面： 啟動畫面之後，場景立即可見。沒有任何黑色或空白。
- 景深： 已設定霧氣，存在近處與遠處的物體。
- 適度發光： 少數區域強烈發光（亮度 2 到 4），其餘保持暗淡。如果全部發光，等於沒有發光。
- 三個動態層次 加上相機移動。
- 密度： 場景由數百個部件組成（透過
FS.inst），不是只有五個方塊的空蕩空間。 - 音效： 背景音效與音樂在按下啟動按鈕時開始，音量足夠低以保持舒適。
- 直立格式： 核心畫面位於畫面中央，且在 9:16 比例下也能正常顯示。
- 標題、副標題與操作提示 已透過
FS.setup設定。 - 事實正確性（僅限時間旅行與教育影片）：每個數字與日期都正確。預測需標註為預測。
6. 測試
若可執行指令，請確實測試：
node scripts/pruefen.js <name>.html
這會在無頭瀏覽器中以橫向與直立格式開啟頁面，回報錯誤，並儲存兩張截圖。檢視截圖並修正，直到無錯誤且畫面符合品質標準。若無瀏覽器可用，請逐行對照 references/engine.md 中的「陷阱」章節檢查您的場景。最常見的錯誤是變數名稱拼寫錯誤，以及使用了 three.js r128 中不存在的函式。
7. 交付
- 在 Claude 應用程式中：作為 HTML Artifact 交付，使其可立即執行並分享。
- 在 Claude Code 中：作為專案資料夾中的檔案交付，並附上在瀏覽器中開啟的指示。
回覆應簡短：一句話描述產出的內容、操作方式（拖曳、滾動、點擊、按 R 鍵或點擊「9:16」按鈕進入錄製模式），以及三個變體建議，每個建議一句話，使用者可直接回傳。
如果頁面後來顯示紅色錯誤訊息，使用者會將它傳送給您。請在場景中修正原因並重新建構。
錄製模式
「9:16」按鈕或 R 鍵會切換至無控制項的直立格式。世界模式會自動運轉，影片與時間旅行則從頭開始播放。這樣就能透過螢幕錄影，直接產生適合 Reels、TikTok 或 Shorts 的影片。請在回覆中提及此功能，因為對許多人來說這才是真正的用途。