一个广受好评的PPT skill是如何做出来?
- 2026-11-09 21:27:39
大家好，我是AI实战博主过客，累计打造100+Coze落地玩法、60+Skill实战项目，现阶段AI编程实战连载中，案例素材获取过客AI官网https://guokeai.com.cn，欢迎下方关注！
这两天我在翻 Guizang PPT Skill。这是一个广受好评的PPT skill，归藏老师功力深厚，据他自己说，拿出了毕生的设计所学。
本来只是想看看它为什么能让 AI 做出那么稳定的网页 PPT。结果越看越觉得，这东西有点像一个设计师傅留下来的工作台。
不是那种贴在墙上的口号。
也不是一句看起来很高级的提示词。
而是一整套工具、规矩、模板、检查单，全都摆在桌上。AI 进来以后，不是随便发挥，而是照着这套东西干活。
我突然意识到，很多人写 Skill 的问题，可能就出在这里。
我们总想让 AI 更自由。
但 Guizang 的答案刚好相反。
它让 AI 少一点自由，多一点规矩。
归藏老师最厉害的地方，是不相信 AI 的审美直觉
很多提示词都喜欢这么写：
请做一份高级、有设计感、视觉统一的 PPT。
听起来没毛病。
但问题是，高级是什么？
有设计感是什么？
视觉统一又是什么？
你这么问 AI，它大概率会给你一堆熟悉的东西：大标题、渐变背景、圆角卡片、阴影、几何装饰。第一眼好像还行，看多了就有一股浓浓的紫色AI模板味。
归藏老师一上来就把 AI 的活动范围框死。
只做单文件 HTML 横向翻页 PPT。
只给两种风格。
一种叫电子杂志 × 电子墨水。
一种叫瑞士国际主义。
你看，这就很有意思。
它不是说，我什么都能做。
它说，我就把这两条路走深。
电子杂志风负责人文、行业观察、商业发布。
瑞士风负责科技产品、数据汇报、工程分享。
每条路都有模板、主题色、布局库、检查清单。
这就像你请一个设计师来做东西。他不是坐下来凭空想，而是先打开品牌手册、组件库、版式规范，然后再开始动手。
这才是专业。
我以前觉得 Skill 是步骤化的提示词，现在觉得它更像剧组分工
如果把普通提示词比作一句导演要求，那 Guizang 更像一个剧组。
SKILL.md 是导演。
它负责告诉大家，这个片子怎么拍，先干什么，后干什么。
assets/template.html 和 template-swiss.html 是摄影棚。
场景已经搭好了。灯光、机位、背景、翻页逻辑，全都在里面。
references/layouts.md 和 layouts-swiss.md 是分镜表。
每一页怎么摆，什么内容适合什么版式，不靠临场发挥。
references/swiss-layout-lock.md 是场记。
谁要是乱加戏，马上拦住。
references/checklist.md 是审片表。
做完之后一条条看，有没有穿帮，有没有跑偏。
scripts/validate-swiss-deck.mjs 更狠，像质检机器。
有些问题不靠感觉，直接跑脚本。
这套东西放在一起，AI 才不容易飘。
我觉得这是做 Skill 最关键的变化：不要把经验写成建议，要把经验拆成角色、文件和动作。
Swiss locked mode 这件事，特别值得抄
Guizang 里有一个概念，我看完很喜欢，叫 Swiss locked mode。
它的意思大概是：如果你选择瑞士风，就别给我自由发挥了。
正文页只能从登记的 22 个版式里选。
每页都必须写 data-layout="Sxx"。
不许临时发明 P23、P24。
SVG 只能画几何图形，不能在里面写可见文字。
图片必须先确定槽位，再确定比例。
说实话，这几条看起来有点死板。
但设计很多时候就是死板带来的稳定。
瑞士风为什么容易翻车？
因为它看起来很简单。
无衬线字体，大字号，网格，留白，单色高亮。
好像谁都能模仿。
但真正做的时候，标题一居中，味道没了。加一点圆角，味道没了。放两个强调色，味道没了。图片加个阴影，味道又没了。
这就是所谓的，看起来像，但骨头不对。
Guizang 的 locked mode，就是在守骨头。
它不是让 AI 学会欣赏瑞士风。
它是直接告诉 AI：这些骨头不能动。
我觉得以后写任何 Skill，都应该有自己的 locked mode。
写 PRD 的 Skill，要规定不能先写功能清单，必须先写用户问题。
写公众号文章的 Skill，要规定开头不能百科定义，必须从具体场景或判断切入。
写数据分析的 Skill，要规定不能先下结论，必须先写口径、样本、异常值。
你不把这些锁住，AI 就会回到它最舒服的平均状态。
checklist 不是装饰，是把踩坑变成资产
Guizang 的 checklist 也很值得看。
它不是那种很虚的清单。
比如保持版式美观。
比如注意信息层级。
比如提高视觉冲击力。
这些话当然都对，但没什么用。
Guizang 的清单是从真实坑里长出来的。
比如瑞士风顶部标题默认左上，不是居中。
比如大字号必须用 min(Xvw, Yvh)，而且 Y 要大于等于 X 乘以 1.6。
比如图片要直角、同高、无阴影、无圆角。
比如底部内容不能碰到翻页导航。
这些规则很细，细到有点啰嗦。
但正是这种啰嗦，让 Skill 变得可靠。
474行的skill.md值得逐行学习
skill.md是skill的灵魂，但是你要知道，这个md的上限是500行，归藏老师写了足足474行，而且相当规范。值得咱们一块来学习。为了不影响阅读，我贴在文章最下面。
如果让我照着 Guizang 写一个新 Skill，我会这么做
我现在会先停下来，不急着写
第一步，我会先问，这个 Skill 到底只解决哪一个具体任务。
比如，不是做内容，而是做 AI 工具实测文章。
不是做设计，而是做 SaaS 产品首页。
不是做 PPT，而是做科技发布会网页 Deck。
第二步，我会定 2 到 4 个模式，不贪多
比如 AI 工具文章可以分成实战评测、深度解析、教程指南、踩坑复盘。
每一种模式都要有适用场景。
第三步，我会准备模板。
文章结构模板、标题模板、案例模板、结尾模板。
不要让 AI 每次凭感觉搭结构。
第四步，我会写 lock 文件。
什么必须保留。
什么禁止出现。
什么字段不能缺。
什么流程不能跳。
第五步，我会写 checklist。
而且不写漂亮话。
只写真实问题。
比如开头是否像百科。
案例是否是编的。
标题是否只有情绪没有信息。
每个结论有没有支撑。
第六步，如果能写脚本，我会写脚本。
能自动查标题层级，就不要靠眼睛。
能自动查缺失字段，就不要靠感觉。
能自动查图片比例，就不要等用户发现。
到了这一步，一个 Skill 才算开始有骨架。
写到这里，我有点明白 Guizang 的底层哲学了
它不是在追求 AI 的创造力。
它在追求 AI 的可控性。
这听起来不够性感。
但很真实。
真正要交付东西的时候，你不需要 AI 每次灵光一现。
你需要它每次都别翻车。
Guizang 用两套风格限制它。
用模板托住它。
用 layout lock 管住它。
用 checklist 修正它。
用验证脚本检查它。
这其实就是把一个专业人的经验，拆成 AI 可以执行的动作。
我觉得这才是 Skill 最有价值的地方。
过客AI官网已上线！权益全新升级，介绍戳
大家好，我是AI实战博主过客，累计打造100+Coze落地玩法、60+Skill实战项目，现阶段AI编程实战连载中，案例素材获取过客AI官网https://guokeai.com.cn，欢迎下方关注！
name: guizang-ppt-skilldescription: 生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背景、章节幕封、数据大字报、图片网格等模板。提供两种风格：① "电子杂志 × 电子墨水"（衬线 + 流体背景 + 暖色） ② "瑞士国际主义"（无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮）。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到"杂志风 PPT"、"瑞士风 PPT"、"Swiss Style"、"horizontal swipe deck"时使用。
Magazine Web Ppt
这个 Skill 做什么
生成一份单文件 HTML的横向翻页 PPT，提供两种可选的视觉基调：
风格 A · 电子杂志 × 电子墨水（默认）
- WebGL 流体 / 等高线 / 色散背景
（hero 页可见） - 衬线标题（Noto Serif SC + Playfair Display）+ 非衬线正文 + 等宽元数据
适合：人文分享、行业观察、商业发布、需要"杂志感"的演讲 模板： assets/template.html· 主题色：references/themes.md· 布局：references/layouts.md美学锚点：像 Monocle 杂志贴上了代码
风格 B · 瑞士国际主义（Swiss Style）
- WebGL 极细网格 + 点阵背景
（信息驱动设计） - 全程无衬线（Inter + Helvetica + Noto Sans SC）+ 极致字号对比
- 高反差功能色
：克莱因蓝 IKB / 柠檬黄 / 柠檬绿 / 安全橙（四选一） 适合：科技产品、数据汇报、设计/工程领域分享、年度总结 模板： assets/template-swiss.html· 主题色：references/themes-swiss.md· 布局：references/layouts-swiss.md美学锚点：像 Massimo Vignelli + Helvetica Forever
两种风格共享：横向翻页（键盘 ← →、滚轮、触屏、ESC 索引）、Lucide 图标、Motion One 入场动效（本地 + CDN 双保险）。
何时使用
合适的场景：
线下分享 / 行业内部讲话 / 私享会 AI 新产品发布 / demo day 带有强烈个人风格的演讲 需要"一次做完，不用翻页工具"的网页版 slides
不合适的场景：
大段表格数据、图表叠加（用常规 PPT） 培训课件（信息密度不够） 需要多人协作编辑（这是静态 HTML）
工作流
Step 1 · 需求澄清(动手前必做)
如果用户已经给了完整的大纲 + 图片,可以跳过直接进 Step 2。
如果用户只给了主题或一个模糊想法,用这 6 个问题逐个对齐后再动手。不要基于猜测就开始写 slide——一旦结构定错,后期翻修代价很高:
运行环境适配
- 在 Codex 中
:用普通对话直接询问用户,不要调用 Claude Code 的 ask question/ask_question机制,也不要假设这些工具可用。一次最多问 1-3 个最关键问题;如果信息缺口不影响开工,先做合理假设并在回复里说明。 - 在 Claude Code 中
:可以继续使用原有的 ask question交互方式来逐项澄清。
7 问澄清清单
|
| 问题 | 为什么要问 |
|---|------|-----------|| 1 | 风格 A 还是 B?(电子杂志风 / 瑞士国际主义风) | 必须先问,决定用哪个 template + layouts + themes 文件 || 2 | 受众是谁?分享场景?(行业内部 / 商业发布 / demo day / 私享会) | 决定语言风格和深度 || 3 | 分享时长? | 15 分钟 ≈ 10 页,30 分钟 ≈ 20 页,45 分钟 ≈ 25-30 页 || 4 | 有没有原始素材?(文档 / 数据 / 旧 PPT / 文章链接) | 有素材就基于素材,没有就帮他搭 || 5 | 有没有图片?放在哪? | 详见下方"图片约定" || 6 | 想要哪套主题色? | 杂志风 5 套(themes.md) / 瑞士风 4 套(themes-swiss.md),挑一 || 7 | 有没有硬约束?(必须包含 XX 数据 / 不能出现 YY) | 避免返工 |
风格选择参考(问题 1)
| A · 电子杂志风 | |
| B · 瑞士国际主义风 | |
Data Hero 布局是瑞士风专长) | |
大纲协助(如果用户没有大纲)
用"叙事弧"模板搭骨架,再填内容:
钩子(Hook) → 1 页 : 抛一个反差 / 问题 / 硬数据让人停下来定调(Context) → 1-2 页 : 说明背景 / 你是谁 / 为什么讲这个主体(Core) → 3-5 页 : 核心内容,用 Layout 4/5/6/9/10 穿插转折(Shift) → 1 页 : 打破预期 / 提出新观点收束(Takeaway) → 1-2 页 : 金句 / 悬念问题 / 行动建议
叙事弧 + 页数规划 + 主题节奏表(见 layouts.md),三张表对齐后再进 Step 2。
大纲建议保存为 项目记录.md 或 大纲-v1.md,便于后续迭代。
图片约定(告知用户)
在动手前向用户说清:
- 文件夹位置
: 项目/XXX/ppt/images/下(和index.html同级) - 命名规范
: {页号}-{语义}.{ext},例如01-cover.jpg/03-figma.jpg/05-dashboard.png 页号补零便于排序 语义用英文,短、具体、和内容对应 - 规格建议
: 单张 ≥ 1600px 宽(避免大屏模糊) JPG 用于照片/截图,PNG 用于透明 UI/图表 总大小控制在 10MB 内(影响翻页流畅度) - 如何替换
:保持同名覆盖最稳(HTML 里不用改路径);如果文件名变了,记得全局搜 images/旧名改成新名 - 没图怎么办
:和用户对齐,可以先用占位色块生成结构,等图片后期补;但要告知 layout 4/5/10 等图文混排页没图就没法验证视觉效果
Codex 配图生成(可选)
如果当前运行环境是 Codex,完成 deck 初稿后,主动问用户是否需要用 GPT-M 2.0 生成配图并插入 PPT。不要默认生成。
推荐询问方式:
要不要为这份 PPT 生成几张配图?可以做成人文纪实照片、杂志风信息图、流程/对比/系统关系图,或把截图再设计成统一的杂志风视觉。
如果用户确认生成,再问他想要哪种图片类型或风格;如果用户没有偏好,根据页面内容自行推荐 1-3 张最值得生成的配图。
生成配图时遵守:
提示词保持简短,只框定主题、用途、风格和比例,不要写长篇摄影指导 图片风格必须贴合当前 deck 风格:风格 A 用"电子杂志 × 电子墨水";风格 B 用"瑞士国际主义 / Swiss Style" 信息图、图表、截图再设计里的文字语言必须跟随用户正在使用的语言;中文 deck 用中文,英文 deck 用英文 先看 references/image-prompts.md选择图片类型和基础提示词配图比例必须匹配最终落位:主视觉 16:9,左文右图 16:10 / 4:3,信息图 16:9 / 16:10,截图再设计 16:10,图文混排小图 3:2 / 3:4,网格图统一高度裁切 生成后的图片放到 images/下,命名遵守{页号}-{语义}.{ext}
Step 2 · 拷贝模板
根据 Step 1 选定的风格,拷贝对应的模板到目标位置（通常是 项目/XXX/ppt/index.html），同时在同级建一个 images/ 文件夹准备接图片。
mkdir -p ”项目/XXX/ppt/images”# 风格 A · 电子杂志风cp ”<SKILL_ROOT>/assets/template.html” ”项目/XXX/ppt/index.html”# 或 风格 B · 瑞士国际主义风cp ”<SKILL_ROOT>/assets/template-swiss.html” ”项目/XXX/ppt/index.html”
两个 template*.html 都是完整可运行的文件——CSS、WebGL shader、翻页 JS、字体/图标 CDN 全已预设好,只有 <!-- SLIDES_HERE --> 占位符等待你填充 slide 内容。
注意:风格 A 和 B 不能混用。layouts.md 里的类（如 .h-hero 衬线大标题、.display-zh 等）只在 template.html 有定义；layouts-swiss.md 里的类（如 .kpi-hero、.accent-block、.span-N、.dots 等）只在 template-swiss.html 有定义。一份 deck 只能选一套。
2.1 · 必改占位符（容易漏）
拷贝后立刻改掉以下占位符，否则浏览器 Tab 会显示"[必填] 替换为 PPT 标题"这种尴尬文字：
<title> | [必填] 替换为 PPT 标题 · Deck Title | 一种新的工作方式 · Luke Wroblewski) |
每次拷贝完 template.html 第一件事:grep 一下"[必填]" 确认全部替换完。
2.2 · 选定主题色(5 套预设 · 不允许自定义)
本 skill 只允许从 5 套精心调配的预设里选一套,不接受用户自定义 hex 值——颜色搭配错了画面瞬间变丑,保护美学比给自由更重要。
|
| 主题 | 适合 |
|---|------|------|| 1 | 🖋 墨水经典 | 通用 / 商业发布 / 不知道选啥的默认 || 2 | 🌊 靛蓝瓷 | 科技 / 研究 / 数据 / 技术发布会 || 3 | 🌿 森林墨 | 自然 / 可持续 / 文化 / 非虚构 || 4 | 🍂 牛皮纸 | 怀旧 / 人文 / 文学 / 独立杂志 || 5 | 🌙 沙丘 | 艺术 / 设计 / 创意 / 画廊 |
操作:
基于内容主题推荐一套,或直接问用户选哪一套 打开 references/themes.md,找到对应主题的:root块- 整体替换
assets/template.html(已拷贝版本)开头 :root{块里标有"主题色"注释的那几行(--ink/--ink-rgb/--paper/--paper-rgb/--paper-tint/--ink-tint) 其他 CSS 都走 var(--...),无需任何其他改动
硬规则:
一份 deck 只用一套主题,不要中途换色 不要接受用户给的任意 hex 值——委婉拒绝并展示 5 套让选 不要混搭(例如 ink 取墨水经典、paper 取沙丘)——会彻底违和
Step 3 · 填充内容
3.0 · 预检:类名必须在模板的 <style> 里有定义（最重要）
这是所有生成问题的源头。layouts 骨架使用了很多类名,如果模板的 <style> 里没有对应定义,浏览器会 fallback 到默认样式——大标题字体错、卡片挤成一团、pipeline 糊成一行、图片堆到页面底部。
两种风格类名互不通用(再次强调):
风格 A 模板里有 h-hero(衬线)、stat-card、grid-2-7-5、frame等风格 B 模板里有 h-hero(无衬线)、kpi-hero、accent-block、span-N、dots、grid-12等同名 class 在两个模板里视觉表现完全不同(例:风格 A 的 h-hero是 Noto Serif SC 衬线,风格 B 的h-hero是 Inter 无衬线)
在写任何 slide 代码之前:
- 先 Read 当前用的模板
(至少读到 <style>块末尾):
风格 A → assets/template.html风格 B → assets/template-swiss.html
- 对照对应 layouts 文件的 Pre-flight 列表
,确认你要用的每个类都在 <style>里存在 如果某个类缺失:在模板的 <style>里补上,不要在每个 slide 里 inline 重写- 模板是唯一的类名来源
——不要发明新类名,如需自定义用 style="..."inline
风格 A 常见容易遗漏的类:h-hero / h-xl / h-sub / h-md / lead / kicker / meta-row / stat-card / stat-label / stat-nb / stat-unit / stat-note / pipeline-section / pipeline-label / pipeline / step / step-nb / step-title / step-desc / grid-2-7-5 / grid-2-6-6 / grid-2-8-4 / grid-3-3 / grid-6 / grid-3 / grid-4 / frame / frame-img / img-cap / callout / callout-src / chrome / foot
风格 B 常见容易遗漏的类(2026-05 重构后):
画布: canvas-card/chrome-min排版: h-hero(无衬线 7.4vw weight 200) /h-statement(9.6vw) /h-xl/h-md/t-cat(SemiBold 600 小标) /t-meta(mono uppercase) /lead/num-mega/mono卡片(四类互斥): card-ink/card-accent/card-fill/card-outlined网格: grid-12/grid-2-9/grid-2-9-5/span-N时间线: timeline-v+tl-node+tl-axis+dot/timeline-h+tl-h-node+tl-h-axis图表: kpi-tower-row+bar-tower/h-bar-chart+bar-row+bar-fill/spec-bars+bar-vert装饰: dot-mat(SVG mask 实心点)/ring-mat(描边圆)/cross-mat(× 网格)/hr-hairline版式专属: cover-split/closing-split/duo-compare+vrule/manifesto-top+ink-banner-full/three-forces/loop-diagram/matrix-fill+matrix-cell/brief-grid+brief-card/system-diagram/why-now-grid/four-cards/stacked-ledger+ledger-row/tech-spec/image-hero+hero-img-wrap+hero-overlay-block+hero-stats图片混排: frame-img/fit-contain/r-21x9/r-16x9/r-16x10/h-22/h-26/swiss-img-split/swiss-img-grid/swiss-img-caption/swiss-keyline/swiss-linedspacing token: --sp-3...--sp-13(8/12/16/24/32/40/48/64/80/96/160 px)
3.0.5 · 规划主题节奏（和类预检同等重要)
在挑布局之前,必须先列出每一页的主题 class(hero dark / hero light / light / dark)并写到文档或草稿里对齐。详细规则看 references/layouts.md 开头的"主题节奏规划"一节。
强制规则:
每页 section 必须带 light/dark/hero light/hero dark之一,不要只写hero连续 3 页以上同主题 = 视觉疲劳,不允许 8 页以上必须有 ≥1 个 hero dark+ ≥1 个hero light整个 deck 不能只有 light正文页,必须有dark正文页制造呼吸每 3-4 页插入 1 个 hero 页(封面/幕封/问题/大引用)
生成后自检:grep 'class="slide' index.html 列出所有主题,人工确认节奏合理再交付。
3.1 · 挑布局
不要从零写 slide。打开对应的 layouts 文件,里面有 10 种现成布局骨架,每种都是完整可粘贴的 <section> 代码块。
风格 A → references/layouts.md:
风格 B → 先读 references/swiss-layout-lock.md,再读 references/layouts-swiss.md。
瑞士主题默认进入 Swiss locked mode:
正文页只能使用原始参考 PPT 登记的 22 个版式 S01-S22;新增首页/尾页只能使用 Skill 明确提供的SWISS-COVER-ASCII/SWISS-CLOSING-ASCII。每个 <section class="slide">必须写data-layout="Sxx"。没有data-layout就视为未登记版式。不允许临时发明 P23/P24、Swiss Image Split、Evidence Grid这类原始 22P 之外的正文结构,除非用户明确要求实验版式。顶部中文标题默认左对齐、处在左上内容轴。不要把小标题放左列、大标题放右列,造成视觉居中;只有原始 statement/split 版式允许强中心叙事。 SVG 只负责几何图形。不要在 SVG 里写文字标签,所有标签改用 HTML 网格/卡片/caption。
原始 22 个正文版式如下:
选对应 layout,粘过去,改文案和图片路径即可。务必先完成 3.0 预检。
风格 B 版式多样性硬规则:
7-8 页 deck 至少使用 6 个不同 S 编号版式;10 页以上至少使用 8 个不同版式。 如果用户说"测试模板 / 看看效果 / 多一点版式",必须覆盖:一个封面、一个收尾、至少 1 个对比或时间线(S08/S11/S02)、至少 1 个结构图(S14/S17/S15)、至少 1 个图片版式(S22 或 S15/S16 图片格改造)。 不允许连续 3 页使用同一种主体结构,例如连续三页 head + grid + card。图片页不能偷懒发明新结构。2-3 张图时,用 S15/S16 的原始网格骨架改造成图片格;单张大图用 S22。 开写 HTML 前先列一张 页码 → data-layout → 选用理由 → 图片槽位草稿;交付前运行node <SKILL_ROOT>/scripts/validate-swiss-deck.mjs index.html。
3.2 · 图片比例规范
永远用标准比例,不要用原图奇葩比例(如 2592/1798):
| 21:9 | |
max-height:56vh | |
固定 height:26vh | |
max-height:64vh | |
默认不要让图片 align-self:end——会滑到页面底部,很容易碰到分页组件。用 grid 容器 + align-items:start(template 已预设)让图片贴顶即可;只有风格 B 的 P23 可以用 .swiss-img-split.align-image-bottom,因为模板已经给它内置了 --nav-safe-bottom 安全区。
风格 B 瑞士风额外规则:
单张大图用 S22;多图测试用 S15/S16 的原始卡片网格改造,不要用未登记的 P23/P24 生成图片前先写 data-image-slot:例如s22-hero-21x9/s15-grid-21x9/s16-brief-21x9S22 配图默认生成 21:9,提示词必须包含 subject centered in the safe middle area;照片容器用object-position:center 35%,不要用top center图片容器必须直角、无阴影、无圆角;默认背景用白色 var(--paper),不要用灰底包白底信息图白底 GPT 信息图/流程图/UI 图默认不要加外框描边,不要随手套 .swiss-keyline;需要强调时只用.swiss-lined的顶部 accent 线UI/信息图如果是用户原始截图或文字密集图,才用 .fit-contain;如果已按 S15/S16 槽位重生成,必须用.frame-img.r-21x9/.frame-img.r-16x10铺满容器,不要固定height:18vh后把图缩小多图同组必须统一图片槽位、比例和高度,不能混用 GPT-M 2.0 生成图使用 image-prompts.md的"风格 B:瑞士国际主义配图规则"任何图片、caption、timeline label、footnote 的最低处都不能进入底部分页区域;需要贴底时用 .nav-safe-bottom/.nav-safe-bottom-tight,不要手写bottom:2vh
3.2.1 · 中文大标题字号分档(风格 B 必做)
中文方块字视觉面积大,不能直接套英文 hero 的 6.8-7vw。写中文大标题前先分档:
min(6.4vw,11.2vh) | |
min(5.8vw,10.2vh) | |
min(5.2vw,9.2vh) | |
min(4.6vw,8.2vh) |
如果标题挤占了图片或正文区域,先压缩标题文案,再降字号;不要靠把下方内容推到底来硬塞。
组件细节(字体、颜色、网格、图标、callout、stat-card 等)在 references/components.md。
Step 4 · 对照检查清单自检
生成完一定要打开 references/checklist.md，逐项对照。里面总结了真实迭代过程中踩过的所有坑，P0 级别的问题（emoji、图片撑破、标题换行、字体分工）必须全部通过。
4.0 · 不只看代码:必须打开网页做视觉核对
代码只能证明类名和结构存在,不能证明版式舒服。生成后必须打开网页逐页看:
同时打开原始参考 PPT、当前模板或生成页、测试 PPT;原始参考是 /Users/guohao/Documents/op7418的仓库/项目/Thin-Harness-Fat-Skills/ppt/index.html。截图前等入场动效稳定(约 1-2 秒),不要把动画中间态当成版式问题。 先看视觉:大标题字重、标题与内容间距、图片是否与正文对齐、图片/说明是否碰到底部分页组件。 再看代码:确认该页选用的版式与内容形状匹配,没有把数据专用版式拿来讲概念,也没有把可选组件堆成装饰。 对照原始参考模板时,以实际页面用法为准,不要只看 CSS helper 定义;原始页面的大字实际多为 200/300,不要被 raw CSS 里的 700/800/900 带偏。 如果页面别扭,先判断是版式选错、必选组件缺失、可选组件滥用,还是间距/安全区问题;不要直接靠加 margin 硬救。
风格 A · 电子杂志风必查
- 大标题必须是衬线字体
——如果显示成非衬线,99% 是 Step 3.0 预检没做, h-hero类在 template.html 里缺失 - 图片网格里只用
height:Nvh,不用aspect-ratio(会撑破) - 图片不能堆到页面底部
——不要用 align-self:end,用 grid +align-items:start(见 Step 3.2) - 图片只能用标准比例
(16:10 / 4:3 / 3:2 / 1:1 / 16:9),不要复制原图的奇葩比例 - 中文大标题 ≤ 5 字且
nowrap(避免 1 字 1 行) - 用 Lucide,不用 emoji
- 标题用衬线,正文用非衬线,元数据用等宽
风格 B · 瑞士国际主义必查
- 全程无衬线
——任何衬线字体出现都是错的(检查 font-family没用--serif类变量) - 只有一个 accent 色
——一份 deck 不能同时出现 IKB 蓝 + 柠檬黄 + 安全橙等多个高亮色 - 不允许渐变 / 阴影 / 圆角
——所有色块直角纯色,任何 box-shadow/linear-gradient/border-radius> 0 都要砍掉(rule 横线除外) - 极致字号对比
——主标题与正文比例 ≥ 8:1 - 大字号必须双约束限高
—— font-size:min(Xvw, Yvh),只用 vw 在标准 16:9 屏会溢出(吸取 P15/P20/P22 教训) - 大字字重 200
(ExtraLight)——字号越大越细,瑞士风灵魂;禁止 600/700/800 大字 - 卡片填充类型互斥
—— card-ink/card-accent/card-fill/card-outlined四类不能混用(禁止"蓝底+蓝描边"、"灰底+描边"等) - 多卡并列时统一样式
——3-12 张卡用同一类(优先 card-fill灰底);只突出一项时单独换card-accent,且只允许一张 - 直角到底
——任何 border-radius都不允许;装饰用 8×8 直角小方块,不要 9px 圆形点 - 图标用 lucide,不自己画 SVG
—— <i data-lucide="name"></i>+lucide.createIcons(),选棱角风格(避免圆胖) - 时间线对齐
——axis 列固定 12px + dot 绝对定位,不要用 grid justify-self(会与虚线错位) - 章节级标题与内容间距 ≥ 9vh
——避免拥挤(吸取 P15/P16 教训) - 每页一个语义化动效 recipe
——不是统一 fade-up,数字 scale 弹入、bar scaleY 拉起、SVG stroke 描线、节点序列点亮等;禁止所有页用同一个 generic 配方 - playSlide 入口 reveal 容器
—— [data-anim]容器先强制 opacity:1,recipe 内再用 motion{opacity:[0,1]}覆盖,否则有些页会"看不见" - ESC 索引页可见性
——cloned slide 必须有 CSS override 让 [data-anim]在缩略图里 opacity:1 - Helvetica/Inter 兜底中文字体
——Windows 用户没有"苹方",必须 fallback 到 "Microsoft YaHei UI", "Noto Sans SC" - 字体粗细体例
:大字 200 / 正文 300 / t-catSemiBold 600 /t-metamono uppercase - 保留低功耗快捷键
——右下角必须提示 B 静态;按B切换body.low-power,停止 WebGL/ASCII canvas RAF 和 Motion 入场动画 - 装饰元素严格在 grid 内
——bars 矩阵、点阵、ring-mat 不能贴边或溢出页面 - 底部内容预留 nav 空间
——nav 在 ~97vh,内容收尾不要过 93vh(吸取 P22 KPI 大字溢底教训) - 图片容器直角无阴影
—— .frame-img不加border-radius/box-shadow;边界只用 hairline - P23/P24 图片同组一致
——同一组图片统一比例、高度、边距、线条粗细;信息图/UI 图加 .fit-contain - 组件角色要正确
——P23/P24 的 caption 是必选信息锚点;P22 的 KPI/说明是必选;数据专用版式必须有真实数据,不能靠文案硬填 - 通用/非通用版式要分清
——P3/P8/P11/P19/P23 较通用;P6/P7/P20/P21/P22 是数据/案例专用;P14/P15/P17 是结构专用
Step 5 · 本地预览
直接在浏览器打开 index.html 就行。macOS 下：
open ”项目/XXX/ppt/index.html”不需要本地服务器。图片走相对路径 images/xxx.png。
Step 6 · 迭代
根据用户反馈修改——模板的 CSS 已经高度参数化，90% 的调整都是改 inline style（字号 font-size:Xvw / 高度 height:Yvh / 间距 gap:Zvh）。
资源文件导览
guizang-ppt-skill/├── SKILL.md ← 你正在读├── assets/│ ├── template.html ← 风格 A · 电子杂志风模板（种子文件）│ ├── template-swiss.html ← 风格 B · 瑞士国际主义风模板（种子文件）│ └── motion.min.js ← Motion One 本地副本（离线兜底,约 64KB,共用）├── scripts/│ └── validate-swiss-deck.mjs ← 风格 B 静态校验:登记版式、图片槽位、SVG 文本、标题对齐└── references/├── components.md ← 组件手册（字体、色、网格、图标、callout、stat、pipeline、动效... 风格 A 适用）├── layouts.md ← 风格 A · 10 种页面布局骨架（可直接粘贴,含动效标记）├── swiss-layout-lock.md ← 风格 B · 原始 22P 版式锁,正文页必须按这里登记├── layouts-swiss.md ← 风格 B · 原始 22P 骨架说明 + 少量明确标注的实验区├── themes.md ← 风格 A · 5 套主题色预设（只能选不能自定义）├── themes-swiss.md ← 风格 B · 4 套瑞士风主题色预设（IKB / 柠檬黄 / 柠檬绿 / 安全橙）├── image-prompts.md ← GPT-M 2.0 配图类型、比例和基础提示词└── checklist.md ← 质量检查清单（P0/P1/P2/P3 分级）
加载顺序建议：
先读完 SKILL.md(这个文件)了解整体Step 1 需求澄清第一问先确定风格 A 还是 B,然后:
风格 A:读 themes.md帮用户选一套主题色风格 B:读 themes-swiss.md帮用户选一套主题色
- 动手前 Read 对应模板的
<style>块——这是类名的唯一来源,缺类会导致整页样式崩
风格 A → assets/template.html风格 B → assets/template-swiss.html
读对应的 layouts 文件挑布局:
风格 A → layouts.md(顶部有 Pre-flight 类名清单、主题节奏规划、动效 recipe 决策树)风格 B → 先读 swiss-layout-lock.md,再读layouts-swiss.md;正文页必须从 S01-S22 选择,每页写data-layout
如果在 Codex 中生成配图,读 image-prompts.md挑图片类型、比例和基础提示词细节调整时读 components.md查组件(含 Motion 动效系统章节,主要服务风格 A;风格 B 的组件细节在layouts-swiss.md附录)生成后先运行 node scripts/validate-swiss-deck.mjs path/to/index.html,再读checklist.md自检
动效相关:模板已把 Motion One 的加载和 recipe 逻辑内嵌到底部 module script。你不需要改 JS,只需要按 layouts.md / layouts-swiss.md 的骨架在 HTML 里加 data-anim / data-animate 即可。离线演示靠 assets/motion.min.js,断网时自动降级为"无动画但内容可读"。风格 B 模板必须保留 B 键低功耗模式:切换后停止 WebGL/ASCII canvas RAF,取消正在运行的 Web Animations,并把当前页内容直接 reveal 到静态最终态。
核心设计原则（哲学）
风格 A · 电子杂志风（5 轮迭代总结）
违反其中任何一条，杂志感都会垮。
- 克制优于炫技
— WebGL 背景只在 hero 页透出，普通页几乎看不见 - 结构优于装饰
— 不用阴影、不用浮动卡片、不用 padding box，一切信息靠大字号 + 字体对比 + 网格留白 - 内容层级由字号和字体共同定义
— 最大衬线 = 主标题，中衬线 = 副标，大非衬线 = lead，小非衬线 = body，等宽 = 元数据 - 图片是第一公民
— 图片只裁底部，保证顶部和左右完整；网格用 height:Nvh固定，不要用aspect-ratio撑 - 节奏靠 hero 页
— hero 和 non-hero 交替，才不累眼睛 - 术语统一
— Skills 就是 Skills，不要中英混合翻译
风格 B · 瑞士国际主义风
违反其中任何一条，画面瞬间从瑞士掉到 PowerPoint。
- 单一锚点色
— 一份 deck 只用一个 accent，不允许多色高亮拼贴 - 极致字号对比
— 主标题与正文比例 ≥ 8:1,KPI 必须是"Data Hero"(屏幕宽度的 18-22%) - 无衬线只此一家
— Inter / Helvetica / Noto Sans SC,任何衬线都是错的 - 直角纯色
— 不允许渐变 / 阴影 / 圆角(rule 横线除外) - 网格至上
— 所有元素吸附到 12-col grid,左对齐 + 大幅留白做非对称美学 - Hairline 是手术刀
— 1px 的极细分割线就够,不要加粗、不要加阴影 - 点阵装饰只在 hero 页透出
— 正文页保持纯净底色
参考作品
本 skill 的两种风格分别参考了：
风格 A · 电子杂志风:
歸藏 "一人公司：被 AI 折叠的组织" 分享（2026-04-22，27 页） - Monocle
杂志的版式 YC 总裁 Garry Tan "Thin Harness, Fat Skills" 那篇博客的 demo
风格 B · 瑞士国际主义风:
Massimo Vignelli 的 NYC Subway / Unimark 系统 - Helvetica Forever
的字体设计语言 Josef Müller-Brockmann 的网格系统经典著作 当代设计:Acne Studios / Off-White / IKEA / Beck Design
可以把它们当做风格锚点。
