Carouso

Carouso は何をしますか？

目的

2つのフェーズでカルーセル投稿を生成します。フェーズ1では、ユーザーと共にデザインシステムを確定します：ブランドトークンとレイアウトパターンのライブラリです。フェーズ2では、そのパターンから各カルーセルを構成します：スライドごとにパターンを選択し、コピーを作成し、画像を配置し、品質ゲートを通してレンダリングします。

トークンを固定し、構成を自由に。それが、すべてのカルーセルをテンプレート風に見せずにブランドに一貫させる秘訣です。

テンプレートの使用（デフォルトパス）

templates/ には6つの既製テンプレートが同梱されています。それぞれが固定されたルック（色、フォント、ライト/ダークトークン）とスライドの骨格を持ち、オンボーディングは不要です。プレビューギャラリーは README.md にあります。

トリガー： "template 3"、"template no 3"、"pakai template 3"、"use template 2 for ..."、またはテンプレート名（"morning cup"）。番号または名前を templates/NN-slug/template.json と照合します。

テンプレートごとのファイル： tokens.css（スキン）、template.json（名前、フォント、サイズ、パターンとモードを持つスライドシーケンス）、sample.html（コピー元となる完成サンプルカルーセル）。

1. テンプレートを特定します。 templates/NN-slug/template.json を読み取ります。ユーザーが番号を指定せず、カスタムシステムも存在しない場合、すべてのテンプレート（番号、名前、雰囲気）を template.json ファイルからリストアップし、どれを使用するか尋ねます。不明な番号の場合も同様にリストを表示します。
2. ブリーフを収集します。 不足している情報を一度のメッセージで尋ねます：トピックとアングル（必須）、ブランド名とハンドル（ユーザーが拒否した場合はテンプレートのプレースホルダーを使用）、スライド数（デフォルトはシーケンスの長さ、5～10まで許可）、配置マップ付きの画像（オプション、手順6参照）。カルーセルの言語はブリーフの言語に従います。マークアップ内の固定文字列も翻訳します： "Myth"、"Fact"、"Save this"、および NN / TT フッターは残りますが、単語は変わります。
3. シーケンスから計画を立てます。 テンプレートの sequence から始めます。最初のカバー、最後のテイクアウェイ、および各スライドのモードはそのまま維持します。異なるスライド数の場合は、シーケンス順に中央のスライドを削除または繰り返し、モードが交互になり、隣接する2つのスライドが同じパターンにならないようにします。コンテンツが別のパターンに適している場合は、中央のパターンを入れ替えます（数字は stat-band や big-number、ステップは process-steps、1行は quote）、そのスライドのモードは維持します。cover-split は、確認済みのカバー画像が提供された場合のみ使用します。配置された画像は、スライド上で .photo スロットとして、または写真が主役の image-hero スライド上に配置されます。計画をリスト（スライド番号、パターン、モード、1行のコンテンツ）として作成してから構築を開始します。
4. 以下のコピー基準に従ってコピーを作成します。 サンプルの行をすべて置き換えます。サンプルトピックの内容は一切残してはいけません。
5. HTMLを構築します。 選択したテンプレートの sample.html をコピーして carousels/<slug>/index.html を作成します。tokens.css のリンクのみ ../../templates/NN-slug/tokens.css に変更します。fonts.css と system.css のリンクはその深さから解決されます。計画に従って <section> ブロックを保持または削除し、追加されたスライド用のパターンブロックを design-system/patterns.html からコピーし、計画に従って mode-dark クラスを適用し、ブランド、ハンドル、NN / TT カウンターを入力します。
6. 画像 は、フェーズ2のステップ4でハードゲートを通過します。carousels/<slug>/images/ にローカルコピーを配置し、carousels/<slug>/provenance.log に出典を記録します。
7. テンプレートのサイズとフォントを使用してレンダリングします。 template.json から：

python3 scripts/render_carousel.py --html carousels/<slug>/index.html --out carousels/<slug>/ \
    --width 1080 --height 1440 --slides <N> --check-fonts "<template.jsonからのフォント、カンマ区切り>"

