產品場景圖產生器 · v2 / v3

給一個「標題」，產出一張 1760×1120 的場景圖。風格已定型，不需要重新設計，只需要選版式 + 填內容。

兩套取向，先選一個：

	v2 · 卡片	v3 · 圖形化
主體	圓角矩形節點 + 短標籤	大圖示 / 圓形節點 / 圖形裝置
內容區	有整塊白色 content 卡	沒有，圖形直接浮在淡藍面板上
文字量	5–7 處 2–4 字	3–4 處 2–3 字
適合	需要逐條並列講清 5–6 個概念	要點少、希望圖形自己說話
模板	`template-b/c-*`	`template-d/e-*`

預設走 v3——這類圖最終往往縮到 240px 寬，圖形比文字扛得住縮放。只有當資訊本身是「5 條並列、每條都要讀字」時，才退回 v2。

為什麼用 HTML/CSS 渲染而不是 AI 生圖：這套圖有精確文字與 1px 描邊。擴散模型會把文字畫糊、把描邊畫抖，且同樣提示詞每次結果都不同。HTML 渲染 → 截圖，文字永遠清晰、隨時可改、可批次、可重現。

為什麼結構必須簡單：這些圖最終的觀看尺寸往往是 240px 寬（網頁卡片），不是 1760。在 1/7 縮放下，「六節點 + 微縮圖表 + 細骨架條」會全部糊成灰色噪點。v2 的硬指標是：縮到 240px，標題和每個標籤的大意還能讀出來。

縮放標尺（先記住這張表）

觀看寬度	縮放比例	48px 文字實際顯示	結論
1760（PPT 全螢幕）	1:1	48px	偏大但可接受
480（網頁大圖）	1/3.7	13px	舒服
240（網頁卡片）	1/7.3	6.6px	設計驗收尺寸
190（列表縮圖）	1/9.3	5.2px	已到極限

所以：任何小於 40px 的文字都不該出現，任何小於 300px 寬的元素都撐不住細節。

鐵律（違反任意一條，出來就不像）

畫布 1760×1120（11:7）、純白底，無漸變無暗角無邊框。
外殼 + 面板兩層座標寫死不要改，這是唯一的「深度」來源。第三層內容白卡只屬於 v2；v3 不鋪它，圖形直接落在面板上。
全圖有且僅有 1 個漸變圖示瓦片，170–200px 見方，它是視覺主體。
內容區元素總數 ≤ 7（連線、手柄不計）。超過 7 個，縮小後必然變噪點。
文字：標題 76px、標籤 48–50px、浮標 44px。不存在 20px 的字。
色相鎖死 200°–250°。唯一暖色 #F58A8A 只能用於「告警」。
無人物、無透視、無 3D、無照片、無環境背景。所有矩形嚴格軸對齊。
只輸出 1760×1120 一個尺寸，不要再匯出 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，減去左右各 60 內邊距 = 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	一整層用一條，放「圖示 + 層名」
常規節點	330×132	一行三個，間距 35
輸出小卡	360×120	一行三個，間距 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 只放得下 4 個 44px 的字），要寫「承諾」：「一鍵插入」「僅改此塊」「佈局不變」「局部可改」。
例句寫真實的一句話，不要寫「示例文本」。

Step 2 · 選版式

標題特徵	版式	模板
一個核心 → 多類產出、能力輻射、一中樞 N 場景	D 核心分支（v3）	`assets/template-d-orbit.html`
A→B→C 三步、上傳→解析→入庫、建構→測試→發佈	E 圓形流水線（v3）	`assets/template-e-pipeline.html`
輸入→生成→多路產出、轉換、整理（要文字標籤才說得清）	B 上→下分叉（v2）	`assets/template-b-flow.html`
既講「一句話生成」又講「生成後能改」（要介面感）	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（兩個浮標縱向間距 ≥40px）；
輸入條 / 氣泡裡的例句；
刪元素時同步刪掉它的連線與箭頭，否則留下懸空線頭；
改連線時必須按後文「連線怎麼畫才不會斷」的「樞紐 + 獨立段」寫法，不要順手加轉彎。

Step 4 · 渲染

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

<SKILL_DIR> 是本 skill 的安裝目錄（SKILL.md 所在處），不是當前工作目錄—— 你的 cwd 通常是用戶的專案，直接寫 scripts/render.py 會找不到檔案。

腳本把 HTML 複製到 ASCII 臨時目錄再調 headless 瀏覽器——中文路徑會讓 headless 靜默失敗、輸出空白或舊圖。它還會驗證輸出是不是 1760×1120，並自動檢查每根連線的端點有沒有懸空——退出碼 3 表示有斷線，不要交付。

Step 5 · 縮小後自我檢查（最重要的一步）

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

必須真的看一眼縮圖，按 references/checklist.md 核對。判斷標準只有一句：

縮到 240px，還能讀出標題、每個標籤的大意、以及「哪一塊是重點」嗎？

做不到就減元素、放大字號，不要靠加細節解決。

v3 · 圖形化（圖示與圖形元素驅動）

一句話：能畫出來的，不要寫出來。

