guizang-ppt-skill

3个月前更新 276 00

guizang PPT Skill,一个AI代理技能,用于生成精美的HTML幻灯片,包括编辑杂志和瑞士布局,图像提示,社交封面,以及WebGL/低功耗演示运行时

收录时间:
2026-07-26

现在注册,限时领取 Loomy 5000 积分

guizang-ppt-skill官网github下载,歸藏用于生成精美HTML幻灯片的AI代理技能

guizang-ppt-skill简介

Guizang PPT Skill 是由歸藏(@op7418)开源的一款”为 AI Agent 而生“的 HTML PPT 生成工具包,登顶 GitHub Trending Python 类目榜首,累计 22.4k stars + 1.6k forks,被 360 安全龙虾 / Kimi work / Cola Skill 金牌赞助并获真格 Token Grant。它不是一个 web app,而是一套结构化 Skill 工作流——配合 Claude Code / Codex / Cursor 等 AI Agent 使用,让 Agent 能直接生成单文件 HTML 横向翻页 PPT(双击浏览器打开即可演示,无需构建、无需服务器)。核心创新是两套视觉系统:

  • Style A 电子杂志风(10 种版式 + 5 套主题色):像 Monocle 杂志贴上代码,适合叙事、分享、个人风格表达;
  • Style B 瑞士国际主义(22 种锁定版式 + 4 套高饱和锚点色):网格至上、直角、发丝线、极致字号对比,适合事实、产品、方法论表达。配套 9 套主题色(不允许自定义 hex,保护美学)、9 份 references 参考文档、自动校验脚本(validate-swiss-deck.mjs)、GPT-Image 2.0 配图能力,以及公众号 21:9 / 1:1 / 小红书 3:4 / 视频号 16:9 多平台封面生成。已上架 360 安全龙虾、Cola Skill、Kimi work 等平台 Skill 商店,可直接在 Claude Code / Codex 等 Agent 环境中调用。

guizang-ppt-skill github项目地址: https://github.com/op7418/guizang-ppt-skill

guizang-ppt-skill下载地址:链接:https://pan.quark.cn/s/bbeef30657f2

guizang PPT Skill

Guizang PPT Skill 体验:22.4k Stars 的开源 HTML PPT 生成器,让 AI Agent 一次做出杂志风 / 瑞士风演讲稿


一、当 AI 工具遇上”做 PPT”这个老大难

过去两年,AI 工具对”演示文稿”这件事的冲击几乎是所有产品里最弱的。原因不复杂——PPT 不只是”文本生成”,它有版式、节奏、视觉、留白、图片比例、字号对比等一整套设计语言的约束。让 AI 写出 “10 页演讲稿”很容易,但让它交付一份”能直接拿去线下分享”的 PPT,几乎是不可能的。

歸藏(@op7418)的 想解决的就是这个问题——它不是又一款”AI 生成 PPT”的 web app,而是一个为 Claude Code / Codex 等 Agent 环境量身定制的 Skill(即一套结构化工作流 + 模板 + 校验器的打包工具),让 Agent 能直接生成单文件 HTML 横向翻页 PPT,并通过两套视觉系统(Style A 电子杂志风 / Style B 瑞士国际主义)保证设计品质。

它登顶 GitHub Trending Python 类目榜首、累计 22.4k stars + 1.6k forks,被 360 安全龙虾、Kimi work、Cola Skill 金牌赞助并获得真格 Token Grant。这篇文章带你拆透这个项目:它做了什么、怎么用、和同类工具有什么本质不同。


guizang PPT Skill

二、Guizang PPT Skill 是什么?

2.1 一句话定义

一个让 AI Agent(Claude Code / Codex)按 8 步工作流生成单文件 HTML 横向翻页 PPT 的 Skill 工具包——自带两套视觉系统、22+10 套版式、9 套主题色、Playwright 后验检查器。