すべてのゲートを通過するまでHTMLを修正します。決してゲートを免除してはいけません。 8. 最終的な視覚チェック をフェーズ2のステップ7と同様に行い、その後 slide_01.jpg から slide_NN.jpg を納品します。テンプレートには last-used.json は不要です。モードはテンプレートから取得されるためです。

フォントは fonts/ にバンドルされているため、Playwright以外のインストールは不要です。

6つのテンプレートではなく独自のルックを希望するユーザーは、以下のカスタムパスを使用します。

カスタムデザインシステム（オプションパス）

このパスは、ユーザーがテンプレートを選択する代わりに、独自のルック、または参考のスクリーンショットやHTMLを送ってきた場合にのみ使用します。テンプレートが選択されておらず、ロックされたデザインシステムも存在しない場合は、まずテンプレートを提案し、ユーザーがカスタムを希望する場合にのみ以下のオンボーディングを実行します。このパスを実行する場合、デザインを開始しないでください。最初にオンボーディングダイアログを開きます。以下の順序で、各質問に対してリストされた選択肢を示しながら、一度に1つの質問をします。どの時点でもカスタム回答を受け付けます。7つの質問の後、デザインに移ります。ユーザーが回答する代わりにスクリーンショットやHTMLリファレンスを送ってきた場合は、ダイアログをスキップしてフェーズ1のオプションBに進みます。

1. スタイル。 「カルーセルにどんな雰囲気を持たせますか？」選択肢：遊び心とフレンドリー / クリーンでミニマル / 大胆で印象的 / 温かみとエレガント / ダークでプレミアム。
2. 色。 「カラームードを選んでください。」選択肢：暖色アース（ブラウン、クリーム、オレンジ） / フレッシュナチュラル（グリーン、クリーム） / オーシャンカーム（ブルー、ホワイト） / 大胆コントラスト（ブラック、ホワイト、1つの強いアクセント） / ソフトパステル。
3. フォント。 「タイプフィールを選んでください。フォント名を指定する必要はありません。」選択肢：丸みと遊び心 / エレガントセリフ / 大胆でモダン / クリーンでシンプル。内部でマッピングし、フォント名は表示しないでください：rounded-playful は Baloo 2 + Quicksand; elegant-serif は Playfair Display + Plus Jakarta Sans; bold-modern は Albert Sans + Plus Jakarta Sans; clean-simple は Plus Jakarta Sans + Quicksand。5つのファミリーはすべて fonts/ にバンドルされています：カルーセルHTMLから fonts/fonts.css をリンクしてください。
4. ブランド。 「透かし用のブランド名とハンドルは？」自由記述、1メッセージ。例： "Morning Cup / @morningcup"。
5. トピック。 「カルーセルは通常何についてですか？」自由記述、1行。これがコピーのトーンとサンプルコンテンツを設定します。
6. 言語。 「インドネシア語または英語？」2つの選択肢。これがすべての固定文字列（キッカー、CTA、フッター）を設定します。
7. システム名。 「このデザインシステムを何と呼びますか？」自由記述、1メッセージ。ブランドとスタイルからデフォルトを提案します（例： "morningcup-playful"）。ユーザーが複数のシステムを保持し、カルーセルごとに選択する可能性があるため、名前は重要です。

7番目の回答の後、ロックされた選択肢を1つの短いメッセージで要約し、その後フェーズ1に移ります。

フェーズ1：デザインシステムのロック

2つの開始方法があります。いずれかを選択します。

A. オンボーディングの回答から生成します。 :root トークンをブランド（色、フォント、半径）に設定して design-system/system.css に記述します。そのトークンを使用して3つのサンプルパターン（カバー1つ、ボディ1つ、クローザー1つ）をレンダリングし、ユーザーに表示します。承認されるまで繰り返します。

B. リファレンスから適応します。 ユーザーが気に入ったカルーセルのスクリーンショットまたはHTMLファイルを送信します。それを調査します：色の役割、タイプスケール、スペーシングリズム、繰り返し要素。学習した内容を :root トークンとしてエンコードし、サンプルパターンをレンダリングします。承認されるまで繰り返します。

承認ゲート。 ユーザーがレンダリングされたサンプルを承認した後にのみ、システムは本番運用に入ります。システム名の下に保存します（例： design-systems/morningcup-playful/、内容は system.css、patterns.html、last-used.json）。後で別のシステムを構築するには、質問1からオンボーディングダイアログを再度実行します。

