PS Infographic — 化工安全信息图生成器

Process Safety Infographic Generator.
输入一个化工安全关键词，自动输出一张可直接用于技术分享/培训的信息图 HTML。

触发关键词

以下表述均可触发本技能：
- "生成/做一张XXX的信息图"
- "XXX安全信息图"
- "PS信息图：XXX"
- 用户提供化工安全主题关键词，并明确要求生成信息图

• "把这篇文章/这段内容做成信息图"（文章总结输入，v2.1 新增）

文章总结输入（v2.1 新增）：用户给长文（PDF/Word/网页/粘贴文本）而非关键词时——①提炼文章核心论点与支撑数据（3-7 个要点）②按故事链排序 ③仍走 ③.5 竖版/横版决策 ④渲染。输出结构与其他输入一致。

字体配对推荐（v2.1 新增）

> 默认中文用系统字体栈即可；追求排版质感时用以下配对（Google Fonts CDN 引入）：

要点：标题/正文 1+1 配对，不超 2 种字体族；中文一律 Noto Sans SC/思源黑体系，宋体只用于标题装饰。

工作流程

用户输入关键词
    ↓
① IMA 知识库搜索（主数据源）
    ↓ 结果不足
② Web 搜索补充（辅助数据源）
    ↓
③ 要点提炼（故事链逻辑）
    ↓
③.5 竖版/横版决策（决定画布尺寸与布局模式）
    ↓
④ 渲染信息图 HTML
    ↓
⑤ preview_url 预览 + 交付 HTML 文件

Step 1：IMA 化工工艺数据库搜索

知识库配置（固定）：

调用命令：

node "C:/Users/rayzh/.workbuddy/skills/skill_2053082144792322048/ima_api.cjs" \
  "openapi/wiki/v1/search_knowledge" \
  '{"knowledge_base_id":"ab9n_5rblYBTLWXftfs9AB5WAAfnCTixKA0FTYFNyVs=","query":"KEYWORD","top_k":10,"search_mode":"hybrid"}'

关键经验：
- 知识库对短关键词响应更好（如"硝化"、"HAZOP"），复合长查询常返回空
- 建议先用短词试探，命中后根据返回标题细化
- 返回 media_type: 1 = PDF 文档，99 = 文件夹
- 若 info_list 为空，直接进入 Step 2
- ⚠️ 凭证失效判据：若返回 {"code":200002,"msg":"skill auth failed"}，说明 ~/.config/ima/ 的凭证已被后端拒绝（2026-09-12 实测：凭证写入于 2026-05-09、近 4 个月未更新即命中），不是网络问题——需到 https://ima.qq.com/agent-interface 重新获取凭证并覆盖这两个文件；此状态下直接进入 Step 2（Web 检索）
- 若 info_list 为空，直接进入 Step 2

Step 2：Web 搜索补充

当知识库结果不足时，用 WebSearch + WebFetch 补充。

推荐搜索词模板：
- {关键词} 安全 危险性 控制措施
- {关键词} 重大隐患 判定 AQ 3067
- {关键词} 事故分析 预防措施
- AQ 3067 {关键词}（查找重大隐患判定中相关条款）

WebFetch 提取要点：
对搜索结果中政府网站（应急管理部、各省应急厅）、行业协会网站，用 WebFetch 提取正文，聚焦：
- 危险性特征 / 事故类型
- 安全控制措施 / 设计要求
- 相关法规条款（特别是 AQ 3067）

Step 3：要点提炼（故事链逻辑）

将检索内容结构化为故事链，适配信息图版面：

① 是什么（定义 + 核心特征）
② 为什么重要（危险性 / 事故后果 / 法规要求）
③ 怎么做（控制措施 / 设计要点 / 操作步骤）
④ 红线（重大隐患判定条款 / 禁止项）

故事线 pitch（可选，内容有多个叙事角度时用）：当素材可支撑 ≥2 种截然不同的叙事（如"后果有多严重" vs "防线怎么建" vs "新规变了什么"），先给用户 2-3 个候选角度（含推荐）让用户选；单一角度明显时直接走默认故事链，不问。

