当大多数 AI PPT 工具还在纠结能不能生成的时候这个技能已经在思考如何让生成的东西经得起审美的审视。一、被一个 HTML 文件震撼到的那个晚上做了 20 年技术说实话很难被什么东西震撼到了。从 DOS 时代的 WPS到 Windows 下的 PowerPoint 97再到后来的 Keynote、Prezi、Slidev、Reveal.js我见过无数的演示文稿工具。每一代技术出来的时候都会说重新定义 PPT但说实话大多数都只是换了个壳子。直到上周我用 guizang-ppt-skill 生成了一份 12 页的 HTML 演示文稿。双击打开的那一刻我愣住了。这不是一份 PPT。这是一本会翻页的电子杂志。衬线字体的大标题像《Monocle》杂志那样优雅非衬线的正文清晰易读等宽字体的数据标注像代码一样精准。背景不是死板的纯色而是如水墨在宣纸上晕开的 WebGL 流体效果——不是花哨的那种是刚刚好、恰到好处的那种。键盘左右键翻页底部有圆点导航按 ESC 还能呼出索引。每一页的入场都有动效不是花哨的飞入飞出而是基于内容逻辑的、有节奏感的过渡。我盯着屏幕看了好几分钟。然后我打开浏览器开发者工具开始研究这个东西到底是怎么实现的。这一研究让我对AI 辅助设计这件事有了全新的理解。二、大多数 AI PPT 工具的问题生成的东西没文化在讲 guizang-ppt-skill 之前我得先说说市面上大多数 AI PPT 工具的通病。做了 20 年技术我见过太多功能很强但审美很差的产品。AI PPT 工具大多也是这个路数——技术参数拉满但出来的东西就是没文化。具体来说有三个层面的问题第一层问题只看生成不看设计大多数 AI PPT 工具的工作流是这样的你给一段文字AI 帮你分成几页每页选一个模板把文字填进去问题在哪里问题在于模板这个概念本身就是有缺陷的。模板的本质是预定义的布局——但一个好的演示文稿每页的布局应该由内容来决定而不是反过来。比如你有一组硬数据要展示用数据大字报的布局才对你讲一个故事用左文右图的叙事布局才对你做流程说明用流水线的布局才对。大多数工具不做这个区分。反正选个模板把文字塞进去完事。第二层问题没有统一的设计语言好的设计不是每页都好看而是整体有气质。你去看 Apple 的发布会 PPT每页都不一样但你一眼就能认出这是 Apple 的风格。为什么因为它有统一的设计语言字号的层级是固定的字体的分工是固定的标题用什么正文用什么数据用什么配色方案是固定的间距和留白是固定的大多数 AI PPT 工具没有这个概念。AI 可能给你选了一个很漂亮的单页模板但和上一页的风格完全不搭。整篇翻下来感觉像在看一个拼贴画。第三层问题技术是手段但不是目的最让我哭笑不得的是很多 AI PPT 工具把酷炫特效当成了卖点。3D 旋转、爆炸动画、粒子效果、眼花缭乱的过渡——说实话这些东西在 2005 年的 Flash 时代就已经玩腻了。真正好的演示动效是服务于内容的而不是反过来。比如你讲一个时间线动效应该帮助观众理解时间的流逝你讲一个对比动效应该帮助观众理解前后的差异你讲一个转折动效应该帮助观众理解变化的发生。但大多数工具不管这些。反正给你一堆动效让你自己选。下面用一张图直观对比一下大多数 AI PPT 工具和guizang-ppt-skill的区别三、guizang-ppt-skill 的核心理念“设计系统而非模板”好现在说回 guizang-ppt-skill。这个技能最打动我的地方不是它能生成什么而是它不能生成什么。让我解释一下。3.1 五套主题不接受自定义颜色打开 guizang-ppt-skill 的文档第一条规则是只允许从 5 套精心调配的预设里选一套不接受用户自定义 hex 值——颜色搭配错了画面瞬间变丑保护美学比给自由更重要。五套主题分别是墨水经典通用 / 商业发布靛蓝瓷科技 / 研究 / 数据森林墨自然 / 可持续 / 文化牛皮纸怀旧 / 人文 / 文学沙丘艺术 / 设计 / 创意下图是其中四套主题的实际效果展示我第一次看到这条规则的时候心里的反应是“怎么这么霸道”但仔细一想这才是真正懂设计的做法。配色是一门学问。不是随便选两个好看的颜色拼在一起就行。要考虑对比度、可读性、情绪传达、视觉层级。大多数人包括很多做了多年 UI 的设计师都选不好颜色。guizang-ppt-skill 替你做了这个决定。你只能从五套里选。这看起来是限制实际上是保护。我试了这五套主题每一套的配色都经得起推敲。墨水经典的黑白灰靛蓝瓷的冷色调牛皮纸的复古暖色调——每一套都有完整的情绪基调。深入研究以墨水经典为例看看代码里是怎么实现的作为一个20年技术老兵我喜欢扒代码。让我带你看看 guizang-ppt-skill 是怎么把设计系统写进代码里的。我们以最常用的 墨水经典主题为例看看它的三个核心维度在代码里是怎么定义的。1. 颜色怎么定义在assets/template.html的第 12-21 行你会看到这样的代码:root{/* 主题色(默认: 墨水经典) */--ink:#0a0a0b;/* 纯墨黑 - 文字和深色背景 */--ink-rgb:10,10,11;/* 墨黑的 RGB 形式 - 用于透明度 */--paper:#f1efea;/* 暖米白 - 浅色背景 */--paper-rgb:241,239,234;/* 米白的 RGB 形式 */--paper-tint:#e8e5de;/* 米白的深色变体 */--ink-tint:#18181a;/* 墨黑的浅色变体 */}关键设计思想所有颜色都通过 CSS 变量定义所有其他地方都用var(--ink-rgb)、var(--paper-rgb)来引用。切换主题只需要替换这 6 行代码其他地方不用动。2. 字体怎么定义在第 23-28 行字体策略被明确地定义了:root{/* 字体(跨主题固定) */--mono:IBM Plex Mono,ui-monospace,monospace;--serif-en:Playfair Display,Source Serif 4,Georgia,serif;--serif-zh:Noto Serif SC,source-han-serif-sc,serif;--sans-zh:Noto Sans SC,source-han-sans-sc,sans-serif;}关键设计思想衬线字体Playfair、Noto Serif SC给标题和数字——杂志感、出版物感非衬线字体Noto Sans SC给正文——清晰、现代、易读等宽字体IBM Plex Mono给代码和元数据——技术感、精确感3. 布局怎么定义在第 91-104 行布局工具类被系统地定义了.grid-6{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:4vw 6vw}/* 3x2 网格 */.grid-9{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3vh 4vw}/* 3x3 网格 */.grid-4{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:4vh 6vw}/* 2x2 网格 */.split{display:grid;grid-template-columns:1fr 1fr;gap:4vw}/* 左右等分 */.split-55{display:grid;grid-template-columns:55fr 45fr;gap:5vw}/* 55:45 分栏 */关键设计思想每种布局类对应一种叙事场景用 CSS Grid 实现灵活的响应式布局所有间距用vw单位保持在不同屏幕上的比例一致下面是这些代码在 template.html 中的实际样子小白也能看懂的版本总结一下guizang-ppt-skill 的核心不是让 AI 生成漂亮的页面而是把一套经过反复打磨的设计系统用代码固化下来让 AI 严格按照这套系统去生成。这就是为什么它比大多数 AI 工具好看——不是 AI 更会设计而是这套设计系统本身就经过了专业设计师的反复打磨。3.2 三种字体分工明确guizang-ppt-skill 的字体策略非常清晰衬线标题Noto Serif SC Playfair Display 非衬线正文Noto Sans SC Inter 等宽元数据IBM Plex Mono这不是随便选的。衬线字体Noto Serif SC、Playfair Display用在标题上给人一种杂志感、“出版物感”——这是它区别于其他工具的核心气质。非衬线字体Noto Sans SC、Inter用在正文清晰、现代、易读。等宽字体IBM Plex Mono用在数据标注、代码、元数据上给人一种精确感、“技术感”。大多数 AI PPT 工具不做这个区分。标题和正文用同一种字体或者随便换几种好看但不搭配的字体。结果就是整篇没有层级感。guizang-ppt-skill 的字体分工让你一眼就能看出这个是标题这个是正文这个是数据。3.3 十种布局对应十种叙事场景这是我觉得最聪明的设计。guizang-ppt-skill 不是提供100个模板让你选而是提供10种布局对应10种叙事场景Layout用途对应叙事阶段1. 开场封面第1页钩子Hook2. 章节幕封每幕开场定调Context3. 数据大字报抛硬数据主体Core4. 左文右图身份反差 / 故事主体Core5. 图片网格多图对比 / 截图实证主体Core6. 两列流水线工作流程主体Core7. 悬念收束 / 问题页幕末 / 收尾转折Shift8. 大引用页衬线金句收束Takeaway9. 并列对比旧模式 vs 新模式转折Shift10. 图文混排信息密集的图文页主体Core这背后的理念是演示文稿是一种叙事而不是信息的罗列。一个好的演示应该有叙事弧Narrative Arc钩子Hook→ 定调Context→ 主体Core→ 转折Shift→ 收束Takeaway每一种布局都对应叙事弧上的一个节点。比如数据大字报适合在主体部分抛出硬数据大引用页适合在收束部分留下金句章节幕封适合在每幕开场做节奏转换。这不是模板这是叙事设计系统。核心洞察这十种布局不是让你随便选而是根据你现在想表达的叙事目的选最合适的布局。比如你想开场抓人用 Layout 1开场封面你想抛出硬数据用 Layout 3数据大字报你想展示流程用 Layout 6两列流水线你想收束留悬念用 Layout 7悬念收束这就是叙事设计系统的魅力——每一个选择都有明确的目的。四、技术实现深度拆解一个 HTML 文件里藏了多少巧思好了理念讲完了现在来聊聊技术实现。我把 guizang-ppt-skill 生成的 HTML 文件从头到尾读了一遍说实话每看一行都有新发现。4.1 单文件 HTML 的哲学guizang-ppt-skill 生成的是单文件 HTML。这是什么意思意思是 CSS、JavaScript、WebGL Shader、字体/图标 CDN 引用——全在这一个文件里。你不需要任何构建工具不需要 npm install不需要本地服务器。双击就能打开拷到 U 盘里插到投影仪上就能演示断网也能用。这在现代前端开发里简直是复古——但对于演示文稿这个场景来说这才是正确的选择。你有没有过这种经历花了好几个小时做了一个基于 Web 的演示结果到了现场要么网络不好要么环境不支持要么构建出来的东西在某个浏览器里出问题单文件 HTML 解决了所有这些问题。4.2 WebGL 流体背景克制优于炫技最让我惊艳的是它的 WebGL 背景。但你知道吗这个 WebGL 背景只在 hero 页封面、章节幕封可见普通正文页几乎看不见。文档里写得很清楚克制优于炫技 — WebGL 背景只在 hero 页透出普通页几乎看不见。这让我想起了乔布斯发布会的 PPT——他从不搞花里胡哨的东西但关键节点的视觉冲击是精准的。guizang-ppt-skill 的 WebGL 实现有几个细节值得一提细节一主题平滑插值当你翻到 hero 页的时候颜色和 shader 会柔顺过渡而不是突然切换。这需要在 JavaScript 里监听翻页事件然后对 WebGL 的 uniform 变量做插值动画。这不是什么难技术但大多数工具根本不会想到要做。细节二离线可用WebGL shader 是直接内嵌在 HTML 里的不依赖外部加载。而且它还做了降级处理——如果浏览器不支持 WebGL或者 JavaScript 被禁用页面依然能正常显示只是没有流体效果而已。这叫做优雅降级——很多现代前端框架早就忘了这个原则。细节三性能优先WebGL 流体效果虽然看起来复杂但实际性能开销很低。因为它只在 hero 页激活而且 shader 的算法做了优化。我用 Chrome DevTools 测了一下60fps 稳稳的风扇都不转。4.3 翻页动效系统Motion One 5 种 Recipeguizang-ppt-skill 的动效系统用的是Motion One一个非常轻量的 JavaScript 动画库压缩后只有 64KB。但有意思的不是用了什么库而是它的动效设计哲学。文档里写着5 种 recipe 自动匹配布局本地 CDN 双保险离线可用。Recipe这个词用得很好。它不是给你 100 种动效让你自己选而是给你 5 种配方每种配方对应一种布局类型。比如数据大字报用什么入场动效左文右图用什么入场动效流水线用什么入场动效这些都已经替你决定好了。这背后的理念是动效应该服务于内容而不是装饰内容。一个数据大字报的动效应该突出数字的冲击力一个流水线的动效应该帮助理解步骤的顺序一个大引用页的动效应该突出句子的分量。大多数工具不懂这个。反正给你一堆飞入飞出的动画让你自己选。4.4 CSS Grid 系统结构优于装饰guizang-ppt-skill 的布局系统是基于 CSS Grid 实现的。但不是那种随便写几个 grid-template-columns的做法而是一套完整的网格系统。比如grid-2-7-514 列网格2-7-5 分栏grid-2-6-614 列网格2-6-6 分栏grid-2-8-414 列网格2-8-4 分栏grid-3-36 列网格两等分grid-66 列网格grid-44 列网格为什么是 14 列因为 14 可以分成很多种组合1-6-7、2-5-7、3-4-7 等等灵活性很高。而且这套网格系统有一个很重要的原则结构优于装饰 — 不用阴影、不用浮动卡片、不用 padding box一切信息靠大字号 字体对比 网格留白。这是非常克制的设计哲学。大多数工具的做法是加阴影、加边框、加圆角、加渐变——靠装饰来掩盖内容本身的平庸。guizang-ppt-skill 反其道而行之。它把装饰拿掉逼你把内容层级做清晰。4.5 图片处理策略图片是第一公民文档里有一句话我特别认同图片是第一公民 — 图片只裁底部保证顶部和左右完整网格用 height:Nvh 固定不要用 aspect-ratio 撑。大多数 AI PPT 工具把图片当二等公民——随便丢进去随便拉伸一下或者用 aspect-ratio 强行裁剪。guizang-ppt-skill 的图片处理策略非常细致场景推荐比例特殊处理左文右图主图16:10 或 4:3max-height:56vh图片网格固定 height:26vh不用 aspect-ratio会撑破左小图 右文字1:1 或 3:2用 grid align-items:start全屏主视觉16:9max-height:64vh图文混排小插图3:2 或 3:4灵活处理这里有一个很有意思的细节图片绝不使用 align-self:end——因为会滑到 cell 底被浏览器工具栏遮挡。这是踩过多少坑才总结出来的经验大多数工具根本不会考虑这种边缘情况。4.6 主题节奏规划视觉呼吸感这是一个非常高级的设计理念大多数 AI PPT 工具甚至都没有这个概念。guizang-ppt-skill 有严格的主题节奏规则- 每页 section 必须带 light / dark / hero light / hero dark 之一 - 连续 3 页以上同主题 视觉疲劳不允许 - 8 页以上必须有 ≥1 个 hero dark ≥1 个 hero light - 整个 deck 不能只有 light 正文页必须有 dark 正文页制造呼吸 - 每 3-4 页插入 1 个 hero 页封面/幕封/问题/大引用这是什么意思意思是你的演示应该有视觉节奏。想象一下如果一整篇演示都是白底黑字观众会视觉疲劳。但如果你穿插一些深色页面、一些 hero 页面观众的眼睛就会有呼吸感。这就像音乐——不能一直是高潮要有起承转合。下面用一张图直观展示好的节奏和坏的节奏的区别大多数 AI PPT 工具没有这个概念。每页都独立设计根本不考虑整体的视觉节奏。五、为什么我说这个技能代表了AI 辅助设计的正确方向研究完 guizang-ppt-skill 的实现我最大的感受是它不是让 AI 替你做设计而是让 AI 帮你执行一个已经高度优化的设计系统。这是本质的区别。下面用一张图直观展示设计系统和模板的本质区别5.1 AI 的角色执行者而非决策者大多数 AI PPT 工具的逻辑是你给我内容我帮你设计。但问题在于AI 真的懂设计吗它能理解叙事弧吗它能理解视觉节奏吗它能理解情绪传达吗目前来看还不能。guizang-ppt-skill 的逻辑是反过来的我先把设计系统做出来五套主题、三种字体分工、十种布局、主题节奏规则、动效 recipe然后让 AI 帮你执行这个系统。AI 不做设计决策——设计决策已经由人类设计师做好了。AI 做的是根据你的内容判断这一页应该用什么布局根据你的主题选择应该用什么颜色根据叙事弧规划整体的视觉节奏这才是 AI 辅助设计的正确打开方式。5.2 设计系统的价值可复用、可学习、可迭代guizang-ppt-skill 本质上是一个可执行的设计系统。什么是设计系统设计系统不是一套 Sketch 文件不是一个 UI 组件库。设计系统是一套规则——关于字体、颜色、布局、动效、节奏的规则。而 guizang-ppt-skill 把这套规则写进了代码里。这意味着可复用每次生成的东西都遵循同一套设计语言可学习你可以通过研究这个系统学习什么是好的演示设计可迭代系统本身可以不断优化而不是从零开始大多数 AI 工具的问题是它们没有设计系统。每次生成都是独立的没有积累没有学习。5.3 克制的力量限制带来的自由guizang-ppt-skill 给我最大的启发是限制有时候是一种解放。只能选五套主题没关系这五套已经够用了而且保证不会出错字体分工是固定的没关系这样你不用去纠结标题用什么字体布局只有十种没关系这十种覆盖了绝大多数演示场景动效不能自己选没关系系统替你选的肯定比你乱选的好这些限制看起来是束缚实际上是解放。它们把你从选什么模板、“选什么颜色”、选什么字体这些琐碎的决策中解放出来让你专注于真正重要的事情内容本身。这才是工具的价值——不是给你更多选择而是帮你减少选择。六、写在最后研究完 guizang-ppt-skill我最大的感受是大多数 AI 工具还停留在让机器替人做的阶段但这个技能已经在思考人和机器应该如何协作。它没有试图让 AI 成为一个设计师——它知道 AI 还做不到。它做的是人类设计师创造一套高质量的设计系统AI 帮助人类执行这个系统人类专注于内容和叙事本身这才是 AI 时代工具设计的正确方向。不是机器取代人而是机器放大人。20 年技术生涯我见过太多工具来来去去。大多数工具追求的是功能最多、“效果最炫”、“速度最快”。但真正伟大的工具追求的是最懂用户、“最解放创造力”、“最尊重设计规律”。从这个角度来说guizang-ppt-skill 是我近年来见过的最有想法的演示工具之一。它不是在做又一个 AI PPT 工具。它是在重新思考在 AI 时代演示文稿应该是什么样子这个问题值得我们每个人思考。七、互动时间1你用过 guizang-ppt-skill 吗或者有没有其他让你眼前一亮的 AI 工具欢迎在评论区分享你的发现。福利时间关注我的公众号回复【guizang】即可获取guizang-ppt-skill 的完整安装教程五种主题色的详细色值表十一种布局的使用场景指南主题节奏规划的实际案例真正的进步不是用机器取代人而是让机器把人从琐碎中解放出来去做那些只有人才能做的事。