確定した長文投稿パターンAから X 5:2 と note 1280x670 の標準サムネイル2種を作りたいとき、明示指定で冒頭図解も追加したいときに使う。
インストールする前に、エージェントに与えられる指示の中身を確認できます。
最小の実成果物は x-thumb 5:2 + note-thumb 実 PNG 1280x670 の2枚。main context で両方を作成し、strict 機械検証の後、各 presentation.absolutePath と同じ絶対パスを Read / view_image で開く。五つの目視項目を全て PASS として review receipt に画像 SHA256 とともに記録し、その2枚を実物提示する。accept-as-is は2枚をそのまま採用して embed する。
このゲートの対象はサムネイルの画風の作り直し・構造の組み替え・追加案の生成の3種である。light / standard / detailed では選択範囲だけ改善し、再検証・再表示・review receipt の再記録後に2枚を embed する。図解はこの選択ゲートと独立した optional 成果物で、明示指定時に --only diagram で作る。
確定した長文投稿パターンAから X・note のサムネイル2枚を作る。冒頭の図解は明示指定時のみ追加する。
長文投稿そのものを作るのは run-x-longpost-create。 本スキルはその成果物を入力に取る。
| 原則 | 説明 |
|---|---|
| 構造解釈は1箇所 | 標準2枚と optional 図解は1つの visual-structure.json から派生させる。解釈のずれをこの1箇所で防ぐ |
| Script First | 文字ルール・PNG署名・寸法・比率・透過の有無・背景色は機械で止める。絵として何が描かれたかの判断だけを人間の目に残す |
| 課金前に止める | 画像生成は課金される。構造データ（build-visual-prompts.js）とプロンプト文（lint-thumbnail-prompt.js）の2層を生成前に置き、出力を見て直すループの回数そのものを減らす |
| 目的が違えば画風も違う | 図解は「理解させる絵」、サムネイルは「足を止める絵」である。サムネイルは図解の画風規範を継承せず、thumbnail-style-canon.md を独立した正本として持つ |
| 退化を名指しで禁じる | 拡散モデルは放置するとコード描画や平坦ボックスへ退化する。禁止対象を列挙して初めて防げる |
パス変数・依存ランタイム（Node.js v18 以上）の定義は run-x-longpost-create SKILL.md「実行環境」と共通。加えて本スキルは次を使う。
| 変数 | 意味 | 未設定時 |
|---|---|---|
XLP_IMAGE_DIR | その投稿専用の画像・中間生成物の作業先 | 明示指定する。投稿ごとに分け、固定名 diagram.png を他投稿と共有しない |
XLP_ATTACHMENT_DIR | 検証済み画像の Obsidian 添付先 | env → ${XLP_VAULT_ROOT}/02_Configs/Extra の2段。どちらも未解決なら最終差し込み前に停止する |
CODEX_HOME | codex の状態ディレクトリ。生成画像の回収基点 | ~/.codex |
XLP_CODEX_BIN | 画像生成に使う codex 実行ファイル。パスまたは PATH 上のコマンド名 | codex |
XLP_REFERENCE_IMAGE_DIR | 画風の見本画像の置き場 | plugin 同梱の assets/reference-images/。利用者固有の見本へ差し替えるときだけ指定する |
generate-images-codex.js は shell alias を解決しない。XLP_CODEX_BIN（既定 codex）を PATH または明示パスから解決し、実在・実行権限を課金ループ前に検査する。実行不能なら retry せず終了コード2で停止する。起動は executable + argv で行い、stdin は ignore、stdout/stderr は回収用ログ fd へ接続する。
画風は文章と絵の2経路で渡す。文章は {kind}.prompt.txt と、generate-images-codex.js が visual-spec.json の palette から kind ごとに組む起動指示文である。絵は assets/reference-images/ の見本を codex exec -i で添付する。線の太さ・塗りの密度・簡略度は数値へ落とすと窮屈になるため、絵で渡すほうが正確に伝わる。
見本は複製の対象ではない。構図・文言・個々のアイコンを写されると、どの投稿でも同じ絵になり本文の構造を表す図解にならないため、指示文で複製を名指しで禁じている。宣言だけあって実体が無い見本は毎回 WARN として出力と meta.json の referenceImages に記録され、--require-reference-images を付けると FAIL になる。
codex exec が内蔵 imagegen で作った画像は、まず ${CODEX_HOME}/generated_images/<session-id>/ に現れる。generate-images-codex.js が PNG 署名を確かめて ${XLP_IMAGE_DIR}/{kind}.png へ回収し、絶対パスとホスト別の表示指示を JSON で返す。呼び出し経路は Claude Code / Codex → codex exec → Codex imagegen → session 画像回収 → 指定作業フォルダの PNG → 現物表示 である。
画像生成は課金される。 1枚あたり概ね 1〜2 分かかり、標準の2枚で2回、optional 図解も作る場合は追加で1回の課金が発生する。プロンプトを確定する前に --dry-run で組み立てたコマンドを目視する。
絵文字は一切使用しない。画像内・プロンプト内・ファイル名のすべてで禁止する。検証は node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/check-no-emoji.js" --file "[prompt.txt]"。定義境界の正本は ref-x-longpost-canon「絵文字の定義（判定境界）」にある。
「僕」「私」という文字を画像に入れない。図解では一人称の主体を人物アイコンの位置だけで表す（VS-07）。サムネイルには人物そのものを描かない（TS-03）。
サムネイルは図解の STYLE を複写しない。純白背景と赤アクセントを持ち込むと、貼り先の白い UI に溶けるか煽りの記号に読み替えられる。配色の正本は visual-spec.json の palettes.thumbnail にあり、lint-thumbnail-prompt.js が混入を機械検出する。
パターンAが確定する前に実行しない。確定前の本文で図解を作ると、本文の修正が図解に反映されないまま残る。
# 1. 構造解析（LLM）→ visual-structure.json を書く
# 2. 標準: 構造検証とサムネイル2種の meta 生成
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/build-visual-prompts.js" \
--structure "${XLP_IMAGE_DIR}/visual-structure.json" --out-dir "${XLP_IMAGE_DIR}" --only x-thumb,note-thumb
# 3. 二つの prompt を設計し、課金前に構造と完全一致するか検査
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/check-no-emoji.js" --file "${XLP_IMAGE_DIR}/x-thumb.prompt.txt"
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/check-no-emoji.js" --file "${XLP_IMAGE_DIR}/note-thumb.prompt.txt"
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/lint-thumbnail-prompt.js" --image-dir "${XLP_IMAGE_DIR}" \
--structure "${XLP_IMAGE_DIR}/visual-structure.json"
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/generate-images-codex.js" --image-dir "${XLP_IMAGE_DIR}" --only x-thumb,note-thumb
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/validate-visual-assets.js" --image-dir "${XLP_IMAGE_DIR}" --only x-thumb,note-thumb --strict
# 4. 戻り値 results[].presentation の2つの absolutePath を Read / view_image で開き、各画像を記録
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/record-thumbnail-review.js" --image-dir "${XLP_IMAGE_DIR}" --kind x-thumb --host "[claude-code|codex]" --no-people PASS --no-info-product PASS --text-readable-correct PASS --gentle-off-white PASS --impact PASS
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/record-thumbnail-review.js" --image-dir "${XLP_IMAGE_DIR}" --kind note-thumb --host "[claude-code|codex]" --no-people PASS --no-info-product PASS --text-readable-correct PASS --gentle-off-white PASS --impact PASS
# 5. accept-as-is はこの2枚を採用
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/embed-visual-paths.js" --file "[投稿ファイル]" --image-dir "${XLP_IMAGE_DIR}" --attachment-dir "${XLP_ATTACHMENT_DIR}" --only x-thumb,note-thumb
| 入力 | 必須 | 内容 |
|---|---|---|
| 投稿ファイル | 必須 | run-x-longpost-create が出力した .md。パターンAの本文・確定タイトル・キャッチコピーを含むもの |
--only | 任意 | diagram / x-thumb / note-thumb をカンマ区切りで限定。1枚だけ作り直すときに使う |
| 成果物 | パス | 用途 |
|---|---|---|
| 構造データ | ${XLP_IMAGE_DIR}/visual-structure.json | 標準2枚と optional 図解に共通する解釈の正本 |
| プロンプト | ${XLP_IMAGE_DIR}/{kind}.prompt.txt | 画像内テキストの単一正本。.md にしない（Obsidian が vault 内の .md を同期取り込みして消すため） |
| メタ | ${XLP_IMAGE_DIR}/{kind}.meta.json | 生成寸法と出自（source は生成後に codex-image2 へ更新される） |
| 画像 | ${XLP_IMAGE_DIR}/{kind}.png | 検証・目視用の作業成果物 |
| 確認 receipt | ${XLP_IMAGE_DIR}/{kind}.review.json | 開いたホスト・ツール、5項目の PASS、確認時点の画像 SHA256 |
| 投稿添付画像 | ${XLP_ATTACHMENT_DIR}/[投稿basename]-{kind}.png | 投稿ごとに一意な納品物。本文は実運用投稿と同じ ![[basename]] で参照 |
{kind} は diagram / x-thumb / note-thumb の3種である。
Phase 4.1（構造解析）→ Phase 4.2（プロンプト設計）→ Phase 4.3（生成）→ Phase 4.4（検証・差し込み）の順に進む。
各 Phase がどの prompts/*.md を Read するかは「実行手順」に書く。図解とサムネイルは同じ構造データを共有するため、構造解析は1回だけ行い、標準2枚と明示指定された optional 図解を派生させる。
| 正本 | 内容 |
|---|---|
| references/diagram-style-canon.md | 図解の絶対ルール VS-01〜VS-10・三分割版面・構造型 T1〜T4・退化パターン |
| references/icon-vocabulary.md | アイコンの粒度の見本 |
| references/thumbnail-style-canon.md | サムネイルの絶対ルール TS-01〜TS-12・インパクトの作り方・情報商材的意匠の禁止リスト・退化パターン |
| references/thumbnail-specs.md | サムネイル2種の寸法と版面 |
| references/visual-spec.json | kind・生成/納品寸法・比率・palette・背景規則・横断 text rule の機械可読正本 |
| references/resource-map.yaml | 「いつ何を開くか」の機械可読索引 |
規定が食い違って見えたときの決着は ref-x-longpost-canon が正本索引として担う。
runtime_root_policy: host-skill-path を適用する。CLAUDE_PLUGIN_ROOT をplugin rootとして使用する。SKILL.md のabsolute pathから、plugin manifestを持つ祖先を上方探索して論理 PLUGIN_ROOT を解決する。cwd からplugin rootを推測せず、literal placeholderをshellへ渡さない。各shell invocation内で解決済みabsolute pathを PLUGIN_ROOT に設定する。prompts/ 配下はこのowner Skill契約を継承する。${XLP_PROMPTS_DIR}/x-longpost-analyze-visual-structure.md を Read し、投稿のパターンAから ${XLP_IMAGE_DIR}/visual-structure.json を作る。
x-longpost-design-thumbnail-prompt.md を Read し、x-thumb.prompt.txt と note-thumb.prompt.txt を作る。両者の STYLE / TYPOGRAPHY / NEGATIVE は完全一致させる。
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/build-visual-prompts.js" \
--structure "${XLP_IMAGE_DIR}/visual-structure.json" --out-dir "${XLP_IMAGE_DIR}" --only x-thumb,note-thumb
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/lint-thumbnail-prompt.js" --image-dir "${XLP_IMAGE_DIR}" \
--structure "${XLP_IMAGE_DIR}/visual-structure.json"
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/generate-images-codex.js" --image-dir "${XLP_IMAGE_DIR}" --only x-thumb,note-thumb --dry-run
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/generate-images-codex.js" --image-dir "${XLP_IMAGE_DIR}" --only x-thumb,note-thumb
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/validate-visual-assets.js" --image-dir "${XLP_IMAGE_DIR}" --only x-thumb,note-thumb --strict
生成 JSON の results[].presentation にある x-thumb / note-thumb の各 absolutePath は、指定した ${XLP_IMAGE_DIR} に回収された同じ PNG の絶対パスである。2枚のどちらも、実行ホストに応じて必ず開く。
Read ツールで二つの presentation.absolutePath をそれぞれ開くview_image に同じ二つの絶対パスをそれぞれ渡すファイル名、パス、サイズ、検証の PASS 表示だけでは present_actual_artifact とみなさない。各2枚で no people / no info-product / readable and correct text / gentle off-white / impact を目視し、record-thumbnail-review.js で全項目 PASS と画像 SHA256 を receipt へ記録した後にだけ artifact_presented へ進む。
accept-as-is: 提示した2枚を採用し、--only x-thumb,note-thumb で embed するlight / standard / detailed: 選ばれた範囲で2枚を改善し、再検証・再表示・receipt 更新後に embed するサムネイル2本は lint-thumbnail-prompt.js --structure の TL-01〜TL-12 を満たし、生成後は下記の手順で receipt を作る。
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/build-visual-prompts.js" \
--structure "${XLP_IMAGE_DIR}/visual-structure.json" --out-dir "${XLP_IMAGE_DIR}" --only x-thumb,note-thumb
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/check-no-emoji.js" --file "${XLP_IMAGE_DIR}/x-thumb.prompt.txt"
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/check-no-emoji.js" --file "${XLP_IMAGE_DIR}/note-thumb.prompt.txt"
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/lint-thumbnail-prompt.js" --image-dir "${XLP_IMAGE_DIR}" --structure "${XLP_IMAGE_DIR}/visual-structure.json"
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/generate-images-codex.js" --image-dir "${XLP_IMAGE_DIR}" --only x-thumb,note-thumb --dry-run
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/generate-images-codex.js" --image-dir "${XLP_IMAGE_DIR}" --only x-thumb,note-thumb
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/validate-visual-assets.js" --image-dir "${XLP_IMAGE_DIR}" --only x-thumb,note-thumb --strict
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/record-thumbnail-review.js" --image-dir "${XLP_IMAGE_DIR}" --kind x-thumb --host "[claude-code|codex]" --no-people PASS --no-info-product PASS --text-readable-correct PASS --gentle-off-white PASS --impact PASS
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/record-thumbnail-review.js" --image-dir "${XLP_IMAGE_DIR}" --kind note-thumb --host "[claude-code|codex]" --no-people PASS --no-info-product PASS --text-readable-correct PASS --gentle-off-white PASS --impact PASS
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/embed-visual-paths.js" \
--file "[投稿ファイルの絶対パス]" --image-dir "${XLP_IMAGE_DIR}" \
--attachment-dir "${XLP_ATTACHMENT_DIR}" --only x-thumb,note-thumb
embed-visual-paths.js --only x-thumb,note-thumb は二つの slot / image / PASS receipt を事前検証し、receipt の SHA256 が現在の PNG と一致するときだけ差し込む。図解を明示的に追加する optional 経路では x-longpost-design-diagram-prompt.md を Read し、diagram.prompt.txt を作り、build / generate / validate のすべてに --only diagram を付ける。この経路は標準2枚を省略する理由にはならない。
| すべきこと | 避けるべきこと |
|---|---|
| 本文の主張をそのまま図に写す | 図解で新しい主張を足す |
| 標準2枚の線の太さと簡略度をそろえ、optional 図解とは構図を分ける | サムネイルに図解を縮小して流用する / 図解の人物シルエットをサムネイルへ持ち込む |
| インパクトは余白と要素削減で作る（TS 規範 §2） | 縁取り文字・爆発マーク・高彩度で目立たせる |
| 退化したら作り直す | 崩れた日本語を残したまま差し込む |
--dry-run で先に目視する | 制約違反のまま生成して課金を重ねる |
実行の記録は log_usage.js に残す。
node "${PLUGIN_ROOT:-${CLAUDE_PLUGIN_ROOT}}/scripts/log_usage.js" --result success --phase "Phase 4" --agent x-longpost-analyze-visual-structure
slide-report-generator の同名スクリプトで実証済みのものを移植したvisual-spec.json の palettes.thumbnail にあり、差し替えは同ファイルの1箇所で完結する。色を足したときは lint-thumbnail-prompt.js の TL-02 が自動で検査対象に含めるまだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
アプリ・Webサービス・業務ツールの制作を、証拠分析→確定的な初稿→要件定義→体験設計→機能分解→実装→品質ゲート→リリース判定の手順ゲート制で進めるスキル。質問で要件を埋めるのではなく、依頼文・既存コード・資料・ログから最有力案を選び、動く成果物を先に出して差分で改善する。ユーザーが「アプリを作りたい」「ツールを作って」「〜を自動化したい」「システム化したい」「要件定義」「仕様を決めたい」「UI/UXを設計して」「体験を良くしたい」「機能を洗い出して」「MVPを決めたい」「品質チェック」「リリースしていいか判断して」などと言ったら必ず使用する。外部データの取込・マスタ・締め処理を伴う業務システムでは references/data-lifecycle.md も併用する。新規・既存を問わずアプリの制作・改善・リニューアルで使用する。
Webアプリの準備→要件定義→設計→実装→公開→品質ゲートを実行する内部オーケストレーター。Claude Codeの /build-app /improve-app、Codexの $build-app / $improve-app から明示的に委譲された場合、custom agent起動時、または利用者が $app-orchestrator を明示した場合だけ使用する。一般のアプリ相談から暗黙起動しない。
run-extract-blueprint が生成した章別ブループリントの忠実性を独立 context で評価したいとき、事実/推測区別と粒度と被覆を検証し draft_hash に束縛した PASS/FAIL verdict をローカル品質ゲート (C01 の周回内の受入判定・差し戻し) へ渡したいときに使う。
確認点で利用者が見る深さを選んだあと打ち合わせ資料を作り手とは別の目で確かめたいとき、正確さ・言葉・見た目・シンプルさの指摘を資料の編集なしで受け取りたいときに使う。
生成した handout 資料が初心者に伝わるか読みやすさレビューを依頼したいとき、独立 context のレビュアーから指摘と根拠つきの verdict を回収したいときに使う。
Notion ページを描画する直前に粒度を検証したいとき、info-collector-agent ページと同等の section 充足度を section_canonical_map 基準で機械検証したいときに使う。