数据真实性铁律（不可违反）：
- 禁止编造统计数字：所有数字必须来自检索结果或用户提供；检索不到的定量数据宁可不放，不得凭印象填数
- 示例性数值必须标注："示例"、"示意" 等字样标明非真实数据
- 数字人性化格式：12.4 万而非 124000；单位必须展示（t/a、kPa、%）
- 法规条款号必须精确：AQ 3067 条款引用要与原文核对，错一条即全图失信

信息密度判断：
- 稀（≤50字）→ 一个巨大锚点元素
- 中（50-200字）→ 2-3个区块，有主有次
- 密（200+字）→ 多区块网格，实验室手册感 ← 化工安全类多用此档

Step 3.5：竖版/横版决策

在要点提炼完成后、渲染前，根据内容规模判断使用竖版还是横版。

决策三要素

主题类型自动偏向

横版画布与字体规范（16:10，1920×1200）

布局：三列等宽 grid（1fr 1fr 1fr），列间距 24px，每列 2 卡竖排（flex-direction:column; gap:18px）；Hero 左文字+右统计数字（flex）；底部横跨区金句+调查要求并排（flex:1; gap:20px），置于三列后、Footer 前。

字体（列宽约 600px，相对竖版整体缩小但保可读）：Hero 标题 60-68px / 统计数字 56-64px / 卡片标题栏 22-25px / 列表正文 20-22px / 时间轴·违规条 18-19px / 底部标语 30-34px。

决策流程

Step 3 要点提炼完成
    ↓
卡片数 ≥5？ ──是──→ 横版（16:10）
    ↓否
区块类型 ≥4 种？ ──是──→ 横版
    ↓否
事故分析类 + 有违规清单？ ──是──→ 横版
    ↓否
竖版输出 (1080px 宽)

Step 4：信息图渲染

规范依据（已内化于本 SKILL.md，无需外部文件）：
- 配色方案 / 视觉增强规则 / 主题专项布局 / 反死亡清单 / 防坑指南均见本 SKILL.md 下文各章节

化工安全类推荐配置：

⚠️ 重要：默认使用浅色主题

参考用户反馈，深色背景虽然视觉冲击力强，但：
1. 长时间阅读疲劳
2. 打印/投影效果差
3. 化工安全类内容更适合专业、清晰的浅色风格

默认浅色配色方案（推荐）：

--bg: #FFFFFF（纯白背景）
--ink: #2C3E50（深蓝灰文字）
--green: #3498DB（信息蓝，用于措施/流程）
--pink: #E74C3C（警示红，用于危险/禁止）
--accent: #F39C12（强调橙，用于标签/高亮）

替代浅色方案（暖灰）：

--bg: #FAFBFC（暖灰白）
--ink: #1A252F（深墨蓝）
--green: #27AE60（安全绿）
--pink: #C0392B（深红）
--accent: #F39C12（琥珀）

色盲安全配色（Wong palette，受众含色觉障碍读者或对外公开传播时用）：

橙 #E69F00 / 天蓝 #56B4E9 / 绿 #009E73 / 蓝 #0072B2 / 朱红 #D55E00 / 紫 #CC79A7

搭配要点：分类数据用上述色相区分（红绿盲也能分辨橙/蓝）；"危险红 vs 安全绿"语义场景保留红绿但加图标/文字冗余编码，不单靠颜色传义。

化工安全类视觉增强规则（基于优秀信息图样本提炼）：

参考样本风格（按需加载）

> 见 references/sample-styles.md（移动式起重机/高处作业安全信息图风格拆解）。

主题专项布局指引

不同化工安全主题适合不同的布局模式。根据关键词自动判断并选择：

类型 A：事故分析类（关键词含"事故""调查""XX爆炸""XX泄漏"等）
- 推荐结构：时间轴（accordion 或 step 列表）
- 布局模式：
1. 顶部：大标题 + 事故基本信息卡片（蓝底白字标题栏）
2. 事故经过：橙色标题栏卡片，内含时间轴或流程图
3. 原因分析：红色标题栏卡片，分"直接原因""间接原因""管理原因"三个子区块
4. 防范措施：绿色标题栏卡片，列出整改建议（图标化列表）
5. 底部：深蓝底收尾条，配金句标语
- 色彩方案：蓝色（概况）→ 橙色（经过）→ 红色（原因）→ 绿色（措施）→ 深蓝底收尾

