lingxiaobc 生成可视化信息图（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 速查、导出排坑清单。