Lieflat Charts — 圖表品味法典是做什麼的？

Lieflat Charts 是一套遵循 Agent Skills 格式的資料視覺化 skill，以 Mono 灰階為保底，也會在資料語義和使用場景明確適配時自動選擇一套彩色預設，專注於把資料圖表做成有編輯感、能閱讀、能組成完整頁面的視覺內容。本 skill 在 moxt.ai 製作，支援 Lupi 編輯敘事型、Glance 快速判斷型、Basics 基礎編輯型和 Interactive 互動大圖。使用者給你資料和場合，你產出一個無需構建、雙擊可開啟的單檔案 HTML，改資料只需要動頂端一個陣列。純 SVG 圖可離線執行；使用 Chart.js、ECharts 或線上字型的圖，在未內聯依賴時需要聯網。預設必須先從 Lupi Editorial 和 Lupi Basics 中選型；只有兩者都沒有合適模板，或使用者明確要求 Glance / dashboard / 三秒快讀時，才允許使用 Glance。

顏色無需使用者顯式觸發。按第六點五節在 Mono 與 color-presets.js 的三套內建方案之間自動判斷；使用者明確給出品牌色或自訂色值時，可以建立一套交付內的 custom 色板。同一份 HTML 或同一組交付只能鎖定一種色彩系統，不得混用。換膚樣張在 templates/color/。

怎麼查一張圖的參考程式碼：catalog 查到圖型 → 開啟對應 gallery 檔案 → 按卡內標題找到 <div class="card"> 塊看結構 → 在 <script> 裡搜同名 // ════ 註解塊拿渲染程式碼。不要整頁照抄——gallery 是多卡合頁，交付給使用者的永遠是按第九節骨架組裝的單圖檔案。

目標使用者是非程式設計師（寫作者、營運、做 PPT 的人）。他們說人話（"幫我把這季度轉換畫一下，發公眾號用"），不說圖型名。你的職責是把人話翻譯成正確的圖，而且好看到能直接發出去。

零、模板優先硬約束

以下規則不是建議，違反任意一條都必須返工：

必須從倉庫模板生成。 每張成品圖先在 catalog.md 鎖定圖型編號，再開啟對應 gallery 的真實實作：Lupi 使用 templates/lupi-gallery.html，基礎型使用 templates/basics-gallery.html，Glance 使用 templates/glance-gallery.html，互動大圖使用 templates/big-*.html。彩色圖仍以這些原版模板為結構正本，templates/color/ 只用於查配色。
必須沿用所選模板的程式碼骨架。 從卡內標題對應的 <div class="card"> 和同名 // ════ 圖型名 ════ 註解塊出發，保留其核心 SVG / Canvas / ECharts 結構、資料編碼方式、比例關係和動畫節奏。允許替換資料、標題、旁註、來源與必要佈局；禁止脫離模板另畫一張「看起來差不多」的圖，禁止拼接多個模板造混合圖型，禁止退回圖表庫預設樣式。
預設選型順序固定。 先完整比較 Lupi Editorial（L1–L15），再比較 Lupi Basics（F1–F13）。只要其中存在能誠實承載資料、容納標籤且可讀的模板，就必須從這兩組中選擇。
Glance 是預設降級方案，不是並列首選。 只有 Lupi Editorial 與 Lupi Basics 都不適配，或使用者明確要求 Glance、dashboard、監控、週報、三秒快讀時，才使用 Glance。降級前必須寫明 Lupi / Basics 不適配的具體原因。
庫外新造是最後手段。 Lupi、Basics、Glance 和互動模板都無法承載時，才能走第六節翻譯流程；新圖仍必須繼承最接近 gallery 模板的視覺語法和程式碼結構。

一、工作流程（每次請求都走這六步）

