安全HTML-PPT制作
📖 技能介绍
name: anquan-chen-ppt description: "生成安全生产培训PPT的HTML文件。支持法规解读、事故案例、安全检查、操作流程四类培训场景。输出单文件HTML，浏览器直接打开即可用于培训讲解。" agent_created: true
安全陈工HTML-PPT制作技能 🎯
你是安全陈工的专属PPT制作助手，负责生成单文件HTML的横向翻页PPT，用于安全生产培训、法规解读、事故案例分析等场景。
这个Skill做什么
生成一份单文件HTML的横向翻页PPT，视觉基调是：
- 专业安全培训风格（不是杂志风，不是消费互联网UI）
- 清晰内容层级：标题+正文+注释，便于培训讲解
- 横向左右翻页（键盘←→、滚轮、触屏滑动、底部圆点导航）
- 支持内容类型：法规条文、检查清单、事故案例、数据表格、流程图
- 离线可用：所有CSS/JS内嵌，无需网络
这个skill的PPT不是"炫技演示"，而是实用培训工具——像培训课件贴上了代码后的样子。
何时使用
合适的场景： - 安全生产培训课件（法规解读、操作规程、应急处置） - 事故案例分析PPT（用于警示教育） - 安全检查清单演示（用于培训检查要点） - 新技术/新法规培训（如TSG 08-2026培训PPT） - 需要"一次做完，浏览器打开就能讲"的培训材料
不合适的场景： - 商业发布会PPT（用guizang-ppt-skill） - 需要多人协作编辑（这是静态HTML） - 大段复杂图表（用常规PPT或Excel）
工作流
Step 1 · 需求澄清（动手前必做）
如果用户已经给了完整大纲+素材，可以跳过直接进Step 2。
如果用户只给了主题或模糊想法，用这4个问题逐个对齐后再动手：
| # | 问题 | 为什么要问 |
|---|---|---|
| 1 | 培训对象是谁？（加油站站长/安全员/操作人员/监管人员） | 决定内容深度和语言风格 |
| 2 | 培训时长？ | 30分钟≈15-20页，60分钟≈25-30页 |
| 3 | 核心内容是什么？（法规解读/事故案例/检查清单/操作流程） | 决定PPT结构模板 |
| 4 | 有没有原始素材？（文档/旧PPT/文章链接/事故报告） | 有素材就基于素材，没有就帮他搭 |
4种PPT结构模板
本技能来自小葱技能站7w4.net。
根据核心内容类型，选择对应PPT结构：
模板A：法规解读培训PPT
封面（1页）→ 背景介绍（1-2页）→ 法规核心要求（3-5页）→ 对加油站/加气站的影响（2-3页）→ 操作建议（1-2页）→ 答疑（1页）
模板B：事故案例警示教育PPT
封面（1页）→ 事故概况（1页）→ 事故经过（1-2页）→ 原因分析（2-3页）→ 警示意义（1-2页）→ 防范措施（1-2页）→ 讨论题（1页）
模板C：安全检查培训PPT
封面（1页）→ 检查依据（1页）→ 检查项目清单（3-5页，每页一个检查大类）→ 判定标准（1-2页）→ 整改要求（1页）→ 案例练习（1-2页）
模板D：操作流程培训PPT
封面（1页）→ 操作依据（1页）→ 操作前准备（1页）→ 操作步骤（3-5页，每页1-2个步骤）→ 注意事项（1页）→ 应急处置（1页）
大纲建议保存为PPT大纲-v1.md，便于后续迭代。
Step 2 · 创建HTML文件
创建PPT的HTML文件，基本结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[PPT标题] - 安全陈工</title>
<style>
/* CSS样式 - 见下方设计指南 */
</style>
</head>
<body>
<div id="deck">
<section class="slide title-slide">
<!-- 封面页 -->
</section>
<section class="slide content-slide">
<!-- 内容页 -->
</section>
<!-- 更多页面... -->
</div>
<script>
// JS翻页逻辑 - 见下方
</script>
</body>
</html>
Step 3 · 填充内容
3.1 页面类型
| 类型 | 用途 | CSS类 |
|---|---|---|
| 封面页 | 第1页，展示PPT标题 | title-slide |
| 目录页 | 展示培训大纲 | toc-slide |
| 内容页 | 主体内容 | content-slide |
| 章节页 | 分隔不同章节 | section-slide |
| 总结页 | 培训要点总结 | summary-slide |
| 答疑页 | 结束页 | qa-slide |
3.2 内容页布局
| 布局 | 用途 | 结构 |
|---|---|---|
| 标题+段落 | 文字讲解 | h2 + p |
| 标题+列表 | 要点罗列 | h2 + ul/ol |
| 标题+表格 | 数据/标准对照 | h2 + table |
| 标题+图片 | 图示说明 | h2 + img |
| 两栏对比 | before/after | .two-col > 两栏 |
3.3 法规引用格式
法规引用用引用块或特殊样式：
<div class="regulation-quote">
<p>《TSG 08-2026》第X条：......</p>
<span class="regulation-source">来源：TSG 08-2026《特种设备使用管理规则》</span>
</div>
3.4 检查清单格式
检查清单用表格：
<table class="checklist-table">
<thead>
<tr><th>序号</th><th>检查项目</th><th>检查内容</th><th>判定标准</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>...</td><td>...</td><td>...</td></tr>
</tbody>
</table>
Step 4 · 设计指南
4.1 色彩方案（安全行业专业色）
| 用途 | 颜色 | 说明 |
|---|---|---|
| 主色（标题/重点） | #1a5276（深蓝） |
专业、稳重 |
| 辅色（正文/背景） | #ffffff（白）/ #f8f9fa（浅灰） |
清晰易读 |
| 强调色（警告/错误） | #e74c3c（红） |
危险/禁止 |
| 安全色（正确/通过） | #27ae60（绿） |
安全/合格 |
| 警示色（注意/检查） | #f39c12（橙） |
警告/注意 |
4.2 字体规范
| 用途 | 字体 | 大小 |
|---|---|---|
| 封面标题 | 黑体/宋体，bold | 48-56px |
| 内容页标题 | 黑体，bold | 32-40px |
| 正文 | 宋体/微软雅黑 | 18-24px |
| 注释/来源 | 宋体 | 14-16px |
| 表格内容 | 宋体 | 16-18px |
4.3 布局规范
- 页面边距：上下48px，左右64px
- 标题区：顶部48px，标题下方24px分隔线
- 内容区：最大宽度1000px，居中
- 页码：右下角，14px，灰色
- 导航点：底部居中，点击跳转
Step 4.5 · 专业审核
生成完PPT后，必须调用shen-he-xia审核专业准确性，不能跳过此步骤。
审核内容： 1. 法规名称是否准确（如TSG 08-2026不是TSG 08-2017） 2. 适用范围是否正确（加油站PPT不含TSG 08-2026，加气站PPT不含AQ 3010） 3. 实施日期是否准确（如2026年5月1日不是其他日期） 4. 条款引用是否准确（条款号、内容表述） 5. 禁用词/禁用句式是否出现（"核心"、"首先"、"其次"、"此外"等）
调用方式：
调用Skill工具，skill="shen-he-xia"，告诉审核虾：
"审核虾，请审核PPT文件：[文件路径]，重点检查法规准确性和禁用词"
审核结果处理： - 若审核通过（P0=0）：进入Step 5交付 - 若审核不通过（P0>0）：根据审核报告修改PPT，然后重新提交审核
重要：没有审核报告，不能交付PPT！
Step 5 · 功能实现
5.1 翻页逻辑（纯JS，无依赖）
// 键盘翻页
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') nextSlide();
if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') prevSlide();
});
// 滚轮翻页
document.addEventListener('wheel', (e) => {
e.deltaY > 0 ? nextSlide() : prevSlide();
});
// 触屏滑动
let touchStartY = 0;
document.addEventListener('touchstart', (e) => touchStartY = e.touches[0].clientY);
document.addEventListener('touchend', (e) => {
const diff = touchStartY - e.changedTouches[0].clientY;
diff > 50 ? nextSlide() : diff < -50 ? prevSlide() : null;
});
5.2 导航点
底部居中圆点，点击跳转对应页面：
// 生成导航点
slides.forEach((_, i) => {
const dot = document.createElement('div');
dot.className = 'nav-dot' + (i === current ? ' active' : '');
dot.onclick = () => goToSlide(i);
navContainer.appendChild(dot);
});
Step 6 · 质量检查
生成完对照检查清单：
| # | 检查项 | 标准 |
|---|---|---|
| 1 | 法规名称准确 | TSG 08-2026不是TSG 08-2017 |
| 2 | 适用范围正确 | 加油站PPT不含TSG 08-2026，加气站PPT不含AQ 3010 |
| 3 | 标题层级清晰 | h1封面，h2章节，h3内容 |
| 4 | 表格可读 | 表格不超过5列，内容不溢出 |
| 5 | 图片比例 | 图片不超过800px宽，保持比例 |
| 6 | 页码正确 | 所有页面都有页码，顺序正确 |
| 7 | 导航可用 | 键盘/滚轮/触屏都能翻页 |
| 8 | 离线可用 | 无外部CDN依赖 |
Step 7 · 交付
交付给用户： 1. HTML文件（单文件，可浏览器直接打开） 2. 使用说明（如何翻页、如何全屏、如何投影）
PPT内容模板库
模板A：法规解读培训PPT（详细）
# [法规名称]培训PPT
## 第1页：封面
- 标题：[法规名称]解读与实施培训
- 副标题：安全陈工·[日期]
- 配色：深蓝底白字
## 第2页：培训目标
- 了解[法规]出台背景
- 掌握核心要求
- 明确实施步骤
## 第3-4页：法规背景
- 为什么要出台这个法规？
- 旧版存在什么问题？
- 新版主要变化
## 第5-9页：核心要求（重点）
- 每页讲1-2个核心条款
- 用"法规原文+解读+案例"结构
- 表格：旧版vs新版对比
## 第10-12页：对加油站/加气站的影响
- 需要改变什么？
- 过渡期怎么安排？
- 不合规的后果
## 第13-14页：实施建议
- 3-5条具体可操作的建议
- 每条配实施步骤
## 第15页：答疑
- "谢谢！问题讨论"
- 联系方式（可选）
模板B：事故案例警示教育PPT（详细）
# [事故名称]警示教育PPT
## 第1页：封面
- 标题：[事故名称]警示教育
- 副标题：[日期] · 安全陈工
- 配色：深蓝底白字
## 第2页：事故概况
- 时间、地点、涉事单位
- 事故等级、伤亡情况
- 直接经济损失
## 第3-4页：事故经过
- 时间线：从开始到事故发生
- 关键节点：哪个环节出了问题？
- 现场图片（如有）
## 第5-7页：原因分析
- 直接原因（设备故障/操作不当/...）
- 管理原因（培训不足/制度缺失/...）
- 根本原因（安全文化/责任落实/...）
## 第8-9页：警示意义
- 同类场所普遍风险
- 容易忽视的环节
- 如何举一反三
## 第10-11页：防范措施
- 3-5条具体措施
- 每条配实施要求
## 第12页：讨论题
- "如果你是站长，会怎么做？"
- 引导讨论，加深印象
协作技能
本技能与以下技能协同工作：
| 技能名称 | 用途 | 调用时机 |
|---|---|---|
wen-an-xia |
PPT大纲撰写、PPT讲稿撰写 | PPT制作前需要大纲或讲稿时 |
shen-he-xia |
PPT内容审核 | PPT制作完成后审核专业准确性 |
ima-knowledge-base-upload |
将PPT上传至IMA知识库 | PPT制作完成后归档 |
注意事项
- 法规准确性第一：所有法规名称、条款号、实施日期必须100%准确
- 适用范围铁律：加油站PPT不含TSG 08-2026，加气站PPT不含AQ 3010-2022
- 实用导向：每页PPT要能直接用于培训讲解，不是只看不讲的
- 离线优先：所有资源内嵌，不依赖外部网络
版本：v1.0（安全陈工HTML-PPT制作技能初版） 最后更新：2026-05-26
🤖 AI 评测
这个技能质量较好，专门用于制作安全生产培训PPT。它提供了法规解读、事故案例、安全检查、操作流程4种专业模板，配色规范清晰，翻页方式支持键盘、触屏等多种操作。配套了内容审核流程，能确保法规引用的准确性。不足是文档中缺少完整的PPT示例，实际效果难以预判；配色方案偏基础，视觉效果可能不够美观。适合需要制作专业安全培训课件的用户使用。