它和”AI 写 PPT 内容”最大的区别是:

  • 不交付 PPTX 文件:最终交付是 单 HTML 文件(双击浏览器打开即可演示);
  • 不依赖 SaaS 服务:模板、校验器、参考文档全部开源;
  • 不只写内容,还管设计:通过 Style A/B 两套风格系统 + 版式锁定校验 把”设计感”工程化。

2.2 项目结构(一图看懂)

guizang-ppt-skill/
├── SKILL.md                      ← 工作流主文档
├── README.md / README.en.md      ← 中英文 README
├── assets/
│   ├── template.html             ← Style A 电子杂志风模板
│   ├── template-swiss.html       ← Style B 瑞士国际主义模板
│   └── screenshot-backgrounds/   ← 截图美化背景(WebP)
├── scripts/
│   └── validate-swiss-deck.mjs   ← 瑞士风版式校验器
└── references/
    ├── components.md             ← 组件手册
    ├── layouts.md / layouts-swiss.md  ← 32 种版式骨架
    ├── swiss-layout-lock.md      ← 瑞士风硬约束
    ├── themes.md / themes-swiss.md    ← 9 套主题色
    ├── image-prompts.md          ← GPT-Image 2.0 配图指南
    ├── screenshot-framing.md     ← CleanShot X 式截图适配
    └── checklist.md              ← P0/P1/P2/P3 质量检查

2.3 核心能力速查

维度能力
视觉系统双套:Style A 电子杂志 × 电子墨水 + Style B 瑞士国际主义
翻页交互键盘 ← → / 滚轮 / 触屏滑动 / 底部圆点导航 / ESC 索引
Style A 版式10 种(封面、章节、数据大字报、图文、图片网格、Pipeline、对比等)
Style B 版式22 种锁定版式(Cover、Statement、KPI Tower、Loop Diagram、Duo Compare、Image Hero、Closing Manifesto 等)
主题色预设Style A 5 套 + Style B 4 套,不允许自定义 hex(保护美学)
配图能力Codex 中可用 GPT-Image 2.0 / GPT-M 2.0 生成纪实照片、信息图、流程图、UI 情景图
多平台封面公众号 21:9 / 公众号分享卡 1:1 / 小红书 3:4 / 视频号 16:9
低性能静态模式按 B 关闭 WebGL/canvas 动画,PPT 退回静态背景
交付形态单文件 HTML,无需构建、无需服务器
校验能力node scripts/validate-swiss-deck.mjs 自动校验 + 可选 Playwright 后验

guizang PPT Skill

三、Style A 电子杂志风 vs Style B 瑞士国际主义

Guizang 的核心创新是提供两套截然不同的视觉语言——这让 Agent 能根据内容性质选择最合适的设计,而不是”一种风格包打天下”。

3.1 Style A:电子杂志 × 电子墨水

气质定位:像 Monocle 杂志贴上了代码——叙事、观点、分享、个人风格表达。

5 套主题色:

主题核心色适合场景
🖋 墨水经典#0a0a0b / #f1efea通用默认、商业发布、不知道选啥时最稳
🌊 靛蓝瓷#0a1f3d / #f1f3f5科技、研究、AI、技术发布会
🌿 森林墨#1a2e1f / #f5f1e8自然、可持续、文化、非虚构内容
🍂 牛皮纸#2a1e13 / #eedfc7怀旧、人文、阅读、历史、文学分享
🌙 沙丘#1f1a14 / #f0e6d2艺术、设计、创意、时尚、画廊感内容

10 种版式:封面、章节、数据大字报、图文、图片网格、Pipeline、对比等。

3.2 Style B:瑞士国际主义

气质定位:网格至上、单一高饱和锚点色、直角、发丝线、极致字号对比——事实、产品、分析、方法论表达。

4 套主题色:

主题锚点色适合场景
🔵 克莱因蓝 IKB#002FA7通用默认、商业发布、AI 产品、方法论
🟡 柠檬黄#FFD500年轻、运动、零售、消费品、Y2K 复古
🟢 柠檬绿#C5E803生态、可持续、健康、Z 世代品牌
🟠 安全橙#FF6B35警示、新闻、工业、运动、活力主题

22 种锁定版式(核心差异):所有正文页只能从 S01 到 S22 中选择,不能临时发明页面结构——这是保证”瑞士风”还原度的硬约束。

3.3 两套风格的对比

维度Style A 电子杂志Style B 瑞士国际主义
核心气质叙事、表达、个人风格事实、结构、方法论
版式自由度10 种,可灵活组合22 种锁定,禁止临时发明
字体哲学多字体对比 + 字号层级字号极端对比 + 网格主导
配图原则图片作为叙事元素图片必须进入 data-image-slot 槽位
适合场景线下分享 / 个人演讲 / demo day产品发布 / 数据分析 / 行业报告
校验强度中(参照 checklist.md)强(有自动校验器脚本)

guizang PPT Skill

四、3 种安装方法(30 秒上手)

4.1 方式一:一行命令安装(推荐)

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

4.2 方式二:直接发给 AI 助手

把下面这段话直接发给 Claude Code / Cursor / 任何有 shell 权限的 AI Agent,它会自动完成安装:

帮我安装 guizang-ppt-skill 这个 Claude Code skill。请按下面步骤做:

  1. 确保 ~/.claude/skills/ 目录存在(不存在就创建)
  2. 执行 git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill
  3. 验证:ls ~/.claude/skills/guizang-ppt-skill/ 应该看到 SKILL.md、assets/、references/ 三项
  4. 告诉我安装好了,之后我说”做一份杂志风 PPT”之类的话就会触发这个 skill

4.3 方式三:手动命令行

git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill

4.4 装好之后这样用

直接在 Claude Code / Codex 里说:

帮我基于这篇文章做一份瑞士风 PPT,控制在 7 页左右,需要 2-3 张配图。

或者:

帮我把这份 Markdown 做成杂志风演讲 PPT。
基于这份 PPT 的核心观点,生成一张公众号 21:9 头图。
把这张产品截图重新设计成适合 PPT 的 16:10 配图。

4.5 触发关键词

类型关键词
杂志风“帮我做一份杂志风 PPT”、”editorial magazine style presentation”、”electronic ink 风格演讲 slides”
瑞士风“帮我做一份瑞士风 PPT”、”生成一个 horizontal swipe deck”
封面生成“基于这篇文章做一张公众号 21:9 封面”、”基于这份 PPT 生成一张 1:1 分享卡”

guizang PPT Skill

五、8 步完整工作流(Skill 工作机制)

装好之后,Agent 会按下面 8 步流程一步步引导你:

步骤动作关键工具
1选择风格Style A 电子杂志风 或 Style B 瑞士国际主义
2需求澄清7 问清单:风格、受众、时长、素材、图片需求、主题色、硬约束
3拷贝模板Style A 用 assets/template.html,Style B 用 assets/template-swiss.html
4填充内容先做主题节奏表,再从版式骨架里挑、粘、改文案
5可选配图在 Codex 中询问是否用 GPT-Image 2.0 / GPT-M 2.0 生成配图
6自检对照 references/checklist.md,P0 级问题必须全过;瑞士风还要运行版式校验器
7预览浏览器直接打开
8迭代inline style 改字号/高度/间距

5.1 瑞士风的额外校验

node scripts/validate-swiss-deck.mjs path/to/index.html

校验器会拦截:

  • ❌ 居中标题(瑞士风禁止)
  • ❌ 实验性版式(只能从 S01-S22 选)
  • ❌ SVG 内写字
  • ❌ 图片脱离槽位
  • ❌ 中文字号过大(中文大标题需降一档)
  • ❌ 图文底不对齐

如果用 Playwright,还能量化:渲染后的 overflow、bottom whitespace、title gap。


guizang PPT Skill