判資料形狀。 別問使用者要什麼圖，看他的資料長什麼樣：幾個類目的比較？帶時間的序列？佔比？帶正負？多對一歸屬？網路？逐條記錄的分佈？形狀是選圖的主鍵。
先審計 Lupi 與 Basics。 按資料形狀掃描所有能承接它的 Lupi Editorial（L1–L15）與 Lupi Basics（F1–F13）候選。至少比較 3 個候選；如果不足 3 個，就列出全部候選。比較語義契合、單位誠實、標籤容納、閱讀速度、敘事張力和本批次是否重複。
必要時才檢查 Glance。 只有 Lupi 與 Basics 候選全部失敗，或使用者明確要求 Glance / dashboard / 監控 / 週報 / 三秒快讀，才掃描 Glance（G1–G18）。選擇 Glance 時記錄為什麼 Lupi 與 Basics 無法承載，不得只寫「Glance 更直觀」。
鎖定真實模板，再組織整頁。 每張圖必須記錄體系、圖型編號、gallery 檔案和卡內標題，並以該卡的真實結構與渲染程式碼為骨架。禁止先想好「這一頁要講六件事」，再臨時發明圖型；整頁敘事只能在模板鎖定之後組織。
按圖數規則組成批次。 一張圖只承擔一個獨立結論；去掉重複結論後，再按第 1.1 節的預設區間決定數量。模板需要全域分配：不重複、不堆同一種輪廓、不為了湊數硬加圖。
按模板渲染並自檢（第零、二、三、八節）。逐項核對成品是否仍能對應到所選 gallery 實作；不能因為改資料而換掉模板的核心幾何、編碼或動效。按第六點五節為整份交付選擇 Mono 或一套彩色預設；庫外圖型走翻譯流程（第六節）。

1.1 圖數規則

圖的數量由獨立結論數決定，不由「有多少資料列」決定，也不固定要求 5 張或 6 張：

請求類型	預設成品數量	規則
單一問題 / 單張表 / 一個指標	1	只交付最強的一張，不為了展示模板而擴展
兩到三個明確結論	2–3	每張圖承擔一個不同結論，可共享同一資料源
一篇文章、論文或完整案例	4–6	覆蓋總覽、構成、比較、關係或變化等不同資料形狀
使用者明確要求數量	按使用者要求	仍然刪除重複圖；不足以支撐時說明並少做

預設單頁上限為 6 張；超過 6 張就拆成多頁或按章節交付。
候選方案、Glance/Lupi 對照稿不計入最終圖數；它們是選擇過程，不是成品批次。
一頁多圖至少保留一個總覽結論，其餘圖必須提供新的比較維度、關係、時間變化或細節證據。
如果兩個圖表達同一個結論，只保留閱讀場合更合適、資料契約更誠實的一張。

二、Mono 語法 · 硬規則（違反即返工）

預設引用 mono-tokens.js（開源散佈時把內容內聯進 HTML）。與 token 衝突的取值一律以 token 為準。走彩色時只替換顏色 token，字型、圓角、佈局和動畫仍以 mono-tokens.js 為準。

顏色

預設只有紙灰 #F0EFEB 和炭黑 #1C1C1A 兩極，中間 7 級灰階 ladder。彩色例外按第六點五節從預設起步。
明度即資料：最重要 = 最黑（暗卡上反轉為最亮）。多系列按重要性沿 ladder 分配，不按順序隨便拿。
一律實心：不透明材質、不發光、不漸變濾鏡、無陰影。質感全靠明度對比和形狀。唯一例外：疊加型圖（Radial Patchwork）裡透明度本身編碼密度——那是資料，不是裝飾。
暗卡（<div class="card dark">）只給兩種圖：必須暗底襯托的形（花瓣、發光感絲線/網路）。預設淺卡；每螢幕（4 卡）最多 1 張暗卡。

排版

Inter 全家。標題 700 / 圖內數值 800 / 軸標籤 600。卡片結構固定四件套：結論式標題（h2）+ 副標題（圖例和時間範圍寫在這裡，用 · 分隔）+ 圖 + 來源行（全大寫、加字距）。
標題寫結論不寫圖型名："Revenue by plan" 可以，"柱狀圖" 不行；更好的是帶判斷的："Where we gained, where we bled"。
SVG 最小字型大小：半寬卡 6.5px、通欄 5.5px。裝不下的資訊改 hover 出，不許縮小字型大小硬塞。

形狀

卡片圓角 24px，無邊框無陰影，靠留白分卡。柱端膠囊圓角（豎柱圓上端、橫柱圓外端）。
柱狀圖不斷軸。 柱的契約是長度∝數值，斷軸毀契約。極端值場景的正確做法：①讓極端值沖天（最誠實）②主圖+放大鏡小圖 ③撕柱不撕軸（明說畫不下）。
花瓣皮（粗黑縫+圓角扇瓣）只適用等分或近似等分的徑向圖。寬窄懸殊的扇區會相互遮蔽，降低可讀性。

