guizang-ppt-skill

一、TL;DR

guizang-ppt-skill 并不是一个传统的幻灯片排版软件，它本质上是一个给 vibe coding工具用的“设计约束引擎”。关键判断：

• 技术栈：抛弃了复杂的打包构建，完全基于单文件 HTML + CSS + JS，附带 WebGL 和 Motion One。
• 核心逻辑：通过 5 套死颜色的主题预设和 10 种页面骨架，剥夺 AI 的“排版自由”。
• 工作流：在 SKILL.md 中固化了极其严格的 SOP 流程，从澄清需求到交付预检，步步设卡。

“给 AI 自由，它就会还你一坨垃圾；给它框架，它就能批量产出精品。”

二、背景与痛点：AI 时代做 PPT 的新方式

在我的实战中，用 AI 自动写代码已经很顺手了，但让 AI 去生成 UI 界面或 PPT 却总是让人头疼。
最大的痛点在于：AI 懂逻辑，但它没有审美直觉。

• 你让它自己选颜色，它可能会给你一个高饱和度的辣眼睛配色。
• 你让它排版，它可能会把大段文字挤在一个角落，图片随意拉伸。

个人感觉，现在的痛点不是 AI 生成不了代码，而是生成出来的东西“AI 感太重”，像是个没有灵魂的模板。

guizang-ppt-skill 就是为了解决这个问题诞生的。它的思路非常巧妙：既然 AI 没有审美，那就把审美规则写死在 Prompt 里。

三、guizang-ppt-skill 的“极权式美学”与核心机制

这个项目的设计哲学，我愿意称之为“极权式美学”。

1. 绝对不给颜色的自由
在 references/themes.md 中，作者强制定义了 5 套主题（如墨水经典、靛蓝瓷、沙丘等）。
明确要求 AI：不允许自定义 hex 值。这说明作者极其克制，宁可牺牲多样性，也要保住美学的下限。

2. 字体与网格的严格分工

• 大标题必须是衬线字体（Noto Serif SC）
• 正文必须是非衬线字体（Noto Sans SC）
• 元数据必须是等宽字体（IBM Plex Mono）

3. 节奏感控制
这块在我个人实战看来，非常高级。它要求必须规划页面的“深浅主题交替节奏”：

• 每 3-4 页插入 1 个 hero 页
• 连续 3 页以上同主题 = 视觉疲劳，不允许

“保护美学，比给自由更重要。”

四、源码级剖析：如何控制 AI 的行为边界

这个项目是如何让 Claude Code 乖乖听话的？核心在于其知识库（RAG）和工作流的设定。

1. 工作流指令约束

源码位置：SKILL.md
在 SKILL.md 中，有一个非常经典的“6 问澄清清单”：

| # | 问题 | 为什么要问 |
|---|------|-----------|
| 1 | **受众是谁?分享场景?**(行业内部 / 商业发布 / demo day / 私享会) | 决定语言风格和深度 |
...

它要求 AI 在动手前，必须先用这 6 个问题和用户对齐。这不仅是在收集参数，更是在校准 Agent 的生成意图。

2. 预设骨架代替从零生成

源码位置：references/layouts.md
项目提供了 10 种 <section> 骨架。AI 不需要从头写 CSS 和 DOM 结构，只需要挑选骨架、粘贴、填词。

• 这极大降低了 AI 生成错误 HTML 结构的概率。
• 用“填空题”代替了“简答题”。

五、skills 文档随便说

这部分专门聊聊该项目的核心指令文档 SKILL.md。

这个文档在文本组织上极其严谨，属于典型的 S 级 Skill。

• 任务正交分解：从澄清需求 -> 拷贝模板 -> 填充内容 -> 预检，每一步的边界非常清晰。
• 防幻觉机制（精妙之处）：文档中有一节 3.0 · 预检，要求 AI 必须先去 template.html 的 <style> 块里确认类名是否存在。如果不存在，必须补上。这是因为 AI 经常会“幻觉”出一些不存在的 Tailwind 类名，导致样式大崩塌。通过强制“先 Read 后执行”，直接阻断了这种幻觉。
• 建设性评价：这套 SOP 虽然严谨，但在“图片素材缺失”的兜底策略上，还可以进一步优化，比如自动生成带占位图的 HTML 结构供后续替换。

与同类 Skill 对比：

维度	本 Skill	普通 Skill	优秀 Skill
入口设计	明确的 6 步引导流	拿到需求直接生成代码	有确认环节，但缺乏前置约束
质量意识	强制类名预检，严禁修改预设颜色	随意采用用户提供的 hex 色值	给出颜色建议，但仍允许自由发挥
防幻觉机制	强制的 checklist.md P0-P3 自检	无自检环节，直接交卷	简单的代码语法检查

定位判断：

• 本 Skill 属于：S 级
• 最适合场景：线下分享 / 个人强烈风格演讲

六、实战排障与避坑指南

如果你要在实战中使用这个 Skill，可能会遇到以下坑：

故障现象	根因剖析	防御性解决方案
大标题变成了普通非衬线字体	AI 生成了未在 template.html 中定义的 CSS 类名	强制执行预检：核对 h-hero 等类名是否存在
多图对比时，图片撑破了网格	AI 习惯性使用了 aspect-ratio 属性	强制约束：只允许使用 height:26vh 固定高度
图片被浏览器底部工具栏遮挡	AI 擅自使用了 align-self:end 属性	约束排版引擎：统一使用 grid 容器 + align-items:start

这些都是被前人踩过的坑，也是为什么要写一份强制自检清单的原因。

七、总结

研究完 guizang-ppt-skill，个人感觉最大的启发是：在 AI 时代，最好的 Prompt 往往是做减法。

与其花大把力气教 AI 怎么设计才好看，不如直接把好看的模板写死，然后告诉它：“除了填字，你什么都别动”。

“谁能更好地建立约束规则，谁就能用 AI 产出更稳定的交付物。”

参考文献

• op7418/guizang-ppt-skill