10分钟，AI做出能直接演讲的PPT

一行命令装好，六步出 PPT，全程不动 CSS 架构。歸藏的 guizang-ppt-skill 实测，从安装到改稿完整走一遍。

嗨，我是小开ALSKai，让我们一起用AI做点有趣的事。

上周刷歸藏大佬的公众号，看到他发了一个 skill。

叫 guizang-ppt-skill，一句话就能生成杂志风网页 PPT，浏览器打开直接翻页演讲，不需要任何设计工具。

歸藏，CodePilot 的开发者。他把两年线下分享做 PPT 踩过的坑，压成了 10 种布局骨架、5 套主题色、一个单文件 HTML。

我装完跑了一遍，被打动了。PPT 本身确实好看，但真正让我停下来的是它先问了我6个问题才动手。

这篇文章带你从零开始，命令级别一步步走完。

一句命令装好

打开终端，一行命令。

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

「选择 Claude code」

项目级或者用户级都可以，区别就是你需不需要在所有的项目都用到这个 skill，如果是的话就选 global

回车等几秒。装好之后，Skill 会自动出现在 ~/.claude/skills/guizang-ppt-skill/。

装完不用配任何东西。之后在 Claude Code 里说「帮我做一份杂志风 PPT」，Skill 自动触发。

（如果你不用 npx，也可以 git clone 手动装。README 里甚至贴了一段话，让你复制粘贴给 AI 让它自己装也行。）

一句话触发

打开 Claude Code CLI，直接说。

帮我做一份杂志风 PPT

Skill 触发后，Claude 不会直接开始写代|码|。它会先问几个问题。

1. 受众是谁？什么场景？
2. 分享多长时间？
3. 有没有原始素材？还是需要我帮你搭？
4. 图片有没有？放在哪里？
5. 想要哪套主题色？
6. 有没有硬约束（比如品牌色、页数上限）？

我第一次跑的时候，选的「具体主题」、「通用分享/公开演讲」和「有 GitHub 地址和文档」。整个对齐过程不到一分钟。

这一步的价值在于，一旦 slide 结构定错，翻修代价很高。歸藏的 Skill 文档里写了，在设计阶段对齐期望，避免生成后再调整。”

确认大纲，对齐再动手

问答结束后，Claude 不会直接生成 HTML。它先出一页内容大纲。

每页标好了用什么布局（封面、数据大字报、左文右图、Pipeline 等等），用 dark 还是 light 主题，放什么内容。

你在这步就能调整。觉得页数不对、顺序不对、某页方向不对，现在改比 HTML 都生成完了再返工快得多。

我第一次跑完大纲，扫了一眼，行，没问题。让它继续。

拷贝模板，挑布局粘骨架

大纲确认后，Claude 做三件事。

1. 从 assets/template.html 拷贝一份种子文件到你的项目目录
2. 从 references/layouts.md 里挑对应布局的 HTML 骨架，粘进去
3. 把你的内容填进骨架，补充图表、截图、引用

「这一步你什么都不用做，看着它跑就行。」 跑完会告诉你 HTML 生成在哪，一般是项目目录下 ppt/index.html。

template.html 是这个项目的核心。一个完整可运行的 HTML，CSS、WebGL shader、翻页 JS、字体 CDN 全预设好了。你只需要在里面塞 <section>，每个 <section> 就是一页。

每页的格式都是固定的。

<sectionclass="slide light"><divclass="chrome"><div>栏目名</div><div>页|码| / 总页数</div></div><!-- 主内容放这里 --><divclass="foot"><div>页脚说明</div><div>— · —</div></div></section>

chrome + 内容区 + foot，跟杂志排版一脉相承。

浏览器打开预览

HTML 文件生成后，一行命令在浏览器打开。

open "项目名/ppt/index.html"

不需要本地服务器，不需要构建工具。翻页支持键盘 ← →、滚轮、触屏滑动、底部圆点，按 ESC 出缩略图索引。

翻页动效由 Motion One 驱动，本地带了 64KB 的 motion.min.js 兜底，断网也能播。

改内容：90%的调整是改 inline style