フェーズ2：カルーセルの構成

1. ブリーフの収集

開始する前に明確にします。不足しているものがあれば尋ねます。推測してはいけません。

• トピックとアングル（1つのフック文として）。
• デザインシステム：使用するロックされたシステム。デフォルトは最後に承認されたもの。複数存在する場合は尋ねます。（テンプレートパスの場合、テンプレートがデザインシステムです。）
• スライド数（デフォルト6～10）とサイズ（デフォルト1080x1440、これは system.css がレンダリングするサイズです。異なる高さには、それに一致する .slide の高さオーバーライドが必要です）。
• 画像。画像ごとに：ソース（アップロードされたファイルパス、直接URL、または記事URL）、ターゲットスライド、および役割（ヒーロー、スプリット、またはインライン）。明示的な配置マップがない場合は、画像を使用しません。

2. 構成の計画

システムの last-used.json と design-system/PATTERNS.md のパターンカタログを読みます。スライドごとに1つのパターンを割り当てます：

• 1つのカバーパターンで開始し、1つのクロージャーパターンで終了します。
• 隣接する2つのスライドが同じパターンを共有してはいけません。
• 同じブランドで前のカルーセルのカバーパターンを決して繰り返してはいけません。
• パターンをコンテンツに一致させます：数字は stat-band または big-number、シーケンスは process-steps、1行は quote。コンテンツを無理にパターンに押し込んではいけません。
• 2つのモードをスライド間で交互にします：スライドに mode-dark を割り当てるか、ライトのままにして、隣接する2つのスライドが同じモードにならないようにします。前のカルーセルの最初のスライドの反対のモードで開始します（last-used.json を読みます）。1つのカルーセルはライトで開始し、次のカルーセルはダークで開始する場合があります。どのスライドをダークにするかはコンテンツに従います：コントラストペア（神話と事実、問題と解決策）は自然なダークスライドです。 計画をシンプルなリスト（スライド番号、パターン名、モード、1行のコンテンツ）として作成してから、何かを作成します。

3. コピーの作成

スライドごとに1つのアイデア。見出しは8語以内。本文はスライドごとに25語以内。以下のコピー基準に従います。

4. 画像の取り込みと検証（ハードゲート）

1. すべての画像をローカルの images/ フォルダにダウンロードまたはコピーします。レンダリング中にホットリンクしてはいけません。
2. 使用前に各画像を確認します。コンテンツがスライドのトピックと一致しない場合、透かしや外部ロゴが含まれている場合、ぼやけている場合、または広い使用で最短辺が900px未満の場合は拒否します。
3. provenance.log に出典（ソースURLまたはアップロードファイル名）を記録します。
4. 生成AI画像を決して使用してはいけません。このスキルは例外なく画像を生成しません。

フォトスロット。 任意のボディパターンに画像を追加するには、そのスライドの .content の最後の子として <figure class="photo"><img src="images/<file>.jpg" alt="..."></figure> を配置します。コンテンツ幅に合わせて16:10でサイズ変更され、テンプレートの半径と色を採用します。myth-fact や big-number などの密集したスライドでは class="photo wide"（5:2）または class="photo band"（3:1）を使用し、style="--focus:50% 40%" で切り抜きポイントを設定し、スリム上のキャプションには <figcaption> を使用します。2枚の写真の場合は、2つの <figure class="photo">（正方形、並列、two-cards と同じガター）を保持する <div class="photos"> を使用するか、密集したスライドでは class="photos short"（4:3）を使用します。ヒーロースタイルのスライドの場合は、写真を上端から端まで配置します：<section> クラスに photo-top を追加し、それに style="--bleed-h:600px" を設定し、最初の子として <figure class="photo-bleed"><img ...></figure> を配置します。トップバーはスリム上で白くなり、コンテンツは写真の下から始まります。密集したスライド（myth-fact、big-number）では約 --bleed-h:440px を使用します。トップバーが写真の上に配置されるため、落ち着いた上端を持つ写真を選択します。スライドがオーバーフローゲートを通過し、コンテンツの上下に少なくとも40pxの空気を維持することを確認します。

5. HTMLの構築

