产品场景图生成器 · v2 / v3

「タイトル」を与えるだけで、1760×1120 の场景図を1枚生成します。スタイルは固定されているため、再設計は不要で、テンプレートの選択 + 内容の記入 のみで完了します。

2つの方向性があるので、先に選択してください：

	v2 · カード	v3 · グラフィカル
主体	角丸矩形ノード + 短いラベル	大アイコン / 円形ノード / グラフィック装置
コンテンツエリア	白いコンテンツカード全体がある	ない、グラフィックは直接薄い青のパネル上に配置
テキスト量	5–7箇所 2–4文字	3–4箇所 2–3文字
適しているケース	5–6の概念を列挙して説明する必要がある場合	要点が少なく、グラフィックで語らせたい場合
テンプレート	`template-b/c-*`	`template-d/e-*`

デフォルトは v3 です——この種の画像は最終的に240px幅に縮小されることが多く、グラフィックの方がテキストよりも縮小に耐えられます。情報自体が「5つの項目が並列しており、それぞれ読む必要がある」場合にのみ、v2に戻します。

なぜAI画像生成ではなくHTML/CSSレンダリングなのか：この図解には、正確なテキストと1pxのストロークが含まれています。拡散モデルはテキストをぼやけさせ、ストロークを震わせ、同じプロンプトでも毎回異なる結果を生成します。HTMLレンダリング → スクリーンショットにより、テキストは常に鮮明で、いつでも編集可能、バッチ処理可能、再現可能です。

なぜ構造をシンプルに保つ必要があるのか：これらの図解が最終的に表示されるサイズは、多くの場合 240px幅（Webカード）であり、1760ではありません。1/7の縮小では、「6ノード + ミニチュアチャート + 細いスケルトンライン」はすべて灰色のノイズに変わります。v2の絶対条件は次の通りです：240pxに縮小しても、タイトルと各ラベルの大意がまだ読み取れること。

縮尺ガイド（まずこの表を覚えてください）

表示幅	縮尺	48px テキストの実際の表示	結論
1760（PPTフルスクリーン）	1:1	48px	やや大きいが許容範囲
480（Web大画像）	1/3.7	13px	快適
240（Webカード）	1/7.3	6.6px	設計検収サイズ
190（リストサムネイル）	1/9.3	5.2px	限界に達している

従って：40px未満のテキストは一切表示すべきではありません。また、300px未満の幅の要素は詳細を保持できません。

絶対ルール（1つでも違反すると、結果が期待通りになりません）

キャンバスは 1760×1120（11:7）、純白背景で、グラデーション、ビネット、境界線はなし。
シェル + パネルの2層の座標は固定で変更しないでください。これが唯一の「奥行き」のソースです。第3層のコンテンツホワイトカードはv2のみに属します。v3ではそれを配置せず、グラフィックは直接パネル上に配置されます。
図全体にグラデーションアイコンタイルは1つだけ配置できます。サイズは170–200pxで、視覚的な主体となります。
コンテンツエリアの要素数は7以下にしてください（線、ハンドルはカウントしません）。7を超えると、縮小後にノイズになります。
テキスト：タイトル76px、ラベル48–50px、バッジ44px。20pxのテキストは存在しません。
色相は200°–250° に固定します。唯一の暖色 #F58A8A は「警告」にのみ使用できます。
人物、透視図法、3D、写真、環境背景は禁止。すべての矩形は厳密に軸に平行に配置します。
1760×1120 の1サイズのみ出力します。660×420などの縮小派生画像をエクスポートしないでください。
すべてのテキストは実際のテキスト（HTMLテキスト）である必要があり、画像やパスであってはなりません。
各線の両端は、要素の端または別の線上になければなりません。納品前に render.py の線チェックに合格する必要があります（終了コード0）。

固定ジオメトリ（そのままコピーし、変更しないでください）

層	要素	left	top	w	h	r
L0	canvas	0	0	1760	1120	–
L1	shell シェルホワイトカード	110	66	1520	968	62
L2	panel 薄青パネル	140	96	1460	908	50
L3	content コンテンツホワイトカード	180	240	1310	644	40
L4	badge バッジ	1312	任意	320	128	32
–	title タイトル	190	132	–	–	76px / 600

これから導き出される境界線（コンテンツを配置する際の位置合わせに使用）：

