十年设计经验总结 开源PPT技能全解析

企业设计规范转AI技能指南：打造专属PPT生成工具

如何将企业内部的设计规范转化为AI能够理解和执行的“技能”（Skill）？这是许多设计师和团队管理者近期频繁提出的问题。

恰逢上周，我参与了一场关于AI与组织协作的闭门分享会，并与李继刚老师进行了深度对谈。有趣的是，会后大家讨论的焦点并非AI协作本身，而是我在现场演示所使用的那份PPT。

被问及最多的问题是：“这份PPT是用什么工具制作的？能否开源？”

未曾预料，一次分享的衍生成果竟引发了如此多的关注。因此，我决定将其完全开源，该项目命名为 guizang-ppt-skill。

本文将深入解析这个Skill的具体形态、功能应用，并从十年设计从业者的视角，剖析其背后所遵循的视觉美学逻辑与设计系统思维。

一、视觉风格解析：电子杂志与墨水美学的融合

由该Skill生成的PPT，其第一观感常令人惊讶——它不太符合人们对“AI生成内容”的刻板印象。

其核心视觉特征可归纳如下：

• 封面设计：采用深墨色底图搭配经典衬线字体标题，背景层融入若隐若现的WebGL流体动态效果，营造高级感与科技感。
• 正文版面：底色切换为温和的米白，模拟纸张质感，墨色文字清晰呈现，整体视觉接近一本摊开的精装印刷杂志。
• 翻页交互：支持横向滑动翻阅，兼容键盘方向键、鼠标滚轮及触屏手势操作，彻底摒弃了传统PPT生硬的页面切换方式。
• 元数据标注：每页四角以小型等宽字体标注如“Act II · 15 / 25”的报刊式页码信息，增强仪式感与阅读节奏。

这套视觉体系的核心理念可概括为“电子杂志 × 电子墨水”。其灵感源于《Monocle》、《卫报》、《纽约时报》等顶级印刷媒体的版式设计传统，同时汲取了Kindle电子墨水屏的阅读美学，最终通过现代Web交互技术实现无缝串联。

二、核心功能与能力范围

目前，该Skill提供了10种标准化页面布局、5套精心调校的主题色预设，以及一套完整的杂志式翻页交互系统。

10种布局方案，全面覆盖了15至30分钟专业演示所需的所有页面类型：

涵盖开场封面、章节分隔、数据可视化、左文右图、图片网格、流程图示、悬念提问、大段引用、前后对比、图文混排等场景。每种布局都是一段可直接复用的HTML代码骨架，用户仅需替换其中的文字与图片内容。

5套主题色分别对应不同的演讲场景与情绪：

• 墨水经典 — 适用于商业发布、正式汇报等通用严肃场合。
• 靛蓝瓷 — 适合科技前沿、学术研究、人工智能等主题发布会。
• 森林墨 — 契合自然环保、可持续发展、人文社科类内容。
• 牛皮纸 — 营造怀旧复古、文学创作、独立杂志的独特氛围。
• 沙丘 — 服务于艺术设计、创意提案、视觉传达等领域。

每套主题本质上仅是6个核心CSS变量的不同取值组合。切换主题只需替换`:root`中的几行代码。项目刻意限制了用户自定义十六进制色值的能力，原因将在后文阐述。

翻页交互系统支持键盘导航、滚轮滑动、触屏手势及底部导航点快速跳转。按下ESC键可呼出全览缩略图索引，力求在浏览器中还原翻阅实体杂志的流畅体验。

最终产出物为单个HTML文件，双击即可在任意现代浏览器中打开并全屏演示。分享时仅需传递一个文件，无需担心字体缺失、动画兼容或依赖问题。

三、高效协作指南：人机协同制作PPT的最佳实践

该Skill的真正价值，在于它定义了一套清晰、高效的“人 × AI”协作接口。经过一周的密集实践，我们总结了以下三点关键经验。

1. 启动AI前的六项关键澄清

安装Skill后，你只需对AI助手（如Claude）说“帮我制作一份杂志风格的PPT”，它便会主动引导你澄清六个核心问题：

1. 受众与场景：演示面向内部团队、行业大会还是客户发布会？
2. 分享时长：是15分钟（约10页）还是30分钟（约20页）的演讲？
3. 原始素材：是否有现有的文档、数据图表、旧版PPT或参考文章链接？
4. 图片资源：图片素材存储于何处？
5. 主题偏好：从5套预设主题色中选择一套。
6. 硬性约束：是否有必须包含的核心数据，或绝对禁止出现的内容？

你无需一次性提供所有信息，AI会进行交互式提问。在获得全部关键信息后，AI会首先生成一份内容大纲与视觉节奏表，与你确认方向无误后，再开始编写具体的HTML代码。这一流程将至少避免80%的后期返工。

