make-infographic

name	make-infographic
description	把信息、数据、规划、流程、知识等内容转化为家长/客户能看懂的可视化图像（信息图、流程图、脑图/思维导图、关系图、知识图谱、海报），以自包含 HTML 文件呈现，所有公式用 LaTeX 编写并实时渲染，支持一键导出高清 PNG。当用户说"做成信息图/可视化/图片/海报""画个流程图/脑图/思维导图/关系图""把这份内容做成图给家长/客户看"，或任何把内容可视化成图的意图时，必须使用本技能，即使用户没明说"信息图"二字。

生成可视化信息图（HTML + LaTeX + 高清 PNG 导出）

把用户的内容做成一张家长/客户能直接看懂的可视化图：信息图、流程图、脑图、关系图、海报等。产出单个自包含 HTML 文件，浏览器打开即看，所有公式 LaTeX 实时渲染，一键导出高清 PNG。

硬性限制（违反即不合格）

1. 所有公式必须用 LaTeX 代码编写：任何数学/物理/化学公式、变量、上下标，一律用 $...$（行内）或 $$...$$（独占行）的 LaTeX 语法写进 HTML，禁止用 Unicode 字符凑公式（如禁止 ½kx²、E=mc2、H₂O 用下标字符）。由 MathJax 实时渲染成规范公式。
2. MathJax 必须用 tex-svg.js（不是 tex-mml-chtml.js）：保证公式是矢量、导出 PNG 不丢字体。
3. 必须支持高清 PNG 导出：页面含「导出高清 PNG」按钮，用 html-to-image，pixelRatio≥3。
4. 单文件自包含：CSS/JS 内联或走 CDN，双击即可打开。

工作流程

1. 理解内容与受众：图给谁看（家长/学生/客户）、核心信息、信息层级。家长向 = 少术语、多图标、结论先行。
2. 选择结构：
   • 信息图/海报 → 分板块卡片式（标题区 + 若干 section + 页脚）。
   • 流程图 → 箭头串联的步骤卡（.flow）。
   • 脑图/思维导图 → 中心主题 + 分支树。
   • 关系图 → 节点 + 连线。
3. 以模板为起点：Read ${CLAUDE_SKILL_DIR}/assets/template.html，复制其骨架（配色变量、MathJax SVG、导出按钮、导出脚本），替换为用户内容。复杂图表（流程图/脑图）的具体结构见 ${CLAUDE_SKILL_DIR}/references/design-guide.md。
4. 公式用 LaTeX：把所有公式写成 $F=ma$、$E_p=\dfrac12kx^2$ 等。写法速查见 design-guide.md 第 4 节。
5. 写入产出目录：HTML 输出到 AI_output/<名称>.html（正斜杠相对路径），文件名用中文主题。
6. 交付与导出说明：告诉用户打开网页、点按钮导出 PNG；提示需联网（CDN）、首次渲染约 1 秒。

导出 PNG 的关键（已踩过的坑，务必照抄）

导出选项必须包含以下三项，否则会出现"左侧大片空白 / 内容偏右 / 公式丢失"：

htmlToImage.toPng(poster,{
  pixelRatio:3,
  backgroundColor:'#F4F7FA',
  width:poster.offsetWidth, height:poster.offsetHeight,
  style:{ margin:'0', transform:'none', boxShadow:'none' }  // 清零居中边距，防左空白
})

• 导出前先 await MathJax.startup.promise 确保公式渲染完。
• 导出时给按钮加 .hidden 类隐藏，避免按钮进图。

参考资料（按需 Read）

• ${CLAUDE_SKILL_DIR}/assets/template.html —— 通用信息图模板（配色 + MathJax SVG + 导出按钮 + 含 LaTeX 示例的板块），首选起点。
• ${CLAUDE_SKILL_DIR}/assets/reference_example.html —— 完整真实案例（学生暑期补课规划信息图），质量标准参照。
• ${CLAUDE_SKILL_DIR}/references/design-guide.md —— 配色/布局/各类图（流程图/脑图/关系图）的详细实现、LaTeX 速查、导出排坑清单。