类型 B：工艺安全类（关键词含"硝化""氯化""HAZOP""LOPA"等工艺或分析方法）
- 推荐结构：彩色标题栏卡片组（定义→危险性→控制措施→法规红线）
- 布局模式：
1. 顶部：大标题 + 工艺定义卡片（蓝底白字标题栏）
2. 危险性分析：红色标题栏卡片，内含"爆炸类型""事故后果"等图标化列表
3. 控制措施：蓝色标题栏卡片，分"工程控制""管理控制""应急措施"三个子区块，各配图标
4. 法规红线：红色标题栏卡片，列出重大隐患判定条款（用红色圆圈编号）
5. 底部：深蓝底收尾条，配金句标语
- 色彩方案：蓝色（定义/措施）→ 红色（危险性/红线）→ 绿色（合规/通过）→ 深蓝底收尾

类型 C：制度标准类（关键词含"AQ""标准""规定""条例"等）
- 推荐结构：彩色标题栏卡片组（标准信息→核心条款→关键变化→实施要求）
- 布局模式：
1. 顶部：大标题 + 标准编号（深蓝灰文字，关键词用红色高亮）
2. 标准信息卡片：蓝色标题栏，内含标准编号、生效日期、适用范围（图标化列表）
3. 核心条款：非对称网格，重要条款用大卡片（红色标题栏），次要条款用小卡片（蓝色/绿色标题栏）
4. 关键变化：橙色标题栏卡片，列出与旧版对比（可用↑↓→符号表示变化方向）
5. 实施要求：绿色标题栏卡片，列出企业需采取的措施（图标化列表）
6. 底部：深蓝底收尾条
- 色彩方案：蓝色（标准信息）→ 红色（核心条款/重大变化）→ 橙色（关键变化）→ 绿色（实施要求）→ 深蓝底收尾

字体规范（手机端可读）：
- 最大元素：80-108px（作为"地形"，不只是文字）
- 标题：60-80px
- 正文：≥36px（手机上约 12.9px）
- 标注 / 来源：≥24px（手机上约 8.6px）
- 行高：≥1.6
- 最大:最小 ≥ 10:1

90/8/2 色彩法则：
- 90% 中性色（--bg + --ink 文字）
- 8% 结构色（--green 一个区块或色条）
- 2% 弹点色（--pink，整张图仅 1-2 处）

反死亡清单（必须检查）：
- [ ] 弹点色用了 >2 处 → 减少到 2 处以内
- [ ] 所有文字都在 30-44px 区间 → 需要有 ≥10:1 的大小对比
- [ ] 三列等宽布局 → 改为 2fr+1fr 或非对称网格
- [ ] 正文字号 <36px → 调到 36px 以上
- [ ] 换一个主题，这个布局还说得通 → 如果是，说明做的是模板而非设计
- [ ] 盖上文字认不出主题 → 视觉隐喻失败：图形/构图应独立传达"这是关于什么的安全话题"，而非纯文字排版
- [ ] 缺少顶部预警条 → 安全主题必须有视觉警示元素
- [ ] 全浅色无层次 → 用左边条（色条）、浅色背景块（#F8F9FA）、SVG 图标建立层次，不用大面积深色底
- [ ] 法规编号/分类名称纯文字 → 改为标签/徽章形式
- [ ] 信息图底部无收尾 → 添加统计条或金句引用
- [ ] 卡片无图标装饰 → 每个要点卡片配 SVG 内联图标
- [ ] 事故分析类用了网格布局 → 改为时间轴/事件链布局
- [ ] 多种信息类型无分类标签 → 添加彩色分类标签 + 图例
- [ ] 图标列表用了 flex 布局 → 改为 display:block; position:relative + 图标绝对定位，防止中文竖排
- [ ] <strong> 标签在窄空间被压成竖排 → 加 display:inline-block; white-space:nowrap
- [ ] 彩色标签/徽章文字竖排 → 加 white-space:nowrap；4字以上标签用 <br> 手动断行（如"先兆<br>中暑"）
- [ ] grid 三列等宽内有中文标签 → 改为 flex + min-width + white-space:nowrap

