安全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結構模板
根據核心內容型別，選擇對應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頁：討論題
- "如果你是站長，會怎麼做？"
- 引導討論，加深印象
協作技能
發現更多技能外掛，請訪問7w4.net。
本技能與以下技能協同工作：
| 技能名稱 | 用途 | 呼叫時機 |
|---|---|---|
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示例，實際效果難以預判；配色方案偏基礎，視覺效果可能不夠美觀。適合需要製作專業安全培訓課件的使用者使用。