回想传统AI生成PPT的痛点：往往是AI直接输出成品，直到看到第10页才发现整体风格或结构偏离预期。这套澄清流程，将最重要的“目标对齐”环节前置到了创作开端。

2. 图片素材的标准化管理

所有图片需放置在与`index.html`同级的`images/`文件夹内，并遵循统一的命名规范：

ppt/
├── index.html
└── images/
        ├── 01-cover.jpg
        ├── 03-figma.png
        └── 05-dashboard.png

规范要点如下：

• 页号补零 + 语义化英文名：使用“01”而非“1”，使用“cover”而非“封面”。这既利于文件排序，也便于AI准确引用。
• 格式区分：普通照片使用JPG格式以减小体积；带有文字或界面的截图使用PNG格式以保证清晰度。
• 尺寸建议：单张图片宽度建议不低于1600像素，确保在高清投影或大屏显示时依然清晰锐利。

你只需告知AI“第3页使用Figma界面截图”，AI便会自动生成`images/03-figma.png`这样的引用路径。你只需将对应命名的文件放入文件夹即可。

3. 图片替换的无损操作秘诀

当文案修改完毕后需要更换某页图片时，最忌讳的做法是全局搜索替换图片路径，极易误改HTML结构。

正确且唯一的做法是：将新图片以完全相同的文件名覆盖旧图片，HTML代码无需任何改动。

四、设计逻辑深度剖析：为何如此设计

了解用法之后，我们深入探讨其设计决策背后的逻辑。“美观”并非偶然，而是一系列可被拆解和复用的设计原则的体现。本质上，该项目是将杂志行业百年沉淀的排版语言，系统地翻译成了HTML与CSS代码。

1. 字体系统的三级分工体系

• 衬线体 → 承载“观点”：用于主标题，其庄重、经典的形态向读者暗示“这是一句需要被认真对待的陈述”。
• 非衬线体 → 传递“信息”：用于正文内容，其高可读性与简洁性保障了长时间阅读的舒适度。
• 等宽字体 → 标注“元数据”：用于页眉、页脚、页码等辅助信息，其形态既呼应了杂志的版注传统，也模拟了代码注释的冷静感。

通过清晰的字体分工，读者无需主动思考，其视觉动线便能自然区分内容的不同层级与属性。

2. 色彩体系的严格纪律

纸白、墨色，外加一个点睛色，足矣。

纯白（#FFFFFF）在屏幕上过于刺眼，纯黑（#000000）则缺乏层次与呼吸感，这已是印刷与数字阅读领域的共识。Kindle的底色也从未使用过纯白。

因此，在该Skill的5套主题色中，没有任何一套的底色是纯白，文字色也非纯黑。每套主题仅暴露6个核心CSS变量，并在项目文档中明确规定：禁止用户自定义十六进制色值，只能在五套预设主题中选择其一。

其逻辑在于：约束越明确，风格的统一性与高级感就越稳定。在许多情况下，保护整体设计系统的美学调性，比赋予用户无限的自由更为重要。

3. 网格系统与视觉节奏控制

7:5、6:6、8:4等几套固定的网格系统，确保了单页版面结构的秩序与平衡。

更为关键的是页面之间的视觉节奏：强调视觉冲击的“英雄页”与承载密集信息的“内容页”必须交替出现，从而形成类似翻阅杂志时张弛有度的“呼吸感”。

Skill内部甚至设定了一条硬性规则：连续三页以上使用相同类型的布局，将被视为P0级的设计错误。

缺乏节奏控制的PPT，不过是一叠幻灯片简单堆砌而成的PDF文件，无法引导观众的注意力与情绪。

五、总结与开源理念

上文所阐述的所有规则，没有一条是凭空创造的。

在UI设计、交互设计及数字艺术领域深耕十年，这些原则大多是行业内的通用知识与最佳实践。

我所做的，只是将这些常识系统性地整理并写入`SKILL.md`和`checklist.md`文件中，使得AI能够严格地替我执行每一条规则。

换言之，这个Skill是我过去十年审美积累与设计经验的一个“可执行压缩包”。

过去，要制作一份具备专业水准的PPT，需要耗费数日手动调整网格、推敲字号、微调色值。现在，将原始素材与需求交给AI，它便能依据既定规则快速组装出初稿，我只需进行最终的质量检查与微调。

正因如此，我才敢于将其开源。这些排版规则并非独家秘方，《Monocle》等顶尖媒体的设计师们早已运用了数十年。我只是将它们系统化地“移植”到了2026年的Web技术环境中。

项目已在GitHub上开源，README文件中包含了一段“给AI的安装提示词”，直接复制给你的AI助手即可完成配置。

安装完成后，只需对它说一句“帮我制作一份杂志风格的PPT”，一场高效的人机协作便即刻开始。