六、5 大典型使用场景(附推荐方式)

场景推荐方式
长文章变演讲 PPT先抽核心观点,再按 6-10 页节奏生成 deck
方法论 / 产品分析用 Style B 瑞士风,优先使用锁定版式和 21:9 主图
个人分享 / 观点表达用 Style A 电子杂志风,保留更强叙事感
PPT 配图在 Codex 中用 GPT-Image 2.0 / GPT-M 2.0 生成照片、信息图、流程图、UI 情景图
多平台封面从同一份内容生成公众号 21:9、1:1 分享卡、小红书 3:4、视频号横版封面
截图统一风格把原始截图重新生成到模板需要的比例,再插入 PPT

6.1 配图的 4 条关键规则

如果你让 Codex 自动生成配图,必须遵守:

  1. 图片是嵌入素材,不要自带页脚、页底、标题、角标、页码或装饰边框
  2. 图片语言跟随 deck 语言(中文 deck 用中文标签,英文 deck 用英文标签)
  3. 图片比例必须先匹配落位:瑞士风主图常用 21:9,通用主图常用 16:9 / 16:10,截图再设计常用 16:10
  4. 截图保真:先读 references/screenshot-framing.md,用 assets/screenshot-backgrounds/ 内置背景 + 程序化缩放处理,不要默认重画

6.2 4 种封面规格

平台比例特点
公众号头图21:9主标题优先,右侧或边缘保留视觉锚点
公众号分享卡1:1与头图共用主题色、关键词和视觉元素
小红书封面 / 轮播3:4大标题优先,多张时统一字号和视觉节奏
视频号 / 横版封面16:9标题 + 副标题 + 单一视觉焦点

七、8 条核心设计原则(这是项目的”灵魂”)

我整理了 README 与 SKILL.md 里反复强调的 8 条原则,这是项目作者反复打磨的设计哲学:

#原则含义
1克制优于炫技WebGL 背景只在 hero 页透出,其它页面保持静态
2结构优于装饰信息靠字号 + 字体对比 + 网格留白,不用阴影和浮动卡片
3图片是第一公民图片要对齐正文内容区,比例稳定,只裁底部,顶部和左右完整
4配图只做素材生成图只保留核心照片/图表/UI,不要把 PPT 页脚、标题画进图片里
5节奏靠 hero 页hero / non-hero 交替,才不累眼睛
6低性能可退场按 B 能切换到静态模式,动态效果不能成为阅读负担
7术语统一Skills 就是 Skills,不中英混译
8瑞士风必须守版式Style B 优先还原原始 22P 版式,不要为了”多样”发明不存在的页面

这 8 条原则和项目的 visual reference 一脉相承:Monocle 杂志的版式 / YC Garry Tan “Thin Harness, Fat Skills” / Massimo Vignelli / 瑞士国际主义网格系统。


八、平台支持矩阵

平台状态说明
Claude Code✅ 支持原生 Skill 工作流,最适合生成和迭代 HTML deck
Codex✅ 支持适合生成 PPT、调用图片生成能力、做浏览器视觉检查
Cursor / 其他本地 Agent⚠️ 可用需要能读写文件并执行 shell 命令
WorkBuddy🚧 适配中单独整理上架版本,去掉平台不需要的渠道差异
普通 Chatbot❌ 不推荐没有文件系统和浏览器预览时,很难稳定生成完整 deck
360 安全龙虾 / Cola Skill / Kimi work✅ 已上架在 Skill 商店搜索 “guizang ppt skill” 即可使用

九、与其他 AI PPT 工具的本质区别

我整理了一个横向对比表,让你看清 guizang-ppt-skill 在 AI PPT 赛道的定位:

维度Guizang PPT SkillGamma.appBeautiful.aiChatGPT + PPT国产 AI PPT
交付物单文件 HTMLSaaS 网页SaaS 网页PPTXPPTX
AI 集成Skill(Claude Code / Codex)Web 端Web 端对话式Web 端
设计自由度高(22+10 版式)中(模板多)中高(但难控制)中
设计品质★★★★★(Magazine / Swiss)★★★★★★★★★★★★
可修改性改 HTML 源码改 SaaS改 SaaS改 PPTX改 PPTX
离线使用✅ 完全本地❌ 需联网❌ 需联网⚠️ 部分❌ 需联网
开源 / 可定制✅ AGPL-3.0❌❌❌❌
GitHub Stars22.4k––––
适合场景线下分享、演讲、产品发布营销 PPT、内部汇报商务汇报、报告通用通用
配图能力Codex GPT-Image 2.0内置内置DALL-E内置

一句话差异:Guizang PPT Skill 是唯一一个”为 AI Agent 设计、交付开源 HTML、提供设计哲学护栏”的 PPT 生成方案。它不是又一个 SaaS,而是把”做 PPT”这件事工程化、可复现化的工具包。


十、适合谁用?适合什么场景?

✅ 最佳用户

用户使用场景
独立开发者 / 设计师自己做产品发布、技术分享、demo day
AI 产品经理 / 创业者做产品发布演讲、demo day、媒体沟通
研究者 / 学界学术报告、方法论分享、读书会
行业 KOL / 自媒体个人分享、观点输出、平台封面
品牌/咨询/营销人私享会、行业内部讲话、客户提案

❌ 不适合

  • 大段表格数据展示:HTML 排版天然不适合信息密度超高的培训课件;
  • 多人协作编辑:单文件 HTML 没有版本合并 / 多人同时编辑能力;
  • 需要 PPTX 格式:如果你必须输出 .pptx 用 KeyNote / PowerPoint 打开,建议转用传统 SaaS;
  • 新手第一次做 PPT:Skill 是给 AI Agent 用的工作流,需要懂 Claude Code / Codex 才能用。

十一、Roadmap:项目接下来会做什么

作者在 README 中明确列出了后续方向:

  1. 补充更多真实案例和可打开的 HTML deck 示例
  2. 扩展封面规格,覆盖更多内容平台(B 站、抖音、即刻等)
  3. 增加更多瑞士风版式校验规则
  4. 优化截图再设计和信息图生成工作流
  5. 整理 WorkBuddy 等平台上架版本
  6. 增加更多主题包,但继续限制自定义颜色

可以看出作者对项目有清晰的方向感——不会为了”看起来很丰富”而牺牲美学护栏。


十二、常见问题 FAQ

Q1:可以导出 PPTX 吗?

A:当前核心交付是 HTML。你可以用浏览器演示、截图或录屏。如果需要 PPTX,建议把 HTML 页面作为视觉稿再转换,但这不是当前主流程。

Q2:为什么不允许自定义颜色?

A:这个 Skill 的重点是稳定产出。自由选色很容易破坏整体风格,所以只允许从预设主题里选——这是”保护美学比给自由更重要”的设计哲学。

Q3:可以加自己的版式吗?

A:

  • Style A:可以在 references/layouts.md 里扩展(设计自由度更高);
  • Style B:更严格,需要同步更新 template-swiss.html、layouts-swiss.md、swiss-layout-lock.md 和校验器脚本。

Q4:Codex 配图是必须的吗?

A:不是。没有配图也能生成 PPT。配图流程只在需要照片、信息图、UI 情景图或封面时使用。

Q5:怎么更新到最新版?

A:

# 方法一:重新安装
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill --force
# 方法二:在 skill 目录执行 git pull
cd ~/.claude/skills/guizang-ppt-skill && git pull

Q6:生成的 PPT 能在手机上演示吗?

A:可以。模板本身就是响应式的,键盘 / 滚轮 / 触屏滑动都支持。Style B 还有低性能静态模式(按 B 切换),适合在性能弱的设备上演示。

Q7:可以自定义字体吗?