パネル右端 1600、下端 1004；コンテンツカード右端 1490、下端 884。
コンテンツカード下端からパネル下端まで 120px の青い帯（1004 − 884）。
バッジ右端 1632、パネルを32px越える——これが「フレームアウト」であり、カード内に押し込まないでください。
コンテンツエリアの有効幅 = 180→1490、左右の60px内側パディングを差し引いて = 1190。要素は 240–1430 の間に配置する必要があります。
バッジは 1312 以降 の領域を占有するため、コンテンツ要素の右端は1230を超えないようにしてください。超えるとバッジに隠れます。

パネルグラデーション（#F5FAFF で停止する必要があり、これより薄くしてはいけません）：

background:linear-gradient(180deg,#E4F1FF 0%,#E9F4FF 34%,#F2F9FF 74%,#F5FAFF 100%);

要素サイズ下限（v2）

要素	サイズ	説明
グラデーションタイル	170–200 正方形	幅の10–11%を占め、図全体で最も大きな色の塊
ワイドレイヤーバー	910×152	1層に1本を使用、「アイコン + レイヤー名」を配置
通常ノード	330×132	1行に3つ、間隔35
出力小カード	360×120	1行に3つ、間隔40
バッジ	320×128	アイコン46 + 44px テキスト
アイコン	50–54	`stroke-width 2.2`、細すぎると縮小で消える
線	4px	`dasharray 12 10`、矢印は二等辺三角形
選択ハンドル	20×20	`border 3px`、中心をノードの角に合わせる

ワークフロー

Step 1 · 長いタイトル → 短いタイトル + バッジ

機能名を取得し、4–6漢字 に圧縮：「技術文档与知識庫可視化-…」→「文档配图生成」。
バッジのコピーは 4文字（320pxには44pxの文字が4つしか入らない）。「約束」を書く：「一键插入」「仅改此块」「布局不变」「局部可改」。
例文は実際の文を書き、「示例文本」は書かないでください。

Step 2 · テンプレートを選択

タイトルの特徴	テンプレート	テンプレートファイル
1つのコア → 複数のアウトプット、能力の放射、1ハブ N シーン	D コア分岐（v3）	`assets/template-d-orbit.html`
A→B→C の3ステップ、アップロード→解析→取り込み、構築→テスト→公開	E 円形パイプライン（v3）	`assets/template-e-pipeline.html`
入力→生成→複数アウトプット、変換、整理（テキストラベルが必要）	B 上→下分岐（v2）	`assets/template-b-flow.html`
「ワンセンテンス生成」と「生成後の編集可能性」の両方を説明する（UI感覚が必要）	C-1 キャンバス編集状態（v2）	`assets/template-c-ui.html`
階層アーキテクチャ（アクセス/サービス/データ）を層ごとに説明	C-2 階層選択状態（v2）	`assets/template-c-arch.html`

詳細は references/layouts.md を参照。迷った場合：要点が4つ以下なら D または E；情報を項目ごとに並べる必要がある場合のみ C-2（縮小時に最も明確）。

Step 3 · テンプレートを変更

テンプレートをコピーし、以下の箇所のみを変更します。シェル層のCSSは一切変更しないでください：

.title テキスト；
各アイテム/ノード/カード内の短いラベル（2–4文字）；
バッジ .badge のテキスト（4文字）+ top（2つのバッジ間の垂直間隔は40px以上）；
インプットバー/バブル内の例文；
要素を削除する場合は、同時にその線と矢印も削除してください。削除しないと、宙に浮いた線の端が残ります；
線を変更する場合は、必ず以下の「線を断線させずに描く方法」の「ハブ + 独立セグメント」記述に従い、安易に回り道を追加しないでください。

Step 4 · レンダリング

python <SKILL_DIR>/scripts/render.py <input.html> <output.png>

<SKILL_DIR> はこのスキルのインストールディレクトリ（SKILL.md がある場所）であり、カレントワーキングディレクトリではありません。 cwd は通常ユーザーのプロジェクトであるため、直接 scripts/render.py と記述するとファイルが見つかりません。

スクリプトはHTMLを ASCII 一時ディレクトリ にコピーしてからヘッドレスブラウザを起動します——中国語のパスはヘッドレスブラウザを静かに失敗させ、空白または古い画像を出力します。また、出力が1760×1120であることを検証し、各線の端点が宙に浮いていないかを自動的にチェックします——終了コード3は線の断線を示し、納品しないでください。

Step 5 · サムネイル自己チェック（最も重要なステップ）

python <SKILL_DIR>/scripts/preview.py <output.png> --width 240

必ず実際にサムネイルを確認し、references/checklist.md に従ってチェックしてください。判断基準は以下の1文だけです：

240pxに縮小しても、タイトル、各ラベルの大意、そして「どの部分が重要か」を読み取れますか？

できない場合は、要素を減らし、フォントサイズを大きくしてください。詳細を追加することで解決しようとしないでください。

v3 · グラフィカル（アイコンとグラフィック要素による駆動）

一言で言うと：描けるものは、書くな。

v2 の各要素は「角丸矩形 + アイコン + テキスト」で構成されており、互いに同型であるため、図全体が一連のフローブロックのように見えます。 v3 では3つのことだけを変更します——コンテンツホワイトカードを削除し、アイコンを3倍に拡大し、グラフィック自体に意味を負わせます。

3つのハードルール

コンテンツホワイトカードは配置しない。グラフィックは直接薄い青のパネル上に配置します。白い背景はバッジ、フロートなどの小さなアイテムにのみ使用します。境界線は影に依存し、ストロークには依存しません。
アイコンは84px以上。視覚的な線幅 = stroke × 表示サイズ / 24、目標は7–9px（240pxに縮小した場合、約1px）。
ラベルは4箇所以下、各2–3文字。4箇所を超える場合は、まだテキストで説明しようとしていることを意味します——その情報をグラフィックに描き直してください。

アイコンライブラリ（50個）

assets/icons.svg はスプライトです。SVGの内容全体を ページにインラインで埋め込むことで使用できます：

<body>
  <!-- assets/icons.svg の全内容をここに貼り付け -->
  <svg><use href="#i-database"/></svg>
</body>

外部参照（<use href="icons.svg#i-database"/>）は file:// 環境下でブラウザにクロスオリジンとしてブロックされ、ヘッドレススクリーンショットではアイコンが完全に表示されず、エラーも報告されません。

python <SKILL_DIR>/scripts/iconlib.py --list            # グループ別にすべてのIDを一覧表示
python <SKILL_DIR>/scripts/iconlib.py --preview p.png   # アイコンウォールを生成、アイコン選択用

グループ：チャート / 図 12個 · 技術要素 15個 · AIとコンテンツ 18個 · インタラクション 5個。

symbol 内では stroke-width を記述せず、表示サイズに合わせて設定します：

表示サイズ	stroke
84–108	1.9–2.0
130–140	1.5
170–190	1.3

適切なアイコンが見つからない場合は、類似のものと交換してください。新しい形状を一時的に手描きしないでください——線のスタイルが統一されないと、図全体がすぐに粗悪に見えます。

要素パーツ（15個）

assets/parts.html はパーツウォールのページで、各パーツには実際の見本 + クラス名 + サイズが記載されています。HTML + CSS を直接コピーしてください：

グラデーションタイル · 白丸バッジ · フレームアウトバッジ · ラベルカプセル · ウィンドウ枠 · レイヤースタック · グラデーション矢印 · 破線接続 · 選択ハンドル · コマンドバブル · リングプログレス · ミニ縦棒グラフ · ドットパターン背景 · スター · 選択タイル。

2つのテンプレート

D コア分岐 → 1つのコア → 複数のアウトプット。中心は「3枚のずらして重ねたページ + スター」であり、単一のアイコンではありません。
E 円形パイプライン → A→B→C の3ステップ。中央の部分が唯一のグラデーションオブジェクトであり、読者の最初の着目点でもあります。

どちらも上記のパーツから構成されており、図の変更はアイコンと2–3文字のラベルを交換するだけで済みます。

v2 テンプレートの骨格

B 上→下分岐（template-b-flow.html）入力カプセル 690×136 中央揃え → 縦線 → グラデーションタイル 200 → 縦線からバスラインへ → 横バスラインが3方向に分岐 → 3枚の出力カード 360×120。バッジは右上に配置。

C-1 キャンバス編集状態（template-c-ui.html）左上タイル 170 + 入力バー 850×118 → 薄い青のキャンバスベース 1160×352、内部に3つのノード 330×132 を含み、中央ノードが選択状態 → 下部にコマンドバブル 430×112、4pxの破線で選択ノードに接続。バッジは右上に配置。

C-2 階層選択状態（template-c-arch.html） 3本の 910×152 レイヤーバーを縦に並べ（間隔40、グループ全体が垂直方向に中央揃え）、中央の1本を選択し、104pxの小さなグラデーションタイルを付ける → 右側に2つのバッジ。情報量が最も少なく、縮小時の可読性が最も高い。

v2 要素パーツ（6個で十分）

グラデーションアイコンタイル — 170–200 / r44–52 / linear-gradient(135deg,#4A9DFC,#5E92F9 45%,#7C6BF5) + 白色線形アイコン（84–100px, stroke-width 1.6）+ 下端のソフトグロー 0 18 40 rgba(74,157,252,.42), 0 0 40 8 rgba(124,107,245,.14)。
バッジ — 白背景 320×128 / r32 + 0 20 48 rgba(31,71,141,.16) + 46px 青アイコン + 44px テキスト。
レイヤーバー / ノード — 白背景 + 3px #C9DCF2 ストローク + 90px 薄い青の角丸アイコンブロック + 50px/500 ラベル。スケルトンラインは配置せず、実際のテキストを直接記述します。
選択状態 — 5px #4A9DFC + 0 0 0 12px rgba(74,157,252,.11) + 四隅の20pxハンドル（中心を角に合わせる）+ オプションで内蔵グラデーション小タイル。破線の選択枠は描画しないでください（線が通過する可能性があります）。
線 — 4px / #A9C7EC / dasharray 12 10、矢印は二等辺三角形 M827 716 h16 l-8 14 z。直角三角形は使用できません。
キャンバスベース — #F8FBFF / 2px #DDEBFB / r36、「ノード + バブル」を1つのグループにまとめ、画面の散乱を防ぎます。

線を断線させずに描く方法

線は図全体で唯一絶対座標を手動で記述する必要がある部分であり、最も問題が発生しやすい場所でもあります。線の一部が数百ピクセル不足していても、図全体は一見「それらしく」見えます——1760の原寸では拡大しないとわかりませんが、240pxに縮小すると完全に見えなくなり、図が納品された後に指摘されるまで気づかれません。

分岐は「ハブ + 独立セグメント」に分割する必要があります

誤り——1つのパスが途中で曲がりかつ分岐し、バスラインが最も左のブランチまでしかカバーしていない：

<path d="M835 652 V690 H435 V716"/>   <!-- 縦 → 左横 → 縦、ここで途切れている -->
<path d="M835 690 V716"/>
<path d="M1235 690 V716"/>            <!-- 始点が空白に浮いている -->

正しい——すべての交点が端点レベルで一致している：

<path d="M835 652 V690"/>    <!-- 縦線がハブ (835,690) に落ちる -->
<path d="M835 690 H435"/>    <!-- 左半分のバスライン -->
<path d="M835 690 H1235"/>   <!-- 右半分のバスライン -->
<path d="M435 690 V716"/>    <!-- 3本のブランチ線、始点yはすべてバスラインのyと等しい -->
<path d="M835 690 V716"/>
<path d="M1235 690 V716"/>

3つのルール：

1つのパスは1つのことだけを行う：真っ直ぐ下がるか、横切るかのどちらか。途中で曲がった後に分岐しない。
バスラインの両端は、最も左と最も右のブランチのxと等しくなければなりません。これら3つの数値はコード内で文字通り同じである必要があります。一方を変更したら、もう一方も追随して変更します。
ブランチ線の終点y = カードのtop − 14（14は矢印の高さ）。ブランチ線の始点y = バスラインのy。

レンダリングのたびに自動チェックが行われます

render.py はレンダリング後に自動的に linklint.py を呼び出します：ブラウザに各線の実際の端点を計算させ、各端点が要素の端に接触しているか（≤8px）、または別の線と交差しているか（≤3px）を個別に判定します。条件を満たさない場合は宙に浮いていると見なされ、座標が直接出力されます：

[x] 1つの浮遊端点を発見：
    6番目の線 始点 (1235,690) で、最も近いオブジェクトまで40px  d="M1235 690 V716"

この場合、終了コードは3になり、納品しないでください。単独でチェックすることもできます：

python <SKILL_DIR>/scripts/linklint.py scene.html -v

矢印の三角形、関係の菱形などの塗りつぶしグラフィックはチェックの対象外ですが（その底辺はもともと線の端点に接しているため）、それらは接続可能なターゲットとして扱われます——そのため、線が矢印に接続されていることは有効です。

このチェックはジオメトリのみを認識し、「大体合っている」は認識しません。実際に発生した事故を検出したことがあります： 3又分岐の右ブランチ線全体が800pxの横線を欠いており、図全体は肉眼では全く正常に見えました。

よくあるエラー（実際に踏んだものばかり）

現象	原因	修正方法
240pxに縮小すると灰色の塊になる	要素が小さすぎる、多すぎる	要素を7個以下に減らし、フォントサイズを48pxに上げ、ストロークを3–5pxに太くする
スケルトンラインが縮小後に灰色のノイズのように見える	装飾的なスケルトンラインを使用している	実際の短いラベル（2–4文字）に置き換える
下部に白い帯が現れ、パネルが境界線しかないように見える	グラデーションが `#FBFCFE` まで薄くなっている	`#F5FAFF` で停止させる
バッジがコンテンツを圧迫している	コンテンツ要素が1230を超えている	コンテンツの右端を1230以内に制御する
ハンドルが角の外側に浮いている	手動で記述したtopが半分になっていない	`handle.left = 角点 x − 10`、`top = 角点 y − 10`
破線が見えない	選択されたノードのグローに隠れている	線が含まれるsvgに `z-index:6` を追加する
矢印が歪んで、直角三角形のように見える	パスの記述が間違っている	二等辺三角形を使用する（パーツ5参照）
横バスラインがカードを圧迫している	分岐点が低すぎる	タイル下端→ライン ≥38px、バスライン→カード ≥40px
3枚のカードの間隔が不均等	left を手書きしている	等間隔に配置し、中心点が矢印に合っているか確認する
レンダリング結果が空白/古い画像になる	HTMLが中国語のパスにある	`scripts/render.py` を使用する
3枚の画像の密度が一貫していない	要素サイズがバラバラ	すべて「要素サイズ下限」表の値に従う
線が途中で切れている、ブランチが浮いている	1つのパスが曲がった後、一部のブランチしかカバーしていない	「ハブ + 独立セグメント」に分割する（「線を断線させずに描く方法」参照）
バブルの破線がノードから少し離れている	始点が要素の端にない	始点y = 要素のbottom、`linklint` で0pxまで検証する

ファイルインデックス

このスキルは自己完結型です：以下のパスはすべて SKILL.md があるディレクトリを基準としています。他のリポジトリや外部ドキュメントにアクセスする必要はありません。

SKILL.md
├── references/
│   ├── style-tokens.md    色値、フォントサイズ、角丸、ドロップシャドウの完全なトークンテーブル（v3グラフィカルトークンを含む）
│   ├── layouts.md         5つのテンプレートの骨格図、適用シーン、要素レシピ
│   └── checklist.md       納品前の項目別チェックリスト（240pxサムネイル検収、v3専用項目を含む）
├── assets/
│   ├── icons.svg          50個の線形アイコンスプライト（ページにインライン埋め込み後、<use href="#i-xxx"/> で使用）
│   ├── parts.html         15個のグラフィックパーツウォール、見てコピー可能
│   ├── template-d-orbit.html      D コア分岐（v3）
│   ├── template-e-pipeline.html   E 円形パイプライン（v3）
│   ├── _blank-shell.html          シェル層のみ、ゼロからテンプレートを構築する場合に使用
│   ├── template-b-flow.html       B 上→下分岐（v2）
│   ├── template-c-ui.html         C-1 キャンバス編集状態（v2）
│   └── template-c-arch.html       C-2 階層選択状態（v2）
├── scripts/
│   ├── render.py          HTML → 1760×1120 PNG（パス処理 + ブラウザ検出 + 線チェック）
│   ├── linklint.py        各線の端点が浮いていないかチェック（render.pyが自動呼び出し）
│   ├── preview.py         240pxサムネイルを生成、「サムネイル自己チェック」用
│   └── iconlib.py         アイコンID一覧表示 / アイコンウォール生成
└── examples/              5枚の完成画像 + レンダリング可能なソースファイル、参照専用、生成には関与しない

テンプレート内のテキストとグラフィックはすべて実行可能な実際の例です。空白のページから始めるよりも、これらを直接修正する方が速いです。

hwcloud-scene-image