guizang-ppt-lite

v2026.09.24

生成高级质感的单文件 HTML 横向网页 PPT。何时使用:当用户需要高级网页 PPT、商业汇报 PPT、战略会 PPT、发布会 PPT、产品路演 PPT、趋势洞察 PPT,或要求优化 PPT 审美、信息层级、视觉中心、叙事节奏时触发。

GitHub
Install command
npx skhub add steelan9199/guizang-ppt-lite
Markdown
SKILL.md

guizang-ppt-lite

生成一份高级质感、商业表达优先、符合成熟演示文稿规则、单文件 HTML 的横向翻页网页 PPT。 生成的 PPT 放到当前项目的 ppt/ 文件夹下。

最高原则:先做演示设计,再写 HTML。 不得把内容随机塞入模板;每一页都必须先通过"页面角色、核心结论、视觉中心、信息层级、叙事节奏、可读性"的设计审查。

触发映射

用户说AI 做
高级网页 PPT / 精品 PPT / 质感 PPT生成符合大师级 PPT 规则的单文件 HTML PPT
CEO 战略会 / 董事会 / 经营汇报 / 复盘使用"董事会汇报"场景风格(见 scenario-styles.md)
发布会 / 内部动员 / 愿景宣讲 / 战略发布使用"战略发布"场景风格
产品路演 / 解决方案 / 融资路演 / SaaS 展示使用"产品路演"场景风格
趋势洞察 / 行业观察 / 观点报告 / 白皮书使用"趋势洞察"场景风格
用户指定风格很多收敛到最匹配的 1 个场景,不混搭
用户没有指定风格先按使用场景自动选择,不是按视觉偏好选择

场景风格不是皮肤,而是场景下的表达规则。4 种场景共用同一模板(assets/template.html)和同一套配色(references/themes.md),差异仅在内容规则、叙事结构和表达重心。详细规则见 references/scenario-styles.md。

强制工作流

Step 1 · 明确演示任务

先判断以下 5 项;信息不足且会影响质量时,最多问 3 个选择题。

判断项必须明确
使用场景是决策会、动员会、路演,还是洞察分享
听众谁在听,他们关心决策、认同、购买还是启发
目标动作听完要批准、对齐、购买、传播,还是启动项目
内容成熟度是只有主题、已有大纲、已有长文,还是已有素材
约束页数、语气、品牌、是否需要数据/图片

Step 2 · 先产出演示蓝图

生成 HTML 前,先在内部完成演示蓝图:

受众判断 → 核心主张 → 叙事弧 → 页面清单 → 每页角色 → 每页核心结论 → 每页视觉中心 → 每页版式类型

不得跳过蓝图直接写页面。

各场景推荐叙事弧见 references/scenario-styles.md。

Step 3 · 使用大师规则设计每页

每页写代码前,必须逐页按 references/ppt-master-rules.md 确认:

  • 页面角色(钩子/背景/问题/洞察/框架/证据/路径/行动/收束)
  • 核心结论(标题能独立表达一个完整判断)
  • 视觉中心(有且只有一个第一视觉焦点)
  • 信息层级(主标题 > 关键数字/图形 > 支撑点 > 注释)
  • 叙事位置(与前后页有因果/转折/递进关系)
  • 认知负荷(一页最多 1 个主观点 + 3-5 个支撑点)
  • 留白与重心(内容不贴边、不贴底、不平均摊满)
  • 对齐与网格(元素共享清晰轴线)
  • 可读性(投屏可读,不低对比,不小字堆叠)
  • 配色安全(正文高对比;禁止灰字叠加半透明浅底)
  • 完整显示(标题、正文、图注、行动项不得被裁切或遮挡)