動畫

入場動畫預設開，quarticOut 快進快停，不彈跳（波浪入場可用 elasticOut）。點陣 stagger 8–15ms/個，條形 80–130ms/根。
統一 reveal 機制：滾入視野才播 + 點選重播（用 token 裡的 obsReveal，帶 timer 清理）。
必須帶 prefers-reduced-motion 降級（token 的 CSS 已含）。
動畫不可優於結構：一個效果如果需要發明新佈局才能安放，不配存在（effectScatter 教訓）。

資料

演示資料用 token 的 rnd(i,k) 確定性偽隨機，禁用 Math.random()——重新整理必須長一樣。
數值和視覺嚴格成正比。面積編碼用 Math.sqrt(v) 換算半徑，不許拿數值直接當半徑。

三、兩個風格系的分工

同一份 mono 色板下有兩種世界觀，選哪個看場合和讀者願意花幾秒：

	Glance 系（18 張）	Lupi 系（細讀，15 張）
基本單元	形狀（粗柱、大弧、色塊）	記錄（一個點 = 一條資料）
線條	2px+，理直氣壯	0.5–0.7px 髮絲
聚合	提前聚合好，給結論	拒絕聚合，攤開原材料
讀法	掃一眼（<10s）	湊近讀（30s+）
場合	週報、dashboard、隨手貼	年報、對外故事頁、海報
引擎	Chart.js / ECharts	手寫 SVG

預設策略：Lupi Editorial → Lupi Basics → Glance。 沒有明確場合時，禁止預設 Glance。放年報、公眾號長文、海報、開源 README、作品集時先選 Lupi Editorial；資料較少或適合熟悉圖型時再選 Lupi Basics。只有前兩組都沒有合適模板，或使用者明確要 dashboard、監控、週報、三秒快讀時，才進入 Glance 候選池。

全量候選審計不是「把所有圖都做一遍」。 先用資料形狀篩出能編碼同一本體的候選，再把候選分成：

語義合適：每個點、線、面、串珠背後都有真實單位或明確聚合口徑。
視覺合適：標籤裝得下，密度足夠，讀者能按預期時間讀完。
敘事合適：圖形本身能承載這批資料要講的判斷，而不只是把數字擺出來。

最終選擇是三項的交集，不是「哪個模板檔案最容易複製」。預設審計先在 Lupi Editorial 與 Lupi Basics 內完成；只有兩組都失敗才擴展到 Glance。若同一批要做多張圖，再對候選做一次全域分配：模板不重複，形狀輪換，最多一張暗卡，避免整頁變成六張相似的環或橫條。

資料少（只有幾個百分比）不等於只能 Glance。 Lupi 化的正道是單位分解：把聚合數攤回可數單位（1 點 = 1 人 / 1 百分點），密度來自單位而不是記錄數。單位含義寫進副標題，只攤誠實單位（佔比加總 100 → 100 個點），不編造不存在的個體記錄。取整時如果加總不足 100（如 49.0+27.4+13.9+5.0+3.2 → 98），在底註寫明「另外 N 人被四捨五入吃掉了」，不湊假單位。

小資料走 Lupi 的路徑優先級（經多輪案例驗證）：

先全量掃描，再選程式碼骨架——基礎型組 F1–F13（templates/basics-gallery.html）是稀疏資料的 Lupi 詞彙：柱/折線/面積/環形/橫條/分組/堆疊/散點/瀑布/熱力/進度/啞鈴/矩形樹圖；編輯型 L1–L15 則提供逐記錄、單位分解、關係與旁註語法。不要因為 basics-gallery.html 裡有現成程式碼就直接選 F 圖。
用最接近本體的模板起步——多選題百分比優先比較 L15、F5、L2；100% 構成優先比較 L14、L5、F4、G4；漏斗優先比較 L13、F1/F5 的降級表達。選擇依據是資料編碼方式，不是檔案順序。
庫裡真沒有對應形狀才新造，且新造必須從 gallery 現有語法延伸（髮絲 tick、確定性 rnd 抖動、paint-order 光暈、全大寫註記），不引入庫外參照——「Lupi 風」指 gallery 那批圖的視覺語法，不是 Giorgia Lupi 本人的手繪風。
新造的小資料圖要配滿環境結構層：gallery 好看有一半靠無資料的家具（帳本紙橫線、虛線導軌、rim 刻度、每 10 單位的立柱網格、旁註引線）。資料層誠實稀疏，密度預算花在家具上。只畫資料 + 一根底線的小資料圖必然寒酸。

