夜雨聆风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 不会直接开始写代码。它会先问几个问题。
受众是谁？什么场景？ 分享多长时间？ 有没有原始素材？还是需要我帮你搭？ 图片有没有？放在哪里？ 想要哪套主题色？ 有没有硬约束（比如品牌色、页数上限）？
我第一次跑的时候，选的「具体主题」、「通用分享/公开演讲」和「有 GitHub 地址和文档」。整个对齐过程不到一分钟。
这一步的价值在于，一旦 slide 结构定错，翻修代价很高。歸藏的 Skill 文档里写了，在设计阶段对齐期望，避免生成后再调整。”
确认大纲，对齐再动手
问答结束后，Claude 不会直接生成 HTML。它先出一页内容大纲。
每页标好了用什么布局（封面、数据大字报、左文右图、Pipeline 等等），用 dark 还是 light 主题，放什么内容。
你在这步就能调整。觉得页数不对、顺序不对、某页方向不对，现在改比 HTML 都生成完了再返工快得多。
我第一次跑完大纲，扫了一眼，行，没问题。让它继续。
拷贝模板，挑布局粘骨架
大纲确认后，Claude 做三件事。
从 assets/template.html拷贝一份种子文件到你的项目目录从 references/layouts.md里挑对应布局的 HTML 骨架，粘进去把你的内容填进骨架，补充图表、截图、引用
「这一步你什么都不用做，看着它跑就行。」 跑完会告诉你 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 做点有趣的事。🌿」