Step 4 · 基于模板生成

  1. 必须先 Read 读取 assets/template.html,确认 #deck 容器、.slide 结构、翻页 JS 逻辑。禁止未读模板就生成 HTML。
  2. 所有 4 种场景共用 assets/template.html 这一个模板。
  3. 必须使用模板内的 PPT Master Guards:.ppt-safe-frame、.ppt-balanced-frame、.ppt-action-frame、.ppt-focal、.surface-light、.surface-muted、.surface-ink、.surface-accent、.text-readable、.ppt-no-sink。
  4. 必须复用模板的翻页机制:使用 #deck 容器(display: flex)+ CSS transform: translateX() + JS 精确切换。禁止自行发明翻页方案(scroll-snap、scrollIntoView 等)。
  5. 基于模板生成目标 HTML;不得绕开模板重新写 CSS。
  6. 替换 <title>。
  7. 保持单文件 HTML;除非用户提供素材,否则不强行使用图片。
  8. 主题色只从 references/themes.md 的 5 套预设中选择,不随意自造颜色。
  9. 新增局部 CSS 必须通过"配色安全与完整显示规则":正文对比度不低于模板正文;正文容器不得半透明;文字不得裁切或被导航遮挡。

反随机生成硬规则

禁止以下行为:

  • 只根据页面数量平均分配内容。
  • 看到"三个点"就机械使用三卡片。
  • 每页都居中大标题。
  • 把内容贴到底部或角落,导致视觉重心失衡。
  • 为了填满页面增加无意义图形。
  • 使用 opacity、过浅灰色、半透明背景承载正文。
  • 在浅色/半透明卡片上使用 muted 灰色正文。
  • 在没有真实图片素材时使用图片版式。
  • 发明模板不存在的复杂类名。
  • 绕开模板护栏重写 CSS。
  • 使用 scroll-snap-type、scroll-snap-align、scroll-behavior: smooth 或 scrollIntoView() 实现翻页。必须用 #deck + transform: translateX()。
  • 将中文、日文、韩文等 CJK 字符写成 Unicode 转义序列(如 \u8fc7\u53bb)。所有 CJK 文本必须写为原文字符。这是不可协商的硬约束。
  • 禁止手写或简化模板的 <script type="module"> Motion One 动效引擎脚本。该脚本包含 window.__playSlide 注册和首屏 playSlide(0) 初始化调用(修复首次加载文字消失的 Bug),必须逐字复制自 assets/template.html。手写该脚本几乎必然遗漏初始化调用,导致首屏文字消失。

交付自检

检查项标准
占位符不存在 [必填]、未替换标题、模板默认文案
单一场景风格整份 deck 只使用 1 个场景风格
页面角色每页角色明确且不重复堆叠
视觉中心每页第一视觉焦点清晰,无随机漂浮
信息层级标题、主视觉、支撑信息层级分明
叙事节奏有钩子、展开、转折、框架、行动或收束
可读性无白底白字、暗底低对比、小字过密;正文禁止半透明容器+灰色文字
裁切主体容器无文字溢出,底部内容不被导航遮挡
字符编码HTML 中所有中文/CJK 字符必须是原文字符,禁止 \uXXXX 转义
翻页机制使用 #deck + transform: translateX(),禁止 scroll-snap 等
模块脚本<script type="module"> 动效引擎完整复制自 template.html,包含首屏 playSlide(0) 调用
文件输出可直接打开的单文件 HTML

错误处理

错误场景处理方式
用户只给主题先补商业叙事蓝图,再生成 PPT
用户要求风格很多收敛为 1 个场景风格,并说明选择理由
内容太多按叙事角色拆页,绝不缩小字号硬塞
内容太少补足逻辑链,不编造数据
缺少素材使用排版、框架、对比、数字和留白,不强行找图
模板不符合审美修改模板或局部 CSS,直到符合大师规则
用户指出页面低级先诊断违反了哪条 PPT 规则,再修复,不只移动位置
中文/CJK 显示为乱码或 \uXXXX必须重新生成整个 HTML,确保所有 CJK 字符为原文字符
PPT 纵向滚动而非横向翻页翻页机制错误,必须改为 #deck + transform: translateX()
当前页底部露出下一页内容翻页未按 100vw 对齐,改用 #deck + transform 方案根治
首屏加载后文字消失,切页再切回才恢复动效引擎脚本被手写或简化,遗漏了 playSlide(0) 初始化调用 → 必须从 assets/template.html 逐字复制 <script type="module"> 完整脚本
Discovery
Tags

No tags published for this skill.

Version
Latest version metadata

Version

v2026.09.24

Published

Sep 24, 2026

Category

Uncategorized

License

Not specified

Source path

skills/guizang-ppt-lite

Default branch

main

Latest commit

03b646a

Tree SHA

e79e9ee