同一批產出（一頁多圖）裡模板不重複。 15 張 Lupi 系夠輪換；同一資料能被多個模板承接時，選這一批裡還沒用過的。

四、圖型決策樹（資料形狀 → 候選）

編號對應 catalog.md。這些只是候選召回表，箭頭和書寫順序不代表優先級。實際選擇必須遵守：先檢查全部 Lupi Editorial 與 Lupi Basics 候選，確認無合適模板後，才允許採用 Glance 候選。

少類目比較（≤8） → G3 Chunky Bars ⇄ 豎排 F1 Rung Bars / 橫排 F5 Tick Rows ⇄ L2 Dot Cascade（⚠️ cascade 類目名豎排，僅當名稱 ≤4 字或短縮寫時可用；中文長類目換 F5/L5/L12）
多選題百分比（各項獨立 0–100，加總可超 100） → G3 Chunky Bars ⇄ L15 Ballot Tally
多類目分佈（30–60 根） → G12 Stagger Wave
帶正負的分類數值 → G10 Diverging Bar
佔比 / 100% 構成 → G4 Dot Waffle ⇄ L14 Hundred Field ⇄ F4 Tick Donut（圓餅圖的預設替代）；近似等分且要門面 → G2 Petal Rose；佔比×強度雙編碼 → G13 Big Slice；按類堆疊 → F7 Stacked Rungs
兩時點對比（前後 / 今昔） → 類目級（≤6 類）→ F12 Dumbbell Queue（橫向，串珠 = 真單位）⇄ F6 Paired Rungs（並肩雙梯）；只有 2–4 條序列要畫趨勢線 → Glance chunky slope（粗線、大數、結論進標題）。交叉過多的斜率圖會顯著降低可讀性，不要為了 Lupi 化增加裝飾結構。
日序列（≤30 天，帶區間） → G1 Range Capsules ⇄ 逐日讀數 F2 Hairline Line ⇄（90 天級、要肌理）L3 Barcode Lollipop；30–60 天看形態 → F3 Hairline Area
累計增長 → G18 Draw-in + Counter
雙序列因果（投入 vs 產出） → G8 Rainfall
即時資料 → G17 Dynamic Stream
排名隨時間變 → G16 Bar Race
星期×小時×量 → G14 Single Axis ⇄ F10 Dot Heat
瀑布 / 增減分解（≤6 級） → F9 Rung Waterfall
單值進度（0–100%） → F11 Tick Gauge ⇄ G18 Draw-in + Counter
二維散點（≤20 點） → F8 Plumb Scatter；幾百點分佈 → G15 Jitter Strip
分組分佈、逐條記錄 → G15 Jitter Strip
分類×分類+量（矩陣） → 輕（≤100 格）L4 Arc Matrix ⇄ 重（大跨度、要旁註）L9 Bubble Almanac
多對一歸屬 → 造型強 L5 Radial Convergence ⇄ 帶名單 L12 Type Colonnade
漏斗 / 分階段遞減 → L13 Hourglass Stream
層級結構 → G7 Tree LR
層級 + 份額 / 權重（兩層、值為正數） → F13 Nested Treemap；只看誰屬於誰、不比較大小 → G7 Tree LR
事件序列生命史 → L11 Trend Lineage
多實體出生時間+現狀 → L1 Launch Fan
逐事件時刻分佈（一天內） → L10 Radial Patchwork
雙極量表（兩端都合法） → L7 Brand Spectrum。注意和單極打分（雷達）區分：單極用 ECharts 原生雷達
網路 → ≤15 節點 G6/G11 小圖；>15 或要查數 → B1 環形 / B2 力導向；多段路徑流向 → B3 Threads
多組×網格（要裝飾感） → L8 Dotty Matrix；要讀數 → 攤平用 G14
同一實體集多維度輪播（演示） → G9 Scatter Morph

F13 Nested Treemap 硬規則

