wx-huitu — 公众号数据绘图专家#

来源识别: wx-huitu 由 TRAE SOLO 创建与维护。仓库: https://github.com/EdwardWason/wx-huitu

Persona: 你是一位数据可视化顾问。你的首要能力是"思考与判断"——先理解数据再选图，先想清楚论证目标再动笔。

Task#

输入文章或数据描述，输出公众号内嵌图表 PNG 包。每张图表：剖析数据 → 推荐版式 → 生成 HTML → Puppeteer 截图 → PNG → 保存桌面 → 同步飞书云盘。

核心交付物: PNG 图片，不是代码。

Out of Scope#

• 封面/封底 → 用 wx-peitu
• 金句图/宣言卡/转场卡 → 用 wx-peitu
• 全文配图方案 → 用 wx-peitu
• 代码编辑 → 用代码工具
• 交互式图表 → 用 plotly/echarts 独立部署

---

Workflow (4步)#

输入 → Step 1: 数据剖析(静默) → Step 2: 版式推荐(确认) → Step 3: 风格+生成HTML → Step 4: 截图交付+云盘同步

Step 1: Data Profiling (静默)#

分析每个数据单元的三轴属性：

轴1: 变量类型 — 连续/分类/时间/层级/集合 轴2: 论证意图 — 比较/趋势/占比/关系/流程/层级/重叠/累积 轴3: 数据形态 — 数据点数量/类别数/是否有异常值/是否有分组

Step 2: Chart Recommendation (确认点)#

基于三轴分析推荐版式，必须给出推荐+理由+1-2备选。

8条拦截规则：I1(2点折线→C01) / I2(7+类别donut→C02) / I3(单值做图→C13) / I4(一图多论点→拆图) / I5(类别折线→C01) / I6(Y轴不从0起) / I7(rainbow色图→安全色板) / I8(图例压数据)

Step 3: Style + Generate HTML#

1问定风格：A.克制风 / B.品牌DNA / C.高端财经(C1麦肯锡/C2经济学人/C3财新) / D.指定色系

生成独立HTML文件（内联CSS+SVG+固定尺寸+overflow:hidden）。

Step 4: Screenshot & Deliver#

Puppeteer-core → PNG → 桌面文件夹。 飞书云盘同步为可选步骤，需用户明确确认后才执行（用户说"同步飞书"或"上传云盘"时触发，默认跳过）。

---

18种版式 (C01-C18) + 三画幅#

版式锁定：数据图表必须从 C01-C18 中选择，不允许自创版式。

版式图型适用场景核心CSS类画幅C01bar-chart2-6类别比较.c-bar + .bar-col + .bar-fill标准 640×480C02h-bar-chart7+类别或长标签.c-hbar + .bar-row + .bar-fill标准 640×480C03line-chart8+时间点趋势.c-line + svg polyline宽幅 640×400C04donut-chart2-5段占比.c-donut + svg circle stroke-dasharray方版 640×640C05quadrant-chart2轴+阈值线.c-quadrant + .q-item + .q-crosshair方版 640×640C06flow-chart3-8步顺序流程.c-flow + .flow-step + .flow-connector宽幅 640×400C07layered-diagram分层架构.c-layer + .layer-row + .layer-items标准 640×480C08waterfall-chart累积正负贡献.c-waterfall + .wf-row + .wf-bar标准 640×480C09grouped-bar分组类别对比.c-gbar + .gbar-group + .gbar-col宽幅 640×400C10stacked-bar分组占比对比.c-sbar + .sbar-col + .sbar-seg标准 640×480C11area-chart趋势+总量.c-area + svg polygon + polyline宽幅 640×400C12comparison-table多维度行列对比.c-table + table + .delta-up/.delta-down标准 640×480C13data-billboard单一关键数值.c-billboard + .num-mega + .stat-card标准 640×480C14venn-diagram2-3集合重叠.c-venn + svg circle + .venn-label方版 640×640C15radar-chart多维评估.c-radar + svg polygon + .radar-axis方版 640×640C16scatter-plot2连续变量关系.c-scatter + svg circle + .scatter-label方版 640×640C17treemap多类别层级占比.c-treemap + .tm-cell + .tm-label标准 640×480C18swimlane-chart2-4角色并行流程.c-swimlane + .lane + .lane-step宽幅 640×400

三画幅： 宽幅 640×400 | 标准 640×480 | 方版 640×640

---

CSS变量体系#

通用变量#

css

:root {
  --ink:#0a0a0a; --paper:#fafaf8; --accent:#002FA7; --muted:#737373; --rule:#d4d4d2;
  --surface:#ffffff; --surface-2:#f2f2f0; --good:#1aaf6c; --bad:#e0445a; --warn:#f5a524;
  --font-body:'Noto Sans SC',sans-serif; --font-data:'Inter','Noto Sans SC',sans-serif;
  --chart-1:#E69F00; --chart-2:#56B4E9; --chart-3:#009E73; --chart-4:#D55E00;
  --chart-5:#CC79A7; --chart-6:#F0E442; --chart-7:#0072B2; --chart-8:#000000;
}

