JP Magazine Poster（日本語モダンエディトリアルポスター生成）

JP Magazine Poster（日本語モダンエディトリアルポスター）

ワークフロー

このスキルを使用して、ユーザーのトピック、ソーステキスト、または画像セットから日本語の雑誌スタイルポスターファイルを生成します。

1. テンプレートを選択したりスロットを埋める前に、references/template-contract.md を読んでください。
2. 制作作業に入る前に、フォーム形式の確認ラウンドを一度だけ行います：
   • ユーザーの現在のリクエストを1～3文の短い文章で要約します。
   • スタイル/テーマ、ポスター枚数、画像の入手方法、テンプレート選択、コピーのトーン、出力ディレクトリ、および必須/禁止コンテンツについて、不足している選択肢や確認すべき点を質問します。
   • 可能であれば、具体的なオプションを付けた簡潔な番号付き質問を優先します。
   • 質問は一度だけ行います。ユーザーが回答した後、さらに確認のためにループしないでください。
   • それでもユーザーが情報を不足させたままの場合は、妥当なデフォルト値で進め、その仮定を仕様またはマニフェストに記録します。
3. 元のリクエストとその一回の回答から、ユーザーのテーマと要求された出力数を理解します。
4. テンプレートを選択します：
   • 明示的にテンプレートIDが指定された場合はそれを使用します。
   • ユーザーがすべてのスタイルを要求した場合は8つのテンプレートすべてを使用します。
   • それ以外の場合は、コンテンツの形状に最も適した最小限のテンプレートを選びます。
5. 各ゾーンの簡潔なコンテンツを作成します：
   • title：末尾に句読点は付けません。短い句の場合、タイトル内でカンマを使用しても構いません。
   • goldenQuote：中国語または英語の文末記号で終わる必要があります。
   • detail：通常の句読点と、事実に基づくソースのコンテキスト。
   • 中国語の引用符は、ユーザーが原文の引用を明示的に要求しない限り、隅括弧（「」）に置き換えます。
   • 1文字だけの行や、1文字＋句読点だけの行は避けてください。
6. 画像は厳格な優先順位で選択します：
   • ユーザーが提供した画像のパスまたはURLを最優先します。
   • システムで利用可能なモデルまたはツールを呼び出してテーマに合ったビットマップ画像を生成し、レンダリング前に選択したラスターファイルを出力ディレクトリに保存します。
   • ユーザー画像がなく、利用可能な画像生成モデル/ツールもなく、失敗した場合、またはプロジェクトローカルのビットマップファイルを返せない場合にのみ、洗練されたSVGアートワークを描画します。その理由を assumptions または manifest に記録します。
   • SVGは内部描画ソースとしてのみ使用でき、最終的なHTMLレンダリングの前にPNGにラスタライズする必要があります。
7. 入力JSON仕様を記述して実行します：

node scripts/render_poster.js --spec input.json --out output/<run-name>
node scripts/validate_poster.js --html output/<run-name>/*.html

検証が失敗した場合は、コピーを短くするか書き直し、明示的な改行を調整し、画像のフォーカスを変更してから、再度レンダリングと検証を行います。

品質要件

• ユーザーが質問をスキップするよう明示的に指示しない限り、1回のインテークフォームの質問と回答が行われるまで、レンダリング、画像生成、またはコピーの調整を開始してはいけません。
• 1回のインテーク後に不足している詳細は、さらに質問するのではなく、実用的なデフォルト値で補完する必要があります。
• 最終的なHTMLは .svg ファイルや data:image/svg+xml を参照してはいけません。
• 画像の入手元は厳格な優先順位に従う必要があります：ユーザー提供画像、次にシステム利用可能なビットマップ生成、最後の手段として洗練されたSVG描画。
• 生成、描画、またはフォールバックされた画像は、画像ゾーンに配置される前に、出力ディレクトリの下にPNG/JPEG/WebPファイルとして書き込む必要があります。
• テンプレートのフォールバックアートやSVGのラスタライズを、モデル/ツールによるビットマップ生成と同等に扱ってはいけません。モデル/ツールによる生成をスキップまたは失敗した場合は、正確な理由を記録します。
• PNGポスターのエクスポートは、よりシャープなレビュー出力のためにデフォルトで2倍スケールにします。
• テンプレート03（オブジェクトカード）のメモは、各カードの行の高さが固定216pxであるため、非常に短くする必要があります。
• テンプレート06の画像ゾーンは、左画像が右のテキスト列に侵入しないように、.jp-photo-zone { width: 100%; max-width: 100%; } を維持する必要があります。

仕様フォーマット

最小入力：

{
  "theme": "white",
  "templates": ["vertical-02"],
  "sourceText": "ユーザーのトピックまたはソーステキスト",
  "assumptions": ["1回のインテーク後に使用されたデフォルト値。"],
  "images": [
    {
      "slot": "single-photo-feature",
      "src": "D:/path/to/image.png",
      "fit": "cover",
      "focus": "center 50%"
    }
  ],
  "content": {
    "title": "ポスタータイトル",
    "goldenQuote": "明確なエディトリアル文。",
    "details": ["詳細1。", "詳細2。"]
  }
}

注記：

• theme は white、midnight、light、または dark を受け付けます。
• templates はテンプレートID（例：vertical-02）、テンプレート名（例：vertical-single-photo-headline）、または all を受け付けます。
• content.details は文字列の配列、または heading、title、body を持つオブジェクトの配列にすることができます。
• images[].slot は、テンプレート契約にリストされている data-slot-id または data-relation-id と一致する必要があります。

出力

レンダリングスクリプトは以下を作成します：

• ポスターごとに1つのHTMLファイル。
• Playwrightがインストールされ、Chromiumが利用可能な場合、ポスターごとに1つのPNGファイル。
• テンプレート、テーマ、画像ソース、出力ファイルパス、および検証/エクスポートステータスを含む manifest.json。
• 生成、フォールバック、またはSVGソース画像がラスタライズされた場合の generated-images/*.png。

元のテンプレートレイアウトはそのまま保持します。フォントサイズ、行の高さ、幅、セーフマージン、グリッド設定、または視覚的構造を変更してコンテンツを強制的に収めてはいけません。代わりにコンテンツを修正してください。