解决报告文字枯燥、难以快速理解的痛点。当需要给报告、方案、BP、调研或汇报材料配图、做信息图排版时，该技能指导AI用代码（HTML/CSS）画结构图，渲染成PNG嵌入原文，导出Markdown/Word/PDF三种格式，实现图文并茂的专业汇报材料产出。中文真字体清晰不乱码，数字准确，风格统一时尚。
报告图文化工具：用代码画信息图让报告一目了然
【适用场景】
职场人士在撰写报告、方案、商业计划书（BP）、调研报告、工作汇报等文档时，常遇到文字堆砌、难以快速传达关键信息的困境。该技能适用于以下具体场景：
- 工作汇报：季度总结、项目汇报、部门述职等需要用数据说话的场景 - 商业方案：BP、融资计划、市场分析报告等需要专业呈现的文档 - 调研报告：市场调研、行业分析报告等需要图文并茂的文档 - 教学培训：培训材料、课件等需要清晰结构化的内容
核心价值：把一份纯文字报告转化为「读者对着图就能懂约80%内容」的可视化文档，解决文字枯燥、阅读疲劳、信息传达效率低的问题。
技能特点： - 用代码（HTML/CSS）画结构图，而非AI文生图，确保中文真字体清晰不乱码 - 数字准确，成本低（不消耗文生图额度） - 风格统一，支持Markdown/Word/PDF三种格式导出
【操作步骤】
Step 1：通读报告，列出配图规划清单
将报告拆成小节，为每个关键判断点配一张图（一节一图起步）。
具体操作： 1. 通读全文，理解报告的核心观点和关键数据 2. 列出「小节 / 关键点 / 图型 / 图题」四列表格 3. 图型选择参考：分流图、矩阵图、时间轴、漏斗图、天平图、排名图等结构图 4. 规划清单先给用户确认后再开工
Step 2：编写自包含HTML图文件
在报告同目录创建 `figures/` 文件夹，每张图一个HTML文件。
具体操作： 1. 创建 `figures/` 目录 2. 每张图编写自包含HTML： - 把 `assets/base.css` 的全部内容整段粘进 `<style>…</style>` - 使用 `<body><div class="canvas">…</div></body>` 结构 - 文字逐字取自报告正文，不改写不删减 - 每张图信息块不超过6-10个
Step 3：渲染PNG并自查
使用无头浏览器将HTML渲染成PNG图片。
具体操作： 1. 运行渲染命令： ``` node scripts/render.js figures/<名>.html figures/<名>.png 1536 1024 2 ``` 2. 渲染后必须自查：检查中文对不对、结构对不对、有没有文字重叠/溢出/叠字 3. 如有问题修改HTML重新渲染
Step 4：嵌入图片并排版导出
将PNG图片嵌入原文中，保留原文一字不动。
具体操作： 1. 按版式规范，将每张图嵌到说明文字之后：`` 2. 只做三件事：补齐标题层级、插入图与图题、末尾加图清单 3. 导出三格式： - 先出 `<原名>_图文版.md` - 再导出Word和PDF（用pandoc + LibreOffice或自带工具）
【代码模板】
渲染脚本使用
```bash
安装依赖（需Node.js）
npm install playwright渲染HTML为PNG
node scripts/render.js figures/<图名>.html figures/<图名>.png 1536 1024 2导出Word格式
pandoc <原名>_图文版.md -o <原名>_图文版.docx导出PDF格式
pandoc <原名>_图文版.md -o <原名>_图文版.pdf ```HTML图文件模板
```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> / 完整CSS样式 / .canvas { width: 1536px; padding: 40px; } .chart-box { background: #fff; border-radius: 8px; padding: 24px; } / 根据图型选择对应骨架 / </style> </head> <body> <div class="canvas"> <div class="chart-box"> <!-- 填入结构图内容 --> </div> </div> </body> </html> ```
【复盘要点】
三条铁律（必须遵守）
1. 不动原文一个字：只做补齐标题层级、插入图与图题、加图清单三件事，绝不改写、删减、润色原文句子 2. 图里文字逐字对齐正文：数字、单位、配对关系100%核对，不自造、不四舍五入 3. 交付前必自查：每张图渲染后打开PNG检查，不对就改HTML重渲
常见问题处理
| 问题 | 解决方法 |
|---|---|
| 文字溢出/重叠 | 调字号、画幅高度，或减少信息块数量 |
| 中文乱码 | 确保使用系统真实字体，而非图片字体 |
| 缺渲染工具 | 安装Chromium系浏览器（Chrome/Edge/Chromium/Brave）或playwright |
| 无法导出Word/PDF | 用pandoc + LibreOffice，或如实告知用户只产出MD |
质量标准检查清单
- [ ] 每张图渲染后已自查中文和数字准确性 - [ ] 图里没有文字重叠/溢出/叠字 - [ ] 图里和图清单里没有混进英文词（skill生成的文字统一用中文） - [ ] 原文一字未改 - [ ] 三种格式（MD/Word/PDF）均已产出或如实说明缺失原因
来源：LongjunQin/workbuddy-report-illustrator (GitHub raw) 来源URL：https://github.com/LongjunQin/workbuddy-report-illustrator/blob/main/report-illustrator/SKILL.md