| name | make-infographic |
| description | 把信息、数据、规划、流程、知识等内容转化为家长/客户能看懂的可视化图像（信息图、流程图、脑图/思维导图、关系图、知识图谱、海报），以自包含 HTML 文件呈现，所有公式用 LaTeX 编写并实时渲染，支持一键导出高清 PNG。当用户说"做成信息图/可视化/图片/海报""画个流程图/脑图/思维导图/关系图""把这份内容做成图给家长/客户看"，或任何把内容可视化成图的意图时，必须使用本技能，即使用户没明说"信息图"二字。 |
生成可视化信息图（HTML + LaTeX + 高清 PNG 导出）
把用户的内容做成一张家长/客户能直接看懂的可视化图：信息图、流程图、脑图、关系图、海报等。产出单个自包含 HTML 文件，浏览器打开即看，所有公式 LaTeX 实时渲染，一键导出高清 PNG。
硬性限制（违反即不合格）
- 所有公式必须用 LaTeX 代码编写：任何数学/物理/化学公式、变量、上下标，一律用
$...$（行内）或 $$...$$（独占行）的 LaTeX 语法写进 HTML，禁止用 Unicode 字符凑公式（如禁止 ½kx²、E=mc2、H₂O 用下标字符）。由 MathJax 实时渲染成规范公式。
- MathJax 必须用
tex-svg.js（不是 tex-mml-chtml.js）：保证公式是矢量、导出 PNG 不丢字体。
- 必须支持高清 PNG 导出：页面含「导出高清 PNG」按钮，用 html-to-image，
pixelRatio≥3。
- 单文件自包含：CSS/JS 内联或走 CDN，双击即可打开。
工作流程
- 理解内容与受众：图给谁看（家长/学生/客户）、核心信息、信息层级。家长向 = 少术语、多图标、结论先行。
- 选择结构：
- 信息图/海报 → 分板块卡片式（标题区 + 若干 section + 页脚）。
- 流程图 → 箭头串联的步骤卡（
.flow）。
- 脑图/思维导图 → 中心主题 + 分支树。
- 关系图 → 节点 + 连线。
- 以模板为起点：Read
${CLAUDE_SKILL_DIR}/assets/template.html，复制其骨架（配色变量、MathJax SVG、导出按钮、导出脚本），替换为用户内容。复杂图表（流程图/脑图）的具体结构见 ${CLAUDE_SKILL_DIR}/references/design-guide.md。
- 公式用 LaTeX：把所有公式写成
$F=ma$、$E_p=\dfrac12kx^2$ 等。写法速查见 design-guide.md 第 4 节。
- 写入产出目录：HTML 输出到
AI_output/<名称>.html（正斜杠相对路径），文件名用中文主题。
- 交付与导出说明：告诉用户打开网页、点按钮导出 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 速查、导出排坑清单。