A:Style A 允许一定程度的字体扩展;Style B 严格不允许——字体是瑞士风的核心美学元素之一。

Q8:与 Office PPT 相比,HTML PPT 有什么优势?

A:

维度HTML PPTOffice PPT
交付形态单文件 HTMLPPTX
跨平台✅ 浏览器即可⚠️ 需要 Office
体积极小(KB 级)大(MB 级)
动画WebGL / CSS / JS内置动画引擎
修改直接改源码需要打开软件
协作❌✅
兼容性✅ 任何浏览器⚠️ 排版可能错乱

十三、我的评价:为什么这个项目值得 22.4k Stars?

项目作者歸藏(@op7418)的核心洞察是:

大多数 AI 工具擅长”内容生成”,但对”设计语言的护栏”无能为力——这是 PPT 这个领域一直做不好的根因。

guizang-ppt-skill 的解法非常工程化:

  1. 双视觉系统 + 9 套主题色:把”美学”封装成可枚举的预设,避免 Agent 自由发挥破坏设计;
  2. 32 种版式骨架 + 锁定校验:把”页面结构”工程化,瑞士风尤其严格(22 种锁定版式 + 自动校验器);
  3. 8 条核心设计原则:让 Agent 在生成时遵守”克制优于炫技、结构优于装饰、图片是第一公民”等约束;
  4. 单文件 HTML 交付:无需 SaaS、无需构建、无需服务器,最轻量的演示形态;
  5. 为 Agent 而生:所有模板、参考文档、校验脚本都是结构化文本,Agent 能直接读、改、验证。

这种“工程化美学”的做法,让这个项目从 2025 年发布以来迅速积累 22.4k Stars + 1.6k Forks,被 360 安全龙虾、Kimi work、Cola Skill 金牌赞助——它的火爆说明 AI 创作者社区对”高质量演示内容”的需求是真实且巨大的。


十四、结语:让 AI Agent 真正能”做 PPT”

回到一开始的命题:当 AI Agent 学会做 PPT,它会是什么样?

guizang-ppt-skill 给出的答案是:

  • 不是”AI 帮你写文案 + 你自己排版”;
  • 不是”AI 生成一堆 PPTX 文件让你下载”;
  • 而是”AI Agent 在 22 种瑞士风版式 / 10 种杂志风版式中选一种,按 8 步工作流生成一份带配图、带封面、带校验的单文件 HTML PPT”。

它不是在做一个”AI 工具”,而是在做 “AI 时代的演示内容生产线”——把演示内容的生产从”设计师手工 → AI 写文案 + 设计师调样式”压缩到”AI Agent 端到端完成”。

如果你是 Claude Code / Codex 的高频用户,强烈建议你花 30 秒装上这个 skill——下一个你需要在公司/社群做分享的场合,它会帮你省下至少 3 小时的 PPT 制作时间。


关键信息汇总

项目内容
项目地址https://github.com/op7418/guizang-ppt-skill
作者歸藏(X: @op7418)
LicenseAGPL-3.0
Stars22.4k
Forks1.6k
Commits26
核心能力双视觉系统 + 32 版式 + 9 主题色 + 校验器 + GPT-Image 2.0 配图
支持平台Claude Code / Codex / Cursor / 360 安全龙虾 / Cola Skill / Kimi work
交付形态单文件 HTML(无需构建、无需服务器)
赞助商360 安全龙虾 / Kimi work / Cola Skill / 真格 Token Grant
安装命令npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill
适合人群独立开发者、AI 产品经理、研究者、KOL、品牌咨询
不适合大段表格数据 / 多人协作 / 必须 PPTX 格式的场景

最后:如果你想真正用起来,最快的方法是直接装好 skill,然后找一篇你最近写的文章,对 Agent 说”帮我做一份瑞士风 PPT,7 页左右”——30 分钟内你就能感受到”AI 端到端做 PPT”是什么体验了。

相关导航

没有相关内容!

暂无评论

none
暂无评论...