rn-cover-skill

RN Cover Skill

画像を参照するのではなく、文章で定めたスタイル契約に基づいて各カバーを作成します。ImageGen は右側のアートワークを新規作成する場合にのみ使用します。正確な背景と、調整可能なグリッド、図形、タイポグラフィの配置には、付属のコンポジターを使用します。

Inputs

次の項目を確定します。

• label：任意の短いラテン文字／ツール名の行。例：Codex + Hyperframes + HeyGen:
• title：中国語のベネフィットまたはトピックの見出し
• subtitle：任意の補足文。1〜2行
• theme：右側の図解が表す意味的なコンセプト
• output directory

既定のサイズは 3000 × 1200（5:2）です。タイトルが ： または : で区切られており、左側が主にラテン文字／ツール名、右側が中国語の場合は、分割します。

Workflow

1. アートワークを生成する前に、テキストを計画します。
   • 96px 以上で収まる場合、中国語のタイトルは1行にします。
   • 左にテキスト、右にビジュアルを配置する非対称構成を起点にし、見た目のバランスに合わせて調整します。
   • 中国語や複数言語が混在するタイトルは横に広げ、必要な範囲でのみアートワークを移動または縮小します。
   • 中国語を主要な視覚的焦点にし、ラテン文字のラベルは小さく保ちます。
   • タイトルのみの場合も、ラベルとタイトルを含む場合も、左側のテキスト全体を垂直方向に中央揃えします。
2. references/style-contract.md を読みます。
3. トピックの意味に合った、右側のビジュアルの系統と構成を新たに選びます。
4. 組み込みの ImageGen を generate モードで呼び出し、単色の #00FF00 クロマキー背景に、独立した図解素材を生成します。
   • referenced_image_paths は省略します。
   • num_last_images_to_include は省略します。
   • 新しいカバーを作るたびに新しいアートワークを生成します。ユーザーが明示的に求めない限り、以前のカバーの右側のアートワークは再利用しません。
   • キャンバスの背景、グリッド、タイトル、文字、数字、ロゴ、透かしは含めないよう指示します。
   • 図解をタイトにトリミングし、クロマキー背景から完全に分離します。
5. クロマキーを除去します。

python "${CODEX_HOME:-$HOME/.codex}/skills/.system/imagegen/scripts/remove_chroma_key.py" \
  --input "/absolute/path/cover-artwork-chroma.png" \
  --out "/absolute/path/cover-artwork-transparent.png" \
  --auto-key border \
  --soft-matte \
  --transparent-threshold 12 \
  --opaque-threshold 220 \
  --despill

6. 透過アートワークを確認します。四隅が透過し、線のエッジがきれいで、緑の縁取りや擬似テキストがないことを確認します。
7. 正確なテキストと決定論的な図形を使って合成します。

python3 <skill-dir>/scripts/compose_cover.py \
  --artwork "/absolute/path/cover-artwork-transparent.png" \
  --label "Codex + Hyperframes + HeyGen:" \
  --title "开源自媒体涨粉的秘诀" \
  --output "/absolute/path/cover.svg" \
  --png "/absolute/path/cover.png"

--subtitle、--italic-title-lines、--artwork-start、またはグリッド／アートワークのジオメトリ上書きは、コンテンツ上必要な場合にのみ使用します。上書きの詳細は --help を実行して確認します。

必須のスタイル

• キャンバスの背景色は #FAF9F5 に固定します。ImageGen から背景色を取得してはいけません。
• 右側のビジュアル領域には、SVG で視認できる控えめな正方形グリッドを描画します。開始位置、密度、強度はテンプレートをそのままコピーせず、調整できるようにします。ユーザーがグリッドなしを明示的に求めた場合のみ、省略します。
• 見出しの長さに応じて、図解は右側に保ちながら、中央に近づけたり、さらに右へ移動したりできるようにします。
• 図解の線にはチャコールを使い、アクセントには抑えたくすみコーラルを1色だけ使います。広範囲にオレンジ色を塗りません。
• 左側のタイポグラフィは横に広げ、イラストはスペースを確保できるよう縮小または右へ移動します。
• 左側のテキスト全体を垂直方向に中央揃えします。
• ラテン文字の見出しには、エディトリアルな印象の力強いセリフ体を使います。イタリックにするのは、意図的に強調する行だけです。
• 中国語のタイトルには、ほぼ黒の太いサンセリフ体を使い、より強い視覚的な重みを持たせます。
• 補足文を付ける場合は、小さめの太いイタリック体のセリフフォントを使います。
• テキストの下に下線、区切り線、罫線、装飾線を追加しません。
• 人物の肖像、ステッカー、ネオン、光沢のある3D、密集したUI、装飾的なコピーは使用しません。
• 参考カバーは美的な調整のためだけに扱います。ノードの数、ループの形、オブジェクトの配置、ラベル、装飾の詳細をコピーしません。

画像モデルに最終的なタイトル文字の描画を依頼してはいけません。実際のテキストはすべて SVG に配置します。

再生成ルール

• 新しいカバー： 参照入力を使わず、右側のイラストを必ず一から新しく生成します。
• コンセプトまたはレイアウトの改訂： 右側のイラストを再生成します。
• タイポグラフィのみの軽微な修正： ユーザーから新しいイラストを求められない限り、現在のイラストを再利用します。

スタイルのルールを守りながら、ビジュアルの系統、トポロジー、ノード数、コネクターの経路、中央のオブジェクト、曲線、コーラルのシグナルの配置に変化をつけます。同じ図のテキストだけを差し替えたようなシリーズにしないでください。

品質チェック

1. 合成前に透明アートワークを確認します。疑似テキスト、緑色の縁取り、切れた図形、過剰な余白、または大きすぎる図は不採用にします。
2. 最終 PNG を原寸と 25％で確認します。
3. 指定された文字と句読点がすべて正確であることを確認します。
4. 中国語が最も読みやすく、次にラテン文字、最後に図が読みやすいことを確認します。
5. テキストとアートワークの間に、キャンバス幅の 4％以上の余白があることを確認します。
6. 左側のテキストグループが垂直方向の中央に配置され、装飾的な下線がないことを確認します。
7. 背景のクリーンなピクセルをサンプリングし、正確に #FAF9F5 であることを確認します。
8. 右側のグリッドがアートワークと競合せずに 25％の縮尺でも認識でき、両者が参照画像に機械的に合わせられるのではなく、光学的にバランスが取れていることを確認します。
9. SVG が編集可能かつ自己完結型であり、PNG の寸法が一致していることを確認します。
10. 最終パス、参照画像なしの ImageGen プロンプト、および組み込みの ImageGen を使用したことを報告します。