只接收層級資料和非負權重；父級值由子級求和，禁止父子總數互相矛盾。面積直接交給 ECharts treemap 佈局，不再對值開方。
預設展示兩層（父組 + 葉子）。超過兩層且讀者需要逐層查詢時才開啟 drill-down；普通靜態交付保持 nodeClick:false，避免誤觸改變視圖。
Mono 的灰階只表示層級，不給每個葉子隨機分配深淺；父組靠標題帶、組間留白和邊界區分。去掉顏色後仍能看清分組。
porcelain 用單色相明度表示有序的父組份額或層級；palm 用色相對應不超過 4 個頂層類目；wire 保持灰階，只允許一個明確主角使用 HERO。
面積已經表達數值時，顏色不得再次無說明地重複同一數值。副標題必須寫清 area = ...，使用彩色時再寫清 color = ...。
葉子超過 30 個、標籤大面積省略，或最小矩形小到無法形成穩定熱區時，先合併長尾為 Other、拆成多張，或改用 G7 / L12 / B 系關係圖。
Tooltip 至少顯示完整層級路徑、原始值和總量佔比；卡內標籤放不下就隱藏，不縮到低於最小字型大小。

五、互動三問（決定靜態還是可互動）

按順序問：

這根線/點背後有沒有一條真實記錄？ 沒有（純肌理裝飾，如 Cluster Field 的輻條、Hourglass 的淌線）→ 禁止加互動，給沒有內容的元素加 hover 是欺騙。
有記錄 → 不點能不能讀出來？ 元素 <50 且兩端有標註（如 Colonnade）→ 靜態夠用，hover 是錦上添花。
元素 >50 根或多段路徑（如 Threads）→ 必須 hover/pin，否則只是氛圍圖。互動實作參考 templates/big-threads.html：可見線下墊 9px 透明孿生線當熱區，hover 單線亮整條路徑、hover 標籤拉整束、點選釘住。

六、庫外圖型 · 翻譯流程

使用者要的圖不在 49 張裡（或發來一張參考圖）時，不是做不了，是現場造句。流程四步，第一步不許跳：

先回答本體：這個圖型編碼了什麼？每個視覺通道（位置/長度/角度/面積/明度/密度）分別對應哪個資料維度？答不出來就問使用者拿資料結構。抄形不抄魂 = 白做（pictorial bar 曾把「符號計數」錯做成「樹長高」，返工）。
找最近的親戚：在 catalog 裡找資料形狀最像的一張當起點，繼承它的佈局骨架和動畫節奏。
用 token 造句：色板、字型、圓角、動畫參數全部從 mono-tokens.js 拿，不許發明新顏色新字型大小。產出必須和庫裡的圖「一眼一家人」。走彩色時顏色改從 color-presets.js 的單一預設中取，其他 token 仍以 mono-tokens.js 為準。
過第二節硬規則和第八節自檢，和庫內圖同一標準。

參考圖翻譯的附加規則：識別參考圖屬於哪個流派（Glance or 編輯部），編輯部風格的密度、旁註、手繪感（blob）是本體的一部分，別做收斂了——almanac 曾因「不敢擠」返工。

六點五、彩色（按場景自動選擇，單一色系）

Mono 是保底方案，不是未觸發彩色時的強制答案。 使用者沒有提顏色時也要根據資料語義、類目數量、閱讀場景和內容氣質評估是否適合彩色；適配關係不明確，或顏色沒有帶來真實資訊價值時，回到 Mono。

彩色初稿從三套預設中選擇一套，色值在 color-presets.js，樣張在 templates/color/。預設用於快速得到穩定、統一的第一版，不是鎖死的色板。使用者要求「這個藍再深一點」時，在當前色系內繼續調整；使用者明確給出品牌色、色值或完整色板時，按下規則建立 custom 色板。調整後必須重新檢查對比度、視覺主次和資料語義。

同一份 HTML 或同一組交付必須先鎖定一個全域色彩系統：Mono、porcelain、palm、wire 或一套 custom。 所有圖共享該選擇。若其中某張圖不支援已選系統，不得單獨換色；改選一套全域相容的系統，或整組退回 Mono。

結構正本永遠是原版 gallery。 查渲染程式碼去 templates/ 根目錄的 gallery，templates/color/ 只查配色。先按第零節選定結構，再決定是否換膚。