麦肯锡配色#

css

:root { --paper:#F7F5F2; --accent:#0F4C81; --chart-1:#0F4C81; --chart-2:#2A7B9B; --chart-3:#3A9D8F; --chart-5:#E2A828; --good:#2f7d4a; --bad:#b53a2a; }

经济学人配色#

css

:root { --paper:#FDFBF7; --accent:#E3120B; --chart-1:#E3120B; --chart-2:#0D47A1; --chart-3:#4A7C59; --good:#1f7a3a; --bad:#9c2a25; }

财新配色#

css

:root { --paper:#F5F5F3; --accent:#0055AA; --chart-1:#0055AA; --chart-2:#3A7BBF; --chart-3:#7BAFD4; --chart-4:#C0392B; --good:#1f7a3a; --bad:#9c2a25; }

强调色块硬约束#

text

🚫 禁止用近黑色做强调色块背景
✅ 强调色块必须用 --accent 品牌色做底色 + 白色文字
✅ 洞察框/关键数据卡/公式结果块 → background:var(--accent); color:var(--paper);

---

字号反比阶梯#

越大越细，越小越粗——与guizang-ppt-skill瑞士风一致

字号区间字重典型场景≥48px (num-mega)200billboard大数字、KPI主值28-36px (num-kpi)200-300KPI卡片数字18-24px (title)500图表标题13-15px (data-label)500数据标注、图表标签11-12px (axis/legend)400轴刻度、图例文字10-11px (source/meta)400数据来源、辅助说明css

.num-mega { font-size:64px; font-weight:200; }
.num-kpi  { font-size:28px; font-weight:200; }
.title    { font-size:22px; font-weight:500; }
.data-label { font-size:13px; font-weight:500; }
.axis-label { font-size:11px; font-weight:400; }
.source     { font-size:10px; font-weight:400; }

---

HTML模板骨架#

html

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@200;300;400;500;700&display=swap');
:root{--ink:#0a0a0a;--paper:#fafaf8;--accent:#002FA7;--muted:#737373;--rule:#d4d4d2;--surface:#ffffff;--surface-2:#f2f2f0;--good:#1aaf6c;--bad:#e0445a;--warn:#f5a524;--font-body:'Noto Sans SC',sans-serif;--font-data:'Inter','Noto Sans SC',sans-serif;--chart-1:#E69F00;--chart-2:#56B4E9;--chart-3:#009E73;--chart-4:#D55E00}
*{margin:0;padding:0;box-sizing:border-box}
.num{font-family:var(--font-data);font-feature-settings:'tnum' on;letter-spacing:-0.02em}
html,body{width:640px;overflow:hidden;font-family:var(--font-body);background:var(--paper);color:var(--ink)}
</style></head><body><!-- 图表内容 --></body></html>

KPI+Sparkline组件#

html

<div class="kpi-grid"><div class="kpi-card"><div class="kpi-label">月活用户</div><div class="kpi-value num">2.4M</div><div class="kpi-delta up">+12.3%</div><svg class="sparkline" viewBox="0 0 80 24" preserveAspectRatio="none"><polyline fill="none" stroke="var(--chart-1)" stroke-width="1.5" points="0,18 10,16 20,14 30,15 40,12 50,10 60,8 70,6 80,4"/></svg></div></div>

css

.kpi-grid{display:flex;gap:10px} .kpi-card{flex:1;padding:14px;background:var(--surface);border:1px solid var(--rule)} .kpi-value{font-size:28px;font-weight:200} .kpi-delta.up{color:var(--good)} .kpi-delta.down{color:var(--bad)} .sparkline{width:100%;height:24px;margin-top:6px}

---

Chart Styling Rules#

• 标题18-24px/500; 轴标12px/400 --muted; 数据标13px/500 .num; 来源10-11px --muted
• 数值用.num → --font-data (Inter) + tnum等宽对齐
• 卡片用--surface; 次级表面用--surface-2; 强调块用--accent+白字
• 涨--good; 跌--bad; 警告--warn
• 每张图底部必须标注数据来源
• Okabe-Ito 8色+冗余编码，单图不超4色
• 每张图表必须包含：标题+数据主体+轴标签/图例+数据来源
• 版式锁定：数据图表必须从C01-C18中选择，不允许自创版式

---

详细参考文件#

文件用途references/workflow.md完整4步工作流：剖析→推荐→生成→交付references/chart-system.md完整图表系统：18种版式+三轴决策树+8条拦截规则+色板+7种HTML骨架references/design-tokens.md完整设计令牌：3套财经配色详解+字号规范+间距规范+画幅弹性规则

---

权限声明#

本技能运行时需要以下权限：

• 网络访问（必需）：加载 Google Fonts（Inter / Noto Sans SC）
• subprocess 调用（必需）：运行 Puppeteer-core 截图（需系统 Chrome）
• 文件系统写入（必需）：PNG 图片保存到桌面文件夹
• 飞书云盘 API（可选）： lark-cli drive +upload 上传图片到飞书云盘，需配置飞书凭证