我10年的设计经验，全都压缩在这个开源的PPT Skill-人工智能-PHP中文网

保姆级教程！手把手教你把公司内部的设计规范封装成 AI 可用的 Skill

全文速览图群里有朋友问我：“怎么把咱们公司的设计规范，变成 ai 能直接调用的 skill？”

上周受李继刚老师邀请，参与了一场关于 AI 与组织演进的私享访谈。

活动结束后，大家追问最多的一句是：“刚才演示的 PPT 是怎么实现的？能开源吗？”

AI一键生成成品PPT☜☜☜☜☜点击生成；

没想到这个“演示副产品”，意外成了全场最被期待的“主菜”。

索性就把它正式开源了，项目名：guizang-ppt-skill（github.com/op7418/guizang-ppt-skill）。

今天这篇文章，就带你看看这个 Skill 到底长什么样，以及作为一名从业十年的设计老兵，我为什么觉得它既克制、又动人。

二、它长什么样

打开由 Skill 渲染出的 PPT，第一眼印象很可能是：这不像 AI 生成的幻灯片。

几个一眼可辨的特征：

封面页：深墨色背景 + 衬线体超大标题，背后嵌入一层缓慢流动的 WebGL 流体动画，若有似无
正文页：底色切回柔和纸白，黑色文字沉稳压印其上，视觉质感近似摊开的实体印刷杂志
翻页方式：横向滑动切换（支持键盘左右键、鼠标滚轮、触屏拖拽），非传统 PowerPoint 的纵向翻页逻辑
元信息呈现：每页四角以小号等宽字体标注如 “Act II · 15 / 25” 这类报刊式页码

我为这套视觉语言取了个代号——“电子杂志 × 电子墨水”。

灵感源自《Monocle》《卫报》《纽约时报》等经典印刷媒体的排版基因，融合 Kindle 类电子纸阅读器的静谧感，再通过现代 Web 技术重新编译交互语法。

三、它能做什么

当前 Skill 提供 10 种标准化页面布局、5 套主题色预设，以及一套完整、轻量、零依赖的翻页交互系统。

10 种布局覆盖典型 15–30 页分享场景所需的全部内容类型：
开场封面｜章节分隔页｜数据高亮页｜左文右图｜图片网格｜Pipeline 流程图｜悬念提问页｜大段引述｜Before/After 对比｜图文混排

每种布局都是一段干净 HTML 骨架代码，仅需替换文字与图片路径即可生效。

5 套主题对应不同表达语境：

墨水经典 —— 商业发布、通用默认风格
靛蓝瓷 —— 科技发布会、AI 研究汇报
森林墨 —— 自然议题、可持续发展、人文叙事
牛皮纸 —— 怀旧调性、文学表达、独立出版气质
沙丘 —— 艺术展览、创意提案、设计类演讲

每套主题仅通过 6 个 CSS 自定义变量 实现，切换主题只需在 :root 中替换这 6 行值。

⚠️ 用户不可自由输入 HEX 值——原因后文会讲。

翻页交互支持：键盘方向键｜鼠标滚轮｜触屏左右滑｜底部圆点导航｜ESC 键唤出缩略图索引页。

目标是无限逼近「在浏览器里翻阅一本真实纸质杂志」的手感。

最终产物为单文件 HTML，双击即开，转发即用，无需担心字体缺失、动画错位或跨设备渲染异常。

四、怎么用

其实这份 Skill 的真正价值，不在于模板本身，而在于它构建了一套「人 × AI 协同制作 PPT」的标准化接口。

这是我亲自用了一周后，总结出最值得分享的三个关键动作。

1. 先和 AI 明确这 6 个前提

安装 Skill 后，你只需对 Claude 说一句：“帮我做一份杂志风 PPT”，它便会主动向你确认以下 6 个问题：

目标受众是谁？使用场景是什么？（内部复盘 / 客户提案 / 私享交流）
预计分享时长？（15 分钟 ≈ 10 页，30 分钟 ≈ 20 页）
是否已有原始素材？（Word 文档 / Excel 数据 / 旧版 PPT / 公众号文章链接）
图片资源是否已备好？存放位置是否明确？
偏好哪套主题色？（从 5 套预设中任选其一）
是否存在硬性限制？（必须包含某组图表 / 禁用某类词汇 / 强制保留某页结构）

你无需一次性回答完毕，AI 会逐条追问。待全部确认后，它将先输出一份大纲 + 主题节奏表供你审阅，对齐后再生成 HTML——这一步拦截了我约 80% 的返工成本。

过去用 AI 做 PPT 最大的痛点是什么？是它直接开写，等你看到第 10 页才发现整体逻辑跑偏。而这个前置澄清机制，把“对齐”牢牢锚定在流程起点。

2. 图片这样组织最省心

所有图片统一放在与 index.html 同级的 images/ 文件夹下，命名遵循固定规则：

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

✅ 规则说明：

页码补零 + 英文语义化命名（如 01-cover.jpg，而非 1.jpg 或 封面.jpg），便于排序与 AI 精准引用
照片类用 JPG 格式，截图类用 PNG（保真文字细节，避免压缩模糊）
单图宽度 ≥ 1600px，确保大屏投影清晰不糊

你只需告诉 Claude：“第 3 页放 Figma 界面截图”，它会自动生成 <p> <a href="https://dis.chatdesks.cn/chatdesk/qwphp.html" target="_blank"><strong>☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜</strong></a> </p><img src="images/03-figma.png">；你只需把同名文件丢进 images/ 文件夹即可。