渲染防坑指南（v2.0 新增，按需加载）

生成 HTML 前必读：references/rendering-pitfalls.md——含 ①中文逐字竖排修复（flex/grid 窄空间）②分辨率优化（scale 选型）③html2canvas CSS 渲染防坑（三大高危写法 + 安全写法对照 + 渲染前自检清单）。核心原则："浏览器能看 ≠ html2canvas 能导"，交付前必实测导出。

Step 5：输出与交付

⚠️ 交付双门（未过双门不得交付）：

门 1·渲染前机械预检（HTML 写完后逐项过）：
- [ ] 无文字重叠/溢出容器/被裁剪（重点：标签、徽章、时间轴节点）
- [ ] 无字号低于可读下限（正文 ≥36px 竖版 / ≥18px 横版）
- [ ] 无内容逃出画布边界；底部不留半空尴尬区
- [ ] 三大高危写法已排除（nowrap+inline-block / var() 短属性 / linear-gradient，详见 references/rendering-pitfalls.md）
- 无头浏览器实测（Playwright 本机可用，路径与姿势见「已知问题与限制」表）：量测字形几何 + 实测 html2canvas 导出（含画布尺寸与 toBlob 字节数）——"浏览器能看 ≠ html2canvas 能导"，必须导出实物核对

门 2·成品自审（Read 导出 PNG 或预览截图后逐项过，未看过成品不交付）：
- [ ] 盖住文字仍能认出主题吗？（不能 → 视觉隐喻失败，重做布局）
- [ ] 焦点唯一吗？（眯眼测试：第一眼落在一个主视觉上）
- [ ] 图形比例真实吗？（柱长/色块面积与数值成比例）
- [ ] 文字有溢出、裁剪、碰撞、孤行吗？
- [ ] 换个主题这布局还成立吗？（成立 → 做成了模板而非设计）

文件保存路径：
D:/RayClaw/{当前日期}-{任务标识}/{关键词}_infograph.html

预览：

preview_url(file:///D:/RayClaw/{路径}/{关键词}_infograph.html)

交付：

deliver_attachments(["D:/RayClaw/{路径}/{关键词}_infograph.html"], "交付{关键词}安全信息图 HTML")

底部收尾条署名与来源标注（必做）：
- 左下角署名：标语下方左侧固定显示 Ray谈化工 · PS Inforgraphic（半透明白色，16px，字母间距1px）
- 数据来源标注（署名旁或 Footer 右侧，≥24px）：事故分析类标调查报告名称+编号；工艺/标准类标法规标准号（如"依据 AQ 3067-2026"）；无权威来源的示意图标"示意"。安全内容无来源 = 可信度归零

PNG 截图（html2canvas 方案）：
在 HTML 中集成 html2canvas（CDN 引入 + 固定定位下载按钮 + toBlob 截图脚本 + viewport meta 四件套，完整代码模板见 references/rendering-pitfalls.md 首节）。关键参数：scale:3（高DPI手机必须≥3x）、toBlob()、useCORS:true、backgroundColor:'#FFFFFF'。

scale 选型 / 常见排查 / html2canvas 防坑：见 references/rendering-pitfalls.md。

示例

示例 1：HAZOP 分析流程

• 输入：HAZOP
• 知识库结果：空（知识库无 HAZOP 条目）
• Web 补充：成功
• 输出：hazop_infograph.html
• 结构：流程（4步：分析准备→构建偏差→偏差分析→风险评估）

示例 2：硝化工艺安全（本次验证）

• 输入：硝化工艺安全
• 知识库结果：命中 4 条（孟笑言硝化安全设计 PDF 等）
• Web 补充：湖南应急厅事故分析 + 管式反应器失控讨论
• 输出：nitration_safety_infograph.html
• 结构：层级（3 大爆炸类型 → 4 道防线 → 6 条重大隐患红线）

已知问题与限制

维护记录