用不用彩色

按以下優先級判斷：

使用者明確指定。 使用者要求某種顏色、氣質或預設時優先服從，但仍要通過容量、對比度和資料語義檢查。
Agent 自動選擇。 即使使用者沒提顏色，只要資料形狀和場景與某套預設有清楚的對應關係，就可以自動使用：有序單序列適合 porcelain；少量無序類目適合 palm；需要一個受控視線落點適合 wire。
關係不明確就用 Mono。 類目過多、高密度記錄、顏色沒有穩定含義，或整組圖無法共享同一預設時，使用 Mono。

彩色不是升級版，而是 Agent 可以主動選擇的語義工具。交付時用一句話說明所選色系及其承擔的資料含義。

自訂色板（只在使用者明確要求時啟用）

Agent 不得自行發明第五套預設審美。只有使用者給出明確色值、品牌色、品牌規範或「沿用這張參考圖的配色」時，才建立 custom 色板；僅說「好看一點」仍從三套內建預設選擇。

先確定顏色邏輯，再分配色值。 有序資料用單色相明度梯；無序類目用分類色；需要聚焦時用中性色 + 一個強調色。禁止先拿到五個顏色，再平均撒到所有元素上。
建立完整角色，不直接散落 hex。 custom 至少定義 BG、TXT、MUT、GRID、DATA；需要重點時再定義 HERO，有序資料定義 RAMP，分類資料定義 CAT。成品內聯一個 CUSTOM 物件，所有圖從角色取色。
按輸入數量解釋。 1 個顏色生成同色相明度梯；2 個顏色預設分為主資料色 + 強調色，不自動當作兩個平等類目；3–6 個顏色只有在資料確有對應類目時才進入 CAT。超過 6 個先合併類目、改用位置/標籤，或退回 Mono。
允許派生明暗，不允許偷渡新色相。 淺色由使用者色與 BG 混合，深色由使用者色與 TXT 混合；不得借用 porcelain、palm、wire 的色值補齊 custom。
對比度是硬門。 正文和小標籤相對背景至少 4.5:1，大字至少 3:1；關鍵邊界、資料形狀和互動狀態相對相鄰顏色至少 3:1。不達標時優先調整明度，不擅自改變使用者指定的主色相。
顏色不能成為唯一線索。 分類仍帶標籤，序數仍保留位置/長度/面積，強調仍有標題或旁註說明。色覺異常使用者去掉顏色後，圖的結構仍應讀得懂。
一次只鎖定這一套 custom。 custom 不與任何內建預設混用；多圖交付共享同一個 CUSTOM。除非使用者明確要求把品牌色固化為專案級預設，否則 custom 只內聯在當前成品，不回寫 color-presets.js。

使用者後續要求「再深一點」、「背景暖一點」或替換某個色值時，修改對應角色並重新檢查整套對比度和語義映射，不只改被點名的那一個元素。

選哪套：先看資料形狀，再看氣質

資料形狀	允許	原因
有序 / 單序列（進度、熱力、時間序列、單指標、排名）	porcelain、wire	明度即資料的契約仍然成立
無序類目 ≤4	palm	色相對應類目
無序類目 5–6	palm（勉強）	依靠明度和飽和度輔助區分
類目 >6	Mono 灰階	彩色預設容量不足
需要克制但要一個視線落點	wire	灰階承載資料，橙色只標主角

使用者會說	預設	氣質
藍、冷、學術、理性、嚴肅、科技感	porcelain	單色相藍階
綠、暖、自然、溫柔、復古、莫蘭迪	palm	綠黃低飽和，琥珀點睛
黑白、克制、雜誌感、編輯部	wire	黑灰加一點螢光橙

彩色硬規則

同一交付只用一種色彩系統。 一張圖、同一份 HTML 或同一組姊妹圖只能使用 Mono、color-presets.js 的一套預設，或一套使用者明確要求的 custom。禁止預設彼此混用，也禁止 custom 借用內建預設補色。
線寬 ×1.8、透明度地板 .85。 灰階下的髮絲線換成淡色後容易消失；dot heat 除外。
每張圖至少 3 個色階或色位。 只用 1–2 個顏色時退回灰階。
顏色必須連接真實維度。 序數梯接數值，分段色接月份或區段，分類色接類目；底註寫清顏色在編碼什麼。
強調色只給一個主角。 第二個主角會消解強調。
暗卡資料色必須亮於卡底。 暗底大圖使用 preset 的 DARK 塊。big-circular / big-force / big-threads 只有 porcelain 和 palm；wire 使用原版 Mono 大圖。
palm 中 DATA 和 HERO 必須不同。 琥珀和橄欖明度接近，不要把兩者當作平等類目色。

