Fable Studio は何をしますか？
1つの文から完成品へ: 即座に動作し、美しく、音が鳴り、縦型の画面録画に適した単一のHTMLファイルを生成します。
このスキルはエラーが発生しやすい部分を肩代わりします。assets/starter.html には検証済みの基本骨格（輝き効果、カメラ、音声、スタート画面、録画モード、映画・タイムトラベル制御）が含まれています。あなたはシーン、すなわちコンテンツだけを書けばよいのです。その結果、あなたの全注意をデザインとストーリーに注げます。
手順
1. モードを選ぶ
| モード | 使用場面 | 説明 | テンプレート | 例 |
|---|---|---|---|---|
| 世界 | 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 |
不明な場合は 世界 を選んでください。質問はしないでください。このスキルの価値は1つの文で済むことにあるのです。
2. 読む
以下の順序で、これだけを読んでください:
references/engine.md（基本骨格のすべての構成要素とライブラリの落とし穴）- 選択したモードの説明
- 選択したモードの例。密度と丁寧さの基準を示しています。作業の進め方を学び、モチーフは真似しないでください。
必要に応じて: references/visuals.md（光、霧、ネオン、水、パーティクルのレシピ）、references/audio.md（音楽と効果音）、references/styles.md（既製のルック）、references/performance.md（スマートフォンでの滑らかな動作）
3. 文を設計案に練る
人間が1つの文を書きます。品質は、コードを書く前にあなた自身がそれを完全な設計案に練り上げることで生まれます。頭の中で決めてください:
- 核となるイメージ: どの1つのイメージが印象に残るべきか？ 他のすべてはそれに従う。
- 雰囲気とパレット: 2～3の主色と1つの暗いベースカラー。色数が少ないほど高級に見える。
- 光: 光はどこから来るか？ 何が自ら光るか？
- 奥行き: 前景、中間、背景。霧とサイズの段階。
- 動き: 独立して動く少なくとも3つのレイヤー（例: 雨、交通、標識）。
- カメラ: 意図を持った動き、無作為な旋回ではない。
- 音: 雰囲気に合う環境音と音楽。
- インタラクションまたはドラマツルギー: タップで何が起こるか（世界）、どのように展開するか（映画）、どのようなステーションか（タイムトラベル）？
この設計案は事前に表示しません。あなたはそれを作り上げます。
4. 作る
選択したモードのテンプレートに基づいて、シーンのみを szene.js ファイルに書きます。その後:
python3 scripts/bauen.py szene.js <name>.html
このスクリプトはシーンを基本骨格に組み込み、構文をチェックし、ここにないものについて警告します。基本骨格自体は決して変更しないでください。何か足りない場合は、シーン内で実現してください。
コマンドを実行できない場合: assets/starter.html を完全かつ変更せずに出力し、プレースホルダ /*__SCENE__*/ をあなたのシーンで置き換えてください。
結果がどこでも（Claude Appのアーティファクトでも）動作しなければならないため、不変ルール:
- 1つのファイル。外部からの画像、フォント、モデル、サウンドは不可。すべてコードで生成。
- 唯一のライブラリはthree.js r128で、基本骨格に既に読み込まれている。OrbitControls、EffectComposer、Loaderなどの追加モジュールは存在しない。カメラと輝き効果は基本骨格が提供。
localStorage、import、2つ目の<script>は不可。- 画面上のテキストは人間の言語で。
5. 品質基準
提出前にこのリストを確認してください。各項目には理由があります: 守らなければ、結果はテクノロジーデモのように見え、完成作品にはなりません。
- すぐに画像が見える: スタート画面の背後ですでにシーンが見えている。黒や空白はない。
- 奥行き: 霧が設定され、近くのものと遠くのものがある。
- 控えめな発光: ごく一部の面だけが強く光る（明るさ2〜4）、残りは暗いまま。すべてが光ると何も光らない。
- 3つの動くレイヤー + カメラの動き。
- 密度: シーンは何百ものパーツで構成される（
FS.instを使用）、5つの立方体がある空っぽの空間ではない。 - 音: 効果音と音楽がスタートボタンとともに始まり、心地よい音量である。
- 縦型: 核となる画像が画面中央にあり、9:16でも機能する。
- タイトル、サブタイトル、操作説明 が
FS.setupで設定されている。 - 事実（タイムトラベルとドキュメンタリーのみ）: すべての数字と日付が正確。予測は予測として明示。
6. テスト
コマンドを実行できるなら、実際にテストしてください:
node scripts/pruefen.js <name>.html
これによりページが非表示ブラウザで横型・縦型で起動し、エラーを報告し、2枚の画像を保存します。画像を確認し、エラーがなく画像が品質基準を満たすまで修正してください。ブラウザが利用できない場合は、references/engine.md の「落とし穴」セクションと照らし合わせてあなたのシーンを1行ずつ読み直してください。最も一般的なエラーは変数名のタイプミスと、three.js r128に存在しない関数の使用です。
7. 提出
- Claude Appの場合: HTMLアーティファクトとして。即座に実行・共有可能。
- Claude Codeの場合: プロジェクトフォルダにファイルとして保存し、ブラウザで開くように指示。
返答は簡潔に: 何ができたかの1文、操作方法（ドラッグ、スクロール、タップ、Rキーまたは「9:16」ボタンで録画モード）、そして3つのバリエーション案（それぞれ1文で、人間がそのまま送り返せるもの）。
後でページに赤いエラーメッセージが表示された場合、人間があなたに送ります。シーン内で原因を修正し、再ビルドしてください。
録画モード
「9:16」ボタンまたはRキーで、操作要素なしの縦型モードに切り替わります。世界は自動で動き、映画とタイムトラベルは最初から始まります。これにより、画面録画でReels、TikTok、Shorts用の動画を直接作成できます。これを回答で言及してください。多くのユーザーにとってこれが本来の目的です。