翻了一遍发现哪里不对劲。字号太大、间距太挤、某页底部被裁了。动手改。

核心思路：「不动 CSS 架构，只调 inline style。」 直接把 HTML 里的 font-size、margin、gap、height 这些属性改掉，保存刷新，效果立竿见影。

举个例子。我生成的封面页标题是4个字，默认 font-size: 8.5vw 在 16:9 屏宽下撑得太满。把 <h1> 标签上的 font-size: 8.5vw 改成 7.5vw，保存，刷新。舒服了。

<!-- 改之前 --><h1class="h-hero"style="font-size:8.5vw">约束越严风格越稳</h1><!-- 改之后 --><h1class="h-hero"style="font-size:7.5vw">约束越严风格越稳</h1>

再比如数据大字报那一页。5个 stat-card 排下来，加上标题和 foot，整体高度超出了视口。不用动整体布局。就调三个数：padding-top 从 6vh 缩到 3vh，卡片间隙 gap 收紧一点，数字字号从 5.8vw 缩到 4.6vw。保存刷新，内容完整显示了。

（对，就是这么粗暴。你会发现这套模板的 inline style 非常多。感觉歸藏大佬应该是故意这么做的，因为改了不需要懂 CSS 架构？）

切换主题：改6行CSS变量（如果需要手动改的话

「其实可以直接跟 AI 说，帮我改为 XX 风格（比如沙丘风格），然后就改好了，速度很快（不在意那点 token 消耗的话」

这里也还是讲讲手动的方式吧，也不复杂。

5套预设主题色，不能自定义 hex。歸藏说过，颜色搭配错了画面瞬间变丑，保护美学比给自由更重要。

我实测从墨水经典切到沙丘，找到 template.html 里 <style> 标签顶部的 :root{} 块，改6行：

/* 墨水经典 → 沙丘，只改这6行 */--ink: #0a0a0b;        → #1f1a14;--ink-rgb: 10,10,11;   → 31,26,20;--paper: #f1efea;      → #f0e6d2;--paper-rgb: 241,239,234; → 240,230,210;--paper-tint: #e8e5de; → #e3d7bf;--ink-tint: #18181a;   → #2d2620;

保存，刷新浏览器。整个界面从纯黑杂志风变成了炭灰沙色建筑图册的感觉。其余所有颜色都走 var(--...)，自动适配，不用逐处改。

不知道选啥？墨水经典。纯墨黑加暖米白，Monocle 杂志感最强，商业发布闭眼选它。

做科技/AI方向的分享，靛蓝瓷更合适。深靛蓝加瓷白，冷静理性，像学术期刊封面。

讲自然、文化、非虚构叙事，森林墨。深森林绿加象牙色，沉稳有呼吸感，旧版国家地理的调性。

怀旧、人文、文学向？牛皮纸。深棕加暖米，像拆一封牛皮信封。

沙丘最克制。炭灰加沙色，高级中性，适合艺术、设计、创意方向，像建筑图册。

实测踩坑记录

不是一帆风顺。第一版翻了三次车，都在改 inline style 那步修好了。

「数据大字报溢出。」 6个 stat-card 在网格里，加上标题区，整体撑出视口，底部 foot 被裁。修法：padding-top:6vh→3vh，margin-top:6vh→3vh，数字字号 5.8vw→4.6vw，间隙收紧。改完就好很多了

（歸藏的 checklist.md 里 P0 第一条就是「类名必须在 template.html 里有定义」，第二条「图片网格只允许裁底部」，这确实条条都是血泪经验。）

适合谁，不适合谁

适合：线下分享、行业内部讲话、私享会、AI 产品发布、demo day、带强烈个人风格的演讲。

不适合：大段表格数据，信息密度不够。培训课件，没交互。需要多人协作，静态 HTML 没法多人同时编辑。

局限也得说清楚。主题色只有 5 套，品牌色不在里面只能手动改 CSS 变量。对非开发者有门槛，毕竟要碰 HTML 和 CSS。但 4.7k stars、MIT 开源。还要什么自行车。

你打算用它做什么？评论区说说。「如果对你有用，欢迎关注我，让我们一起用 AI 做点有趣的事。」