v2 的每個元素都是「圓角矩形 + 圖示 + 文字」，彼此同構，所以整圖讀起來像一堆流程塊。 v3 只換三件事——去掉內容白卡、把圖示放大三倍、讓圖形自己承擔語義。

三條硬規則

不鋪 content 白卡。圖形直接浮在淡藍面板上；白底只給徽章、浮標這類小件。邊界靠陰影，不靠描邊。
圖示 ≥ 84px。視覺線寬 = stroke × 顯示尺寸 / 24，目標 7–9px（縮到 240px 時約 1px）。
標籤 ≤ 4 處，每處 2–3 字。超過 4 處，說明你還在用文字講事情——回去把那條資訊畫成圖形。

圖示庫（50 枚）

assets/icons.svg 是 sprite。把整段內容內聯到頁面裡才能用：

<body>
  <!-- 把 assets/icons.svg 的全部內容貼在這裡 -->
  <svg><use href="#i-database"/></svg>
</body>

外部引用（<use href="icons.svg#i-database"/>）在 file:// 下會被瀏覽器按跨域攔掉， headless 截圖裡圖示會整片消失且不報錯。

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 是一頁零件牆，每件都有實物 + class 名 + 尺寸，直接抄 HTML + CSS：

漸變瓦片 · 白圓徽章 · 破框浮標 · 標籤膠囊 · 視窗框 · 層堆疊 · 漸變箭頭 · 虛線連接 · 選中手柄 · 指令氣泡 · 環形進度 · 微柱圖 · 點陣底紋 · 星芒 · 選中瓦片。

兩套版式

D 核心分支 → 一個核心 → 多類產出。中心是「三張錯位疊頁 + 星芒」，不是單個圖示。
E 圓形流水線 → A→B→C 三步。中間那塊是唯一漸變體，也是讀者第一落點。

兩者都由上面這些零件拼成，改圖只需換圖示、換 2–3 字標籤。

v2 版式的骨架

B 上→下分叉（template-b-flow.html）輸入膠囊 690×136 居中 → 豎線 → 漸變瓦片 200 → 豎線到總線 → 橫總線分三路 → 三張輸出卡 360×120。浮標放右上。

C-1 畫布編輯態（template-c-ui.html）左上瓦片 170 + 輸入條 850×118 → 淺藍畫布底板 1160×352，內含三個節點 330×132，中間節點選中 → 下方指令氣泡 430×112，用 4px 虛線連到選中節點。浮標放右上。

C-2 分層選中態（template-c-arch.html）三條 910×152 層條豎排（間距 40，整組垂直居中），中間一條選中並帶一個 104px 漸變小瓦片 → 右側兩個浮標。資訊量最小、縮小後可讀性最好。

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，把「節點 + 氣泡」收成一組，避免畫面散。

連線怎麼畫才不會斷

連線是全圖唯一需要手寫絕對座標的部分，也是最容易出事的地方。一段線少寫幾百像素，整張圖看著依然「像那麼回事」——1760 原圖上不放大看不出來，縮到 240px 更是完全看不見，直到圖已經交出去才被人指出。

分叉必須拆成「樞紐 + 獨立段」

錯誤——一條 path 中途轉彎又分支，總線只覆蓋到最左支線：

<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"/>    <!-- 三條支線，起點 y 都等於總線 y -->
<path d="M835 690 V716"/>
<path d="M1235 690 V716"/>

三條規則：

一條 path 只做一件事：要麼直下，要麼橫穿。不在中途轉彎後再分支。
總線兩端必須等於最左、最右支線的 x，這三個數字要在程式碼裡字面相同。改一側，另一側跟著改。
支線終點 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

箭頭三角、關係菱形這類填充圖形不參與檢查（它們的底邊本來就貼在線端點上），但它們會被當作可連接目標——所以線接到箭頭上是合法的。

這個檢查只認幾何，不認「看著差不多」。它抓到過一個真實事故：三叉分叉的右支線整整少了一段 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
三個卡片間距不等	手寫 left	等距排列並核對中心點是否對準箭頭
渲染出來空白/舊圖	HTML 在中文路徑下	用 `scripts/render.py`
三張圖疏密不一致	元素尺寸各寫各的	全部按「元素尺寸下限」表取值
連線斷在半路、支線懸空	一條 path 轉彎後只覆蓋到部分支線	拆成「樞紐 + 獨立段」，見「連線怎麼畫才不會斷」
氣泡虛線離節點有一條縫	起點沒落在元素邊緣	起點 y = 元素 bottom，讓 `linklint` 驗到 0px

檔案索引

本 skill 自包含：下面的路徑都相對於 SKILL.md 所在目錄，不需要存取其他倉庫或外部文件。

SKILL.md
├── references/
│   ├── style-tokens.md    色值、字號、圓角、投影的完整 token 表（含 v3 圖形化 token）
│   ├── layouts.md         五種版式的骨架圖、適用場景、元素配方
│   └── checklist.md       交付前逐條核對（含 240px 縮小驗收、v3 專用項）
├── assets/
│   ├── icons.svg          50 枚線性圖示 sprite（內聯進頁面後 <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