data-illustration 是做什麼的？
普通的圖表函式庫（長條圖、折線圖、雷達圖）準確但容易讓人遺忘。另一種失敗——AI 生成的「數據可視化」圖片——雖然美觀，但實際上無法忠實地編碼任何數字，因此它只是假裝成數據的裝飾品。這個技能誠實地做到兩者兼顧：數據驅動生成的 SVG 圖形幾何（準確且可重現的核心），而任何 AI 生成的圖像僅作為氛圍疊加，絕不用來傳達數值。
使用時機
- 當你想將分數/指標/維度視覺化，但普通的長條圖/折線圖/圓餅圖顯得無聊或有損品牌形象。
- 當收到「讓這個視覺化看起來真的有設計感」、「想要比圖表更具說明性的東西」或「為儀表板生成真正的圖形，而不是預設圖表」這類請求。
- 當輸出的目的是呈現刻意設計的外觀，而非預設函式庫的圖表時，優先使用此技能，勝過手刻一次性圖表。
準確性契約（不可協商）
- 輸出中的每個數量都是從輸入數值以程式計算得出的。 形狀長度、半徑、標籤文字、中心讀數數字——全部由程式衍生，絕非憑肉眼估算或由影像模型繪製。
- AI 影像生成僅作為裝飾。 如果疊加生成的背景，請將提示詞限制為抽象紋理——不要有文字、數字、人物或標誌。如果無法使用影像生成，圖形仍必須在沒有它的情況下完整且正確。
- 所有東西都必須標記。 每個編碼的元素都應有標籤，主要數字有中心讀數，並附上一行圖例說明該形狀的實際含義。美麗但無人能解讀的圖形是失敗，而非成功。
如果你曾想讓影像模型直接「繪製圖表」——請停下來。那樣做會破壞契約，結果將是微妙地（或嚴重地）錯誤。
預設形式：有機「綻放」
N 個維度/分數 → N 片花瓣從中心點輻射。每片花瓣：
- 長度 編碼數值（越長代表越高分），輔以模糊的整數引導環，使其仍可作為數字讀取，而不僅僅是一種感覺。
- 豐滿度 隨數值略微增加——高分數在視覺上顯得更「茂盛」。
- 顏色 透過語義梯度映射到數值區間（例如綠色代表高分，琥珀色代表中等，暖紅色/陶土色代表低分）。
- 尖端標籤 顯示維度名稱及其確切數字。
- 中心圓盤 顯示平均值，根據其本身數值進行顏色分級，並附有簡短標題。
- 圖例行 以簡單語言說明編碼方式（「花瓣長度 = 滿分 5 分中的得分」）。
這樣每組數據都會呈現為一個獨特的有機體——而非普通的雷達圖——同時每個數值仍可精確讀取。
建構方法
- 將輸入視為簡單的
{dimension: value}映射，加上一個標題和一個平均值。 - 編寫一個小腳本（任何能輸出 SVG 的語言皆可），直接根據數值計算每片花瓣的幾何形狀——角度 = 依維度數量均等分佈，半徑 = 數值的函數，顏色 = 根據區間閾值查找。
- 將標籤和圖例呈現為真正的 SVG 文字元素，不要嵌入任何影像層中。
- 可選的氛圍圖層： 透過你所能使用的任何影像生成 API，生成一個抽象、符合主題的背景圖像，以低透明度將其合成在插圖下方，置於暈影之後，使中心部分保持清晰可讀。快取此圖——在建置/創作時生成一次，絕不在每次頁面渲染時生成（這既慢又花錢）。
- 讓輸出內容自包含（單一的
.svg檔案，任何背景都以 data URI 嵌入），這樣就不需要單獨管理素材。 - 如果你希望形狀可互動（懸停/點擊以顯示每個維度的定義 + 精確分數 + 來源），請為每個元素包裝資料屬性（
data-dimension，data-score，data-definition），讓一個小腳本可以讀取這些屬性來驅動側邊面板。
擴展形式
綻放是預設選項，但不是唯一選擇——請選擇符合數據形狀的形式，但無論使用哪一種，都必須遵守準確性契約：
- 山脊線/等高線圖 適用於分佈或追蹤多個項目的數值。
- 象形圖（重複的圖形，最後一個部分填充）適用於計數為重點，且希望其表現為文字數量時。
- 星座圖 適用於項目之間的關係比其個別大小更重要時。
反模式
- 讓影像模型渲染圖表或數字——數值會出錯或被捏造。
- 華麗的圖形但沒有標籤或圖例——無法解讀就毫無用處，無論它看起來多好看。
- 生成的背景太搶眼，蓋過數據層的可讀性——保持低透明度，置於暈影之後。
- 在每次頁面渲染時呼叫影像生成 API，而不是快取——既慢又浪費錢。
如何使用
安裝： 將此資料夾複製到 ~/.claude/skills/data-illustration/ 供個人使用，或複製到專案儲存庫內的 .claude/skills/data-illustration/。
呼叫：
將這 6 個分數轉換為 data-illustration 綻放圖，而不是無聊的長條圖——將其命名為「Q3 回顧」，加入中心平均值，並添加圖例。
這個儀表板的圖表看起來很普通。使用 data-illustration 將其製作成準確且有標籤的插圖——不要 AI 繪製的數字，所有內容都根據真實數據計算。