ロックされた system.css（<style> コンテンツをコピーするかファイルをリンク）から開始し、patterns.html から選択した <section> ブロックをコピーします。コピーと画像スロットを入力します。画像はHTMLからの相対パスでローカルパスを参照します。カルーセルごとに新しいレイアウトを考案してはいけません。ブリーフにカバーされていない構造が必要な場合、それはフェーズ2の即興ではなく、フェーズ1の議論です。

6. 品質ゲートでのレンダリング

scripts/render_carousel.py を実行します：

python3 scripts/render_carousel.py --html <file.html> --out <dir-output> \
    --width 1080 --height 1440 --slides 6 \
    --check-fonts "Plus Jakarta Sans"

（幅、高さ、スライド数、フォントはブリーフとシステムトークンに合わせて調整します。） スクリプトは、.slide の数が要求と異なる場合、コンテンツがゾーンをオーバーフローした場合、スライドのバウンディングボックスが要求サイズと異なる場合、テキストが20pxより小さい場合、またはチェックされたフォントの読み込みに失敗した場合に、終了コード1で終了します。HTMLを修正し、ゲートを通過するまで再レンダリングします。決して手動でゲートを免除してはいけません。

7. 最終的な視覚チェックと記録

スライド1、中央のスライド1つ、最後のスライドを開きます。ディスプレイフォントがレンダリングされていること、テキストがクリップされていないこと、要素が重なっていないこと、画像が歪みなく被写体がそのままであること、ブランド、ハンドル、CTAが一貫していることを確認します。その後、システムの last-used.json をこのカルーセルのカバーパターン、完全なパターンシーケンス、および各スライドのモードで更新します（例： {"cover": "cover-big-type", "sequence": ["cover-big-type", "two-cards", "takeaway"], "modes": ["light", "dark", "light"]}）。

デザイン思考

すべてのステップでこの推論を適用します。これが、出力をAIのスランプ（粗悪な出力）に見せないための鍵です。

コピー作成前

• スライドの単一のアイデアを1文で示します。できない場合、そのスライドはまだ存在しません。
• 最初に見出しを書き、意味を失わずに8語未満に削ります。
• 形容詞よりも具体的な名詞と強い動詞を優先します。時間、温度、量を明確に示します。
• 各行を読み直します。どのブランドにも当てはまる場合、このブランドのために書き直します。

要素配置前

• 最初に読む順序を決定します：最初、二番目、三番目に何が見えるか。サイズとウェイトでそれを強制します。
• すべての要素には、その位置に理由が必要です。グリッドに合わせるか、意図的に破ります（カバーのみ）。
• 余白をデザイン要素として扱います。スライドが窮屈に感じられたら、コンテンツを削ります。最小値を下回るタイプサイズに決して縮小してはいけません。

コピー基準（アンチスランプ）

• 短い平叙文。1文につき1つのアイデア。
• ダッシュなし。「Xだけでなく、Yも」という構文なし。強制的なトライアドなし。
• 埋め草の冒頭やAI語彙なし：「delve（掘り下げる）」、「unlock（解き放つ）」、「elevate（高める）」、「tapestry（タペストリー）」、「game-changer（ゲームチェンジャー）」、「in today's fast-paced world（今日のめまぐるしく変化する世界では）」。
• 能動態。平易な言葉：「utilize（活用する）」ではなく「use（使う）」。
• フックは3つのパターンのいずれかを使用：好奇心のギャップ、特定の数字、または直接的な呼びかけ。
• サブヘッドは約束をするものであり、要約ではありません。読者がスワイプすることで得られるものを示します。
• 見出しに装飾的な絵文字なし。タイトルケースの見出しなし。

レイアウトの基本

• 階層：見出しが最も大きく、最も太い要素です。見出しごとにアクセントカラーの単語またはフレーズを1つだけ、それ以上は不可。
• コントラスト：写真の上のテキストは、スリムまたはセミソリッドカードの上に配置されます。決して賑やかな写真の上に直接配置してはいけません。
• 配置：どこでも一貫した内側マージン。デフォルトは左揃え。カバーは意図的に中央揃えします。
• タイポグラフィ：最大2つのフォントファミリー。すべてのフォントは読み込まれなければならず、レンダリングゲートはリジェクトします

…

[翻訳用に切り詰められました]