从一篇文章到现场开讲:Guizang PPT Skill 把网页 PPT 做成完整流程
- 2026-11-07 06:51:53
AI技能图鉴 / AI SKILL ATLAS
ARCHIVE 054 · GUIZANG PPT SKILL
FIELD GUIDE/OPEN SOURCE/AI SKILL
从一篇文章到现场开讲：Guizang PPT Skill 把网页 PPT 做成完整流程
分类：网页 PPT / 演讲者模式
来源：https://github.com/op7418/guizang-ppt-skill
CATALOG / 目录
PHASE01
准备
·需求与风格
PHASE02
制作
·内容与页面
·配图与封面
PHASE03
交付
·检查与预览
·排练与演讲
做一份演示稿，排好页面只是其中一半。上台之前，还要准备每页讲什么、整场讲多久、观众屏怎样切换，遇到窗口关闭或电脑性能不够时又该怎么办。
Guizang PPT Skill把这些事情放进了同一套流程。它能把文章、Markdown、大纲或产品资料做成横向翻页的 HTML deck，也能继续处理配图、封面、演讲备注和排练。成稿直接在浏览器中打开，核心页面、样式、翻页和演讲者功能都跟着 HTML 一起交付。
更特别的是，网页 PPT 做完以后，工作还会继续推进到检查、排练和现场演讲。
关注AI技能图鉴，持续介绍AI技能
它解决什么问题
CASE 01
内容有了，页面该用什么样子
同一篇文章，可以做成观点分享，也可以做成产品分析。两种内容需要的字体、留白和页面节奏并不一样。
这个 Skill 内置了两套完整的视觉系统。Style A 是“电子杂志 × 电子墨水”，使用衬线大标题、杂志式图文布局和较强的叙事感。它提供 10 种页面布局和 5 套主题，适合观点、人文内容和个人分享。
Style B 是瑞士国际主义风格。它使用无衬线字体、规则网格、直角色块和单一高亮色，提供 22 种具名版式与 4 套锚点色，更适合产品、数据、方法和技术内容。
用户先选一套风格，Agent 再从对应的模板、主题和版式中组合页面。这样从封面到结尾都能保持同一种风格。
同一份内容可以走两条完整的版式路线。
CASE 02
页面怎样配合台上讲述
文章按阅读顺序展开，演讲却要考虑开场、转折、停顿和收束。这个 Skill 会先确认受众、分享场景、时长、原始素材、图片、主题色和硬性要求。材料不完整时，它还会帮助整理叙事大纲和页数。
页面规划也会同时考虑台上怎么讲。每一页除了观众看到的标题、图片和要点，还能带上页面目的、讲述要点、转场和建议时长。画面负责让观众看懂，备注则留给演讲者补充背景和例子。
CASE 03
做完以后，还能直接进入排练
两套模板都带有演讲者模式。按下右下角的P，浏览器会打开演讲者视图和独立观众屏。
演讲者可以看到当前页、下一页、讲述要点和时间，也能切到宫格快速选页。排练模式会记录每页和整场的实际时长，需要时还可以启用自动翻页。现场能使用激光笔、圈选、黑屏、白屏和冻结观众屏。观众窗口关闭后，也可以重新打开并回到当前页面。
播放和演讲工具都装在同一份 HTML deck 里，可以跟着文件一起带走。
从材料到现场，它会怎样推进
一次制作只需要从真实目标开始。
请把这篇产品分析做成一份 10 页左右的瑞士风演讲 PPT，面向产品团队，分享时间 20 分钟。我准备了 4 张产品截图，成稿放在当前项目里。
这句话已经给出内容、风格、受众、时长、页数、现有素材和交付位置。之后的页面规划、模板选择、备注和检查由 Skill 接着完成。
素材会依次进入页面制作、检查与排练。
需求与风格
把影响页面的条件先对齐
解决的问题： 避免受众、时长和素材没说清，做完以后再大改。
Skill 会读取文章和截图，确认瑞士风模板是否符合内容，再补问缺少的信息。接着，它会决定哪一页负责开场、哪一页讲数据、哪一页完成转折和结尾。
内容与页面
从现成版式里挑合适的页面
Agent 会复制对应模板，安排整套 deck 的明暗节奏，再从具名版式中选择封面、陈述页、数据页、对比页、图片页和结尾页。
瑞士风用网格、发丝线和单一锚点色保持秩序。杂志风则用衬线标题、图片网格和 hero 页推动叙事。页面直接从仓库准备好的骨架上继续填写内容。
配图与封面
让图片先适应页面位置
已有产品截图时，Skill 会先确认哪些文字、品牌和数据必须保留，再按页面槽位调整画布、留边和比例。在 Codex 中，还可以按需生成纪实照片、信息图、流程图、系统关系图或 UI 情景图。
同一套视觉规则也能继续生成公众号 21:9 头图、1:1 分享卡、小红书 3:4 封面和视频号横版封面。PPT 与后续发布素材因此可以沿用相同的字体、颜色和视觉重点。
检查与预览
代码检查和逐页查看一起做
生成完成后，Skill 会先按检查清单核对字体、图片、版式和页面节奏。正式演讲稿还会运行演讲者模式校验器。瑞士风页面可以再用专用脚本检查版式登记、图片槽位、标题对齐、内容溢出和底部安全线。
脚本检查之后，页面还会在浏览器中逐页打开。字号、间距、图片位置和动画是否舒服，需要通过实际画面确认。成稿不需要构建，也不需要启动服务器，直接打开index.html就能翻页。
排练与演讲
让备注、时间和观众屏一起工作
每一页都有稳定的页面 ID，备注会跟着页面走。即使后面调整页序，讲述要点也不会轻易串到别的页面。
排练时可以记录每页用时，查看整场进度，并根据结果调整内容。正式演讲时，观众屏只显示干净页面，演讲者端保留下一页预览、备注、计时和现场工具。按B还能把动态背景切到静态模式，让演示在不同电脑上更从容。
演讲者端保留备注、下一页和计时，观众端只显示干净画面。
最常见的使用方式
第一种是把长文章变成线下分享。Style A 更适合观点、故事和个人表达，页面可以保留较强的杂志感，讲述节奏也更自然。
第二种是把产品资料、方法论或数据分析做成发布演示。Style B 的网格、数据页、对比页和流程页更容易把复杂信息排清楚。
第三种是为已有内容补齐舞台使用部分。页面已经成形后，继续加入结构化备注、建议时长和演讲者模式，就能把“可以看”推进到“可以讲”。
第四种是围绕同一主题制作一组发布素材。网页 PPT、公众号头图、分享卡和其他平台封面可以共用同一套视觉规则，减少反复确定风格的工作。
它为什么能工作
HTML、CSS 和 JavaScript 都是 Agent 容易读取和修改的文本。标题太长、图片位置不对或页面需要拆分时，它可以直接找到对应代码并调整。浏览器又能马上显示结果，修改后不必等待另一套文件转换流程。
仓库也没有只给一段审美描述。两套完整模板、布局骨架、主题文件、图片提示词、演讲备注规则和检查脚本各自负责一部分工作。Agent 有明确的起点，也知道交付前要检查什么。
视觉规则和演讲规则写在同一套文件里。页面 ID、备注、计时和观众屏也跟着 deck 一起运行，所以内容修改、页面调整和排练可以持续接在一起。
安装与前置条件
官方推荐用一条命令安装。
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill也可以把项目地址直接交给有文件读写和 Shell 权限的 Agent。
请安装这个 Skill：https://github.com/op7418/guizang-ppt-skillClaude Code 和 Codex 都在项目的支持范围内。其他本地 Agent 只要能读取仓库文件、执行命令并打开浏览器，也可以使用核心工作流。运行配套校验脚本需要 Node.js；Codex 配图则使用当前环境可用的图片生成能力。
使用条件与交付方式
项目的核心交付是 HTML deck。页面可以直接在现代浏览器中打开，键盘、滚轮、触屏和底部圆点都能用来翻页，ESC可以进入总览。用了本地图片时，图片放在同级images目录中，由页面通过相对路径读取。
核心演示功能在本地浏览器内运行。排练记录也保存在本地。配图属于可选部分，已经有截图或图片时，可以直接按模板比例整理；需要新图时，再接入 Codex 的图片能力。
适合谁
它适合手里已有文章、Markdown、产品资料或演讲大纲，想把内容做成网页演示的人。
内容创作者可以用杂志风整理观点和故事。产品与技术团队可以用瑞士风呈现发布内容、方法和数据。经常做线下分享的人，则能直接用演讲者模式准备备注、控制时间和管理观众屏。
一场演讲如果还要制作公众号头图、分享卡或其他平台封面，也可以继续沿用同一套视觉规则。页面、现场演示和发布素材会保持同一个主题。
关注AI技能图鉴，持续介绍AI技能