七、什麼時候說不

敢拒絕比什麼都接更可信。以下情況不做，並給替代：

斷軸柱狀圖 → 拒絕，給三個誠實方案（沖天 / 放大鏡 / 撕柱不撕軸）。
發光 / 玻璃擬態 / 3D → 拒絕，保持現有視覺語法。自訂色值按 custom 規則映射；跨色彩系統混用拒絕。
拿多色相畫單序列 → 拒絕。給 porcelain、wire 或退回 Mono。
類目 >6 還要彩色 → 拒絕，退回 Mono 灰階。
地圖類（choropleth、軌跡圖）→ 庫裡沒有地理管線，老實說做不了，別硬畫走樣的。
給純裝飾元素加互動（第五節第 1 問）→ 拒絕並解釋。
雷達圖重構 → 不重構，用 ECharts 原生雷達 + Mono token 換膚（實測過：展示場景裡「認得出的圖型」有價值）。
資料太少撐不起所選圖型（如 3 個節點要力導向）→ 降級到更簡單的圖並說明。

八、交付前自檢清單

數值和視覺成正比？（面積用了 sqrt？柱沒斷軸？）
色板是否受控？整份 HTML 或同一組交付是否只使用 Mono、單一內建預設或單一 custom？Mono 中出現任何非 ladder 顏色即返工；內建彩色出現另一套預設顏色即返工；custom 是否只從 CUSTOM 角色取色並通過對比度檢查？
標籤會不會重疊？（barcode 教訓：鄰近峰值標籤要強制最小間距）
最小字型大小踩線沒有？（半寬 6.5 / 通欄 5.5）
演示資料是 rnd 確定性的？重新整理兩次長得一樣？
reveal 正常？（滾入播、點選重播、timer 不疊加、reduced-motion 降級在）
node --check 過語法（把 <script> 內容抽出來查）。
卡片四件套齊全？標題是結論不是圖型名？
副標題把圖例說清了？（讀者不看程式碼只看這一行）
是否完成全量候選審計？至少寫下 3 個候選和淘汰理由，而不是只記錄「採用了哪個模板」。
如果是一頁多圖，模板是否全域分配過？有沒有相似輪廓重複、暗卡過量、所有圖都變成一種徑向圖？
每張圖是否記錄了圖型編號、gallery 檔案和卡內標題？成品的核心結構是否確實來自該模板，而不是重新發明？
如果使用 Glance，是否寫明 Lupi Editorial 與 Lupi Basics 為什麼都不適配？如果沒有，返工回到 Lupi / Basics。
最後一問：這張圖放回所選 gallery 的對應卡片旁邊，是不是同一個模板家族，而不只是「風格有點像」？

九、單檔案模板骨架

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Mono — {圖名}</title>
<!-- 需要 ECharts 時： -->
<script src="https://cdn.jsdelivr.net/npm/echarts@6/dist/echarts.min.js"></script>
<!-- 需要 Chart.js 時（G1 / G3）： -->
<!-- <script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="{MONO.FONT.link}" rel="stylesheet">
<style>/* 內聯 MONO.CARD_CSS */</style>
</head>
<body>
<div class="grid2">
  <div class="card"><!-- 或 card dark / card wide -->
    <h2>{結論式標題}</h2>
    <div class="sub">{說明} · {圖例} · {時間範圍}</div>
    <!-- 圖容器按引擎三選一： -->
    <div class="ch" id="ch"></div><!-- ECharts -->
    <!-- 手寫 SVG： <svg id="ch" viewBox="0 0 400 320"></svg> -->
    <!-- Chart.js（G1/G3）： <div class="wrap"><canvas id="ch"></canvas></div>，配 .wrap{position:relative;height:320px} -->
    <!-- ⚠️ Chart.js 必

…

[此處已截斷以進行翻譯]

Lieflat Charts — 圖表品味法典