從 Claude Code DataViz Skill 看數據形態選擇choosing-a-form 教你在配色之前先定圖表形式【免費下載鏈接】system_prompts_leaksExtracted system prompts from Anthropic - Claude Fable 5, Opus 5, Claude Design, Claude Code. OpenAI - ChatGPT GPT-5.6-Sol, Codex. Google - Gemini 3.5 Flash, 3.1 Pro, Antigravity. xAI - Grok, Cursor, Copilot, VS Code, Perplexity, and more. Updated regularly.項目地址: https://gitcode.com/GitHub_Trending/sy/system_prompts_leaks在 system_prompts_leaks 倉庫收錄的 Claude Code 數據可視化技能DataViz skill中references/choosing-a-form.md是整套作圖流程的第一步它回答這份數據該用哪種形式呈現并且明確了一個反直覺的原則——形態決策必須發生在配色之前而且正確的形式有時根本不是圖表。讀完本篇你將掌握一套可直接落地的形態判定法先判斷是不是圖表再按讀者的任務映射到具體圖表類型最后用系列數量階梯控制分類色用量——并能把它與同技能的色板校驗腳本、標記規格串聯成完整的交付流程。一、方法論定位形態是第一步顏色排最后DataViz skill 的主入口 SKILL.md 把把圖做好看改寫成了七步可檢查流程其第一條就是Pick the form選擇形態并直接指向本文檔What is the datas job — magnitude, identity, polarity, a single headline, change-over-time? The job picks the chart type, and sometimes the answer isnot a chart.choosing-a-form.md的開頭同樣立規矩Decide thisbeforecolor. The datas job picks the form — and sometimes the right form is not a chart.在配色之前決定數據的任務決定形態——有時正確的形態根本不是圖表。原文還點出了多數爛圖的通病Most bad charts pick colors first多數壞圖表先挑了顏色。也就是說這套方法把形態當作流程里的硬約束而不是審美偏好。二、第一問它到底是不是圖表文檔的第一張決策表覆蓋數據不是圖表的四種情形。完整繼承如下數據是……用不要用單個當前值也許附一個趨勢Stat tile數值 增量 迷你趨勢線單條柱狀的條形圖少量 headline 數字KPI rowstat tile 排成一行分組柱狀圖一個儀表盤主打的那一個數字Hero figure≥48px無襯線-單個比率對比一個上限Meter同一色階的軌道兩片扇形的餅圖超過約 7 個都承載含義的類別表格或表格 圖表更多顏色這張表在同技能其他參考文件中有明確的下游規格支撐可以印證每條用/不要用背后的實現約定Stat tile 有固定契約marks-and-anatomy.md 定義其結構為label句子式大小寫不帶尾隨冒號·valueSans semibold自動緊湊化1,284 / 12.9K / $4.2M·delta可選帶符號、相對命名周期顏色 方向 × 上升是否為好·trend可選12 點 sparkline用弱化的中性色當前周期用強調色。Meter 的軌道必須是同一色階的淺一級藍對藍而非白色軌道讓狀態在整個條上可讀填充承載嚴重度accent → warning → danger。Hero figure 每視圖嚴格只能有一個≥48px且必須與全站同為無襯線字體——用 display 或襯線字體會被 anti-patterns.md 判為 off-brand decoration。超過約 7 個有意義類別時用表格anti-patterns 里對應條目是 More than ~7 color classes carrying meaning理由是 Past ~7 bins, adjacent classes blur超過 7 個分箱后相鄰類別開始模糊。值得注意的是stat tile、hero figure 這類數字即圖表的形式在整個流程中享有特殊豁免interaction.md 指出唯一可以省略 hover 層的形態是沒有繪圖區的裸 stat tile。三、任務 → 類型映射表如果確認圖表是對的文檔給出第二張表按讀者必須完成的任務選類型。完整繼承任務讀者必須做什么默認形式顏色任務比較大小低 → 高bar / column網格場景用heatmapsequential單一色相隨時間的趨勢line單一序列用 areasequential 或 1 個 categorical區分不同序列grouped/stacked bar、多線categorical一個序列是重點其余是背景emphasis高亮一個其余置灰1 個色相 灰高于/低于基線相對目標的差值diverging bar或 line 對比基線diverging部分對整體stacked bar類別多/名稱長時改橫向categorical有序刻度的份額Likert、情感、同意?不同意diverging stacked bar以中性點居中diverging每個條目的 之前 → 之后dumbbell1 個色相2 個深淺這張表的顏色任務列與 color-formula.md 的四種工作一一對應categorical身份、sequential幅度、diverging極性、status狀態。幾個關鍵行的取舍邏輯值得展開emphasis 行是該表里被文檔自己點名為最被低估的形式下一節詳述。它的顏色任務只有1 個色相 灰因此對色板的要求最低。diverging 行區分了兩種帶中心的場景連續極性與有序離散份額Likert/情感。兩者都要求中性點為灰且兩極必須讀起來相反——參考色板 palette.md 明確記錄 blue?aqua 被否決兩者都偏冷最終選 blue?red 加灰色中性點。部分對整體只認 stacked bar。anti-patterns 的對應條目是 A donut/pie for comparing close values結論是 A bar, or the numbers. Part-to-whole at a glance only, ≤ 6 segmentscomponents.md 也把 part-to-whole 掛在 stacked bar 上donut stays deprioritized。表格中網格場景heatmap對應 sequential 編碼即連續幅度最淺一級表示接近零允許貼近背景色。參考實例中 sequential 默認色相為 blue100→700 全階見 palette.md。四、表格背后的四條規則文檔在映射表之后給出四條元規則它們是表的憲法完整繼承Sequential 是安全的默認值。單一色相、越多越深one hue, more-is-darker。它易讀、一致、難以誤讀——除非數據的任務明確是身份identity或極性polarity否則就用它。Categorical 只用于序列本身就是主角的場景——且有真實代價它可能淹沒那個真正重要的數據點。如果故事是這一個漲了那是emphasis不是 categorical。anti-patterns 把這條寫成獨立條目 Eight categorical hues when the story is one number并稱其為 The most common way a chart misses its point圖表最常見跑題方式。Emphasis 最被低估的形式。一個序列用強調色相其余用弱化灰。文檔原話Often the honest answer to make this chart clearer.對把這張圖弄得更清楚這個要求它常常是誠實的答案。Texture 是可選表達不是默認形式。它只在無障礙完全色覺障礙 CVD、打印/導出、forced-colors場景下掙得位置永不做裝飾。文檔指向marks-and-anatomy.md的 texture 小節一種方向性手繪填充只用45° 與其 135° 鏡像橫豎方向會被讀成網格線/柱條在數值刻度上按大小有序旋轉由無障礙設置觸發而非默認開啟。這四條規則解釋了表格為什么長成那樣sequential 覆蓋比較大小這類默認任務categorical 與 emphasis 的邊界由誰才是主角劃分diverging 獨占極性任務texture 則被排除在形式之外降級為備用通道。五、系列數量階梯categorical 顏色的配額制文檔最后一張表規定 categorical 色相按系列數量分級處理完整繼承系列數處理方式1–3純顏色對所有人都舒適直接標注direct-label4相鄰形式stacks、bars、lines仍可守門但直接標注變為強制——因為黃與橙現在同屏全對形式scatter、bubble、choropleth、small multiples上限為3——要么折進 Other要么分面facet而不是硬塞第 4 個5–6軟上限用圖例或 small multiples7–8token 天花板再往上就把尾部折進 Other、分面為 small multiples或改用復合編碼色相 × 形狀表后還有一句硬性禁令值得單列Never solve too many series by generating more hues. A generated 9th hue is indistinguishable from an existing one under CVD and breaks every check.永遠不要靠生成更多色相來解決系列太多。生成出來的第 9 個色相在色覺障礙下與現有色相無法區分并且破壞所有檢查。這個3 系列上限不是拍腦袋而是參考色板實測數據推出來的。palette.md 記錄了默認 8 槽色板在--pairs all全對檢查下的表現完整 8 個色相在任何排序下都無法通過 28 對全檢——因為此時對列與順序無關只有前 3 槽在 light/dark 兩種模式下都能通過全對校驗最劣對 CVD Delta E 9.2 light / 9.4 dark正常視覺 24.0 light / 20.9 dark。一旦放進第 4 槽黃色與橙色同屏該對直接不及格正常視覺 13.7 light低于 15 的硬門檻CVD 4.8 dark。這個校驗如何落地見 color-formula.md 的六項檢查第 4 項 CVD 分離度OKLab Delta E ×100目標 ≥8地板 ≥6 且僅允許配合次級編碼外加正常視覺地板最劣對 ≥15硬門檻次級編碼不能豁免并規定scatter、bubble、choropleth、small multiples 必須傳--pairs all。其執行載體是同技能的可運行腳本 validate_palette.jsPython 孿生實現 validate_palette.py典型命令node scripts/validate_palette.js \ #2a78d6,#eb6834,#1baf7a,#eda100,#e87ba4,#008300,#4a3aa7,#e34948 --mode lightscripts/相對于該技能的基目錄scatter/bubble/choropleth/small multiples 類圖表需追加--pairs allordinal 色階用--ordinal切換檢查集。SKILL.md 把這個腳本稱為可計算的、必須運行而不是目測的一環——the color part is computable, so compute it。六、從形態到交付把選擇串起來回到流程視角choosing-a-form.md的輸出直接決定后續步驟的參數形態決定組件類型——bar / line / stacked / area / heatmap / stat tile / meter / hero figure組件清單與層級見 components.mdTier 1 為 bar、line、stat tile、meterTier 2 補上 area、sparkline、heatmap 等。形態中的顏色任務列決定調色模式sequential 單色相、categorical 固定 8 槽順序never cycled、diverging 雙色相 灰中性點、status 固定四階且永不復用給系列 4。系列數決定是否觸發直接標注強制項≥4、是否落到 Other/facet 折尾以及是否改用--pairs all全對校驗。無論選到什么形態標記規格固定不變柱寬 ≤24px、線條 2px、marker ≥8px、面積填充 ~10% 不透明度、網格線 1px 實線且低調、2px 表面色間隙與 2px 表面色環、選擇性直接標注詳見 marks-and-anatomy.md交互層默認交付line/area 配十字線 tooltipbar/dot/cell 配逐標記 hover且所有值必須另有一條無 hover 的可達路徑表格視圖。可以推斷這套設計的意圖是讓選形態成為一個先于審美、可審計的決策點兩張決策表給出可查的默認值四條元規則解釋取舍邊界數量階梯把 categorical 色相當成有配額的稀缺資源而配額上限本身由倉庫里可運行的校驗腳本實測數據背書。對使用者而言最實用的工作流就是文檔字面給出的順序——先問任務查表定形再談顏色最后跑腳本驗證。參考文件索引文件回答的問題choosing-a-form.md本文主題選哪種圖表類型 / 是不是圖表SKILL.md七步流程與不可協商規則color-formula.md四種顏色任務、六項檢查、snap-to-passingpalette.md參考色板實例8 槽分類色、sequential 階、diverging 對、status 四階marks-and-anatomy.md標記規格、間距、stat tile / meter / hero figure 契約、textureinteraction.mdtooltip、hover、過濾器的組成規則components.md圖表由哪些部件組成、組件分層anti-patterns.md反例目錄每張圖都應對照檢查validate_palette.js / validate_palette.py可運行的六項檢查校驗腳本JS/Python 孿生實現【免費下載鏈接】system_prompts_leaksExtracted system prompts from Anthropic - Claude Fable 5, Opus 5, Claude Design, Claude Code. OpenAI - ChatGPT GPT-5.6-Sol, Codex. Google - Gemini 3.5 Flash, 3.1 Pro, Antigravity. xAI - Grok, Cursor, Copilot, VS Code, Perplexity, and more. Updated regularly.項目地址: https://gitcode.com/GitHub_Trending/sy/system_prompts_leaks創作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考 從 Claude Code DataViz Skill 看數據形態選擇：choosing-a-form 教你在配色之前先定圖表形式
從 Claude Code DataViz Skill 看數據形態選擇choosing-a-form 教你在配色之前先定圖表形式【免費下載鏈接】system_prompts_leaksExtracted system prompts from Anthropic - Claude Fable 5, Opus 5, Claude Design, Claude Code. OpenAI - ChatGPT GPT-5.6-Sol, Codex. Google - Gemini 3.5 Flash, 3.1 Pro, Antigravity. xAI - Grok, Cursor, Copilot, VS Code, Perplexity, and more. Updated regularly.項目地址: https://gitcode.com/GitHub_Trending/sy/system_prompts_leaks在 system_prompts_leaks 倉庫收錄的 Claude Code 數據可視化技能DataViz skill中references/choosing-a-form.md是整套作圖流程的第一步它回答這份數據該用哪種形式呈現并且明確了一個反直覺的原則——形態決策必須發生在配色之前而且正確的形式有時根本不是圖表。讀完本篇你將掌握一套可直接落地的形態判定法先判斷是不是圖表再按讀者的任務映射到具體圖表類型最后用系列數量階梯控制分類色用量——并能把它與同技能的色板校驗腳本、標記規格串聯成完整的交付流程。一、方法論定位形態是第一步顏色排最后DataViz skill 的主入口 SKILL.md 把把圖做好看改寫成了七步可檢查流程其第一條就是Pick the form選擇形態并直接指向本文檔What is the datas job — magnitude, identity, polarity, a single headline, change-over-time? The job picks the chart type, and sometimes the answer isnot a chart.choosing-a-form.md的開頭同樣立規矩Decide thisbeforecolor. The datas job picks the form — and sometimes the right form is not a chart.在配色之前決定數據的任務決定形態——有時正確的形態根本不是圖表。原文還點出了多數爛圖的通病Most bad charts pick colors first多數壞圖表先挑了顏色。也就是說這套方法把形態當作流程里的硬約束而不是審美偏好。二、第一問它到底是不是圖表文檔的第一張決策表覆蓋數據不是圖表的四種情形。完整繼承如下數據是……用不要用單個當前值也許附一個趨勢Stat tile數值 增量 迷你趨勢線單條柱狀的條形圖少量 headline 數字KPI rowstat tile 排成一行分組柱狀圖一個儀表盤主打的那一個數字Hero figure≥48px無襯線-單個比率對比一個上限Meter同一色階的軌道兩片扇形的餅圖超過約 7 個都承載含義的類別表格或表格 圖表更多顏色這張表在同技能其他參考文件中有明確的下游規格支撐可以印證每條用/不要用背后的實現約定Stat tile 有固定契約marks-and-anatomy.md 定義其結構為label句子式大小寫不帶尾隨冒號·valueSans semibold自動緊湊化1,284 / 12.9K / $4.2M·delta可選帶符號、相對命名周期顏色 方向 × 上升是否為好·trend可選12 點 sparkline用弱化的中性色當前周期用強調色。Meter 的軌道必須是同一色階的淺一級藍對藍而非白色軌道讓狀態在整個條上可讀填充承載嚴重度accent → warning → danger。Hero figure 每視圖嚴格只能有一個≥48px且必須與全站同為無襯線字體——用 display 或襯線字體會被 anti-patterns.md 判為 off-brand decoration。超過約 7 個有意義類別時用表格anti-patterns 里對應條目是 More than ~7 color classes carrying meaning理由是 Past ~7 bins, adjacent classes blur超過 7 個分箱后相鄰類別開始模糊。值得注意的是stat tile、hero figure 這類數字即圖表的形式在整個流程中享有特殊豁免interaction.md 指出唯一可以省略 hover 層的形態是沒有繪圖區的裸 stat tile。三、任務 → 類型映射表如果確認圖表是對的文檔給出第二張表按讀者必須完成的任務選類型。完整繼承任務讀者必須做什么默認形式顏色任務比較大小低 → 高bar / column網格場景用heatmapsequential單一色相隨時間的趨勢line單一序列用 areasequential 或 1 個 categorical區分不同序列grouped/stacked bar、多線categorical一個序列是重點其余是背景emphasis高亮一個其余置灰1 個色相 灰高于/低于基線相對目標的差值diverging bar或 line 對比基線diverging部分對整體stacked bar類別多/名稱長時改橫向categorical有序刻度的份額Likert、情感、同意?不同意diverging stacked bar以中性點居中diverging每個條目的 之前 → 之后dumbbell1 個色相2 個深淺這張表的顏色任務列與 color-formula.md 的四種工作一一對應categorical身份、sequential幅度、diverging極性、status狀態。幾個關鍵行的取舍邏輯值得展開emphasis 行是該表里被文檔自己點名為最被低估的形式下一節詳述。它的顏色任務只有1 個色相 灰因此對色板的要求最低。diverging 行區分了兩種帶中心的場景連續極性與有序離散份額Likert/情感。兩者都要求中性點為灰且兩極必須讀起來相反——參考色板 palette.md 明確記錄 blue?aqua 被否決兩者都偏冷最終選 blue?red 加灰色中性點。部分對整體只認 stacked bar。anti-patterns 的對應條目是 A donut/pie for comparing close values結論是 A bar, or the numbers. Part-to-whole at a glance only, ≤ 6 segmentscomponents.md 也把 part-to-whole 掛在 stacked bar 上donut stays deprioritized。表格中網格場景heatmap對應 sequential 編碼即連續幅度最淺一級表示接近零允許貼近背景色。參考實例中 sequential 默認色相為 blue100→700 全階見 palette.md。四、表格背后的四條規則文檔在映射表之后給出四條元規則它們是表的憲法完整繼承Sequential 是安全的默認值。單一色相、越多越深one hue, more-is-darker。它易讀、一致、難以誤讀——除非數據的任務明確是身份identity或極性polarity否則就用它。Categorical 只用于序列本身就是主角的場景——且有真實代價它可能淹沒那個真正重要的數據點。如果故事是這一個漲了那是emphasis不是 categorical。anti-patterns 把這條寫成獨立條目 Eight categorical hues when the story is one number并稱其為 The most common way a chart misses its point圖表最常見跑題方式。Emphasis 最被低估的形式。一個序列用強調色相其余用弱化灰。文檔原話Often the honest answer to make this chart clearer.對把這張圖弄得更清楚這個要求它常常是誠實的答案。Texture 是可選表達不是默認形式。它只在無障礙完全色覺障礙 CVD、打印/導出、forced-colors場景下掙得位置永不做裝飾。文檔指向marks-and-anatomy.md的 texture 小節一種方向性手繪填充只用45° 與其 135° 鏡像橫豎方向會被讀成網格線/柱條在數值刻度上按大小有序旋轉由無障礙設置觸發而非默認開啟。這四條規則解釋了表格為什么長成那樣sequential 覆蓋比較大小這類默認任務categorical 與 emphasis 的邊界由誰才是主角劃分diverging 獨占極性任務texture 則被排除在形式之外降級為備用通道。五、系列數量階梯categorical 顏色的配額制文檔最后一張表規定 categorical 色相按系列數量分級處理完整繼承系列數處理方式1–3純顏色對所有人都舒適直接標注direct-label4相鄰形式stacks、bars、lines仍可守門但直接標注變為強制——因為黃與橙現在同屏全對形式scatter、bubble、choropleth、small multiples上限為3——要么折進 Other要么分面facet而不是硬塞第 4 個5–6軟上限用圖例或 small multiples7–8token 天花板再往上就把尾部折進 Other、分面為 small multiples或改用復合編碼色相 × 形狀表后還有一句硬性禁令值得單列Never solve too many series by generating more hues. A generated 9th hue is indistinguishable from an existing one under CVD and breaks every check.永遠不要靠生成更多色相來解決系列太多。生成出來的第 9 個色相在色覺障礙下與現有色相無法區分并且破壞所有檢查。這個3 系列上限不是拍腦袋而是參考色板實測數據推出來的。palette.md 記錄了默認 8 槽色板在--pairs all全對檢查下的表現完整 8 個色相在任何排序下都無法通過 28 對全檢——因為此時對列與順序無關只有前 3 槽在 light/dark 兩種模式下都能通過全對校驗最劣對 CVD Delta E 9.2 light / 9.4 dark正常視覺 24.0 light / 20.9 dark。一旦放進第 4 槽黃色與橙色同屏該對直接不及格正常視覺 13.7 light低于 15 的硬門檻CVD 4.8 dark。這個校驗如何落地見 color-formula.md 的六項檢查第 4 項 CVD 分離度OKLab Delta E ×100目標 ≥8地板 ≥6 且僅允許配合次級編碼外加正常視覺地板最劣對 ≥15硬門檻次級編碼不能豁免并規定scatter、bubble、choropleth、small multiples 必須傳--pairs all。其執行載體是同技能的可運行腳本 validate_palette.jsPython 孿生實現 validate_palette.py典型命令node scripts/validate_palette.js \ #2a78d6,#eb6834,#1baf7a,#eda100,#e87ba4,#008300,#4a3aa7,#e34948 --mode lightscripts/相對于該技能的基目錄scatter/bubble/choropleth/small multiples 類圖表需追加--pairs allordinal 色階用--ordinal切換檢查集。SKILL.md 把這個腳本稱為可計算的、必須運行而不是目測的一環——the color part is computable, so compute it。六、從形態到交付把選擇串起來回到流程視角choosing-a-form.md的輸出直接決定后續步驟的參數形態決定組件類型——bar / line / stacked / area / heatmap / stat tile / meter / hero figure組件清單與層級見 components.mdTier 1 為 bar、line、stat tile、meterTier 2 補上 area、sparkline、heatmap 等。形態中的顏色任務列決定調色模式sequential 單色相、categorical 固定 8 槽順序never cycled、diverging 雙色相 灰中性點、status 固定四階且永不復用給系列 4。系列數決定是否觸發直接標注強制項≥4、是否落到 Other/facet 折尾以及是否改用--pairs all全對校驗。無論選到什么形態標記規格固定不變柱寬 ≤24px、線條 2px、marker ≥8px、面積填充 ~10% 不透明度、網格線 1px 實線且低調、2px 表面色間隙與 2px 表面色環、選擇性直接標注詳見 marks-and-anatomy.md交互層默認交付line/area 配十字線 tooltipbar/dot/cell 配逐標記 hover且所有值必須另有一條無 hover 的可達路徑表格視圖。可以推斷這套設計的意圖是讓選形態成為一個先于審美、可審計的決策點兩張決策表給出可查的默認值四條元規則解釋取舍邊界數量階梯把 categorical 色相當成有配額的稀缺資源而配額上限本身由倉庫里可運行的校驗腳本實測數據背書。對使用者而言最實用的工作流就是文檔字面給出的順序——先問任務查表定形再談顏色最后跑腳本驗證。參考文件索引文件回答的問題choosing-a-form.md本文主題選哪種圖表類型 / 是不是圖表SKILL.md七步流程與不可協商規則color-formula.md四種顏色任務、六項檢查、snap-to-passingpalette.md參考色板實例8 槽分類色、sequential 階、diverging 對、status 四階marks-and-anatomy.md標記規格、間距、stat tile / meter / hero figure 契約、textureinteraction.mdtooltip、hover、過濾器的組成規則components.md圖表由哪些部件組成、組件分層anti-patterns.md反例目錄每張圖都應對照檢查validate_palette.js / validate_palette.py可運行的六項檢查校驗腳本JS/Python 孿生實現【免費下載鏈接】system_prompts_leaksExtracted system prompts from Anthropic - Claude Fable 5, Opus 5, Claude Design, Claude Code. OpenAI - ChatGPT GPT-5.6-Sol, Codex. Google - Gemini 3.5 Flash, 3.1 Pro, Antigravity. xAI - Grok, Cursor, Copilot, VS Code, Perplexity, and more. Updated regularly.項目地址: https://gitcode.com/GitHub_Trending/sy/system_prompts_leaks創作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考