◆ 写在前面

2025-2026 年，随着 Claude Code、Codex、Cursor 等 Coding Agent 的普及，一个全新的赛道悄然成型：Agent PPT Skill。这些项目不是"模板下载站"，而是AI 可读的审美规则系统——把排版、配色、动效、版式语言编译成 agent 能理解和执行的指令。

我花了几天时间，把目前 GitHub 上最热门的 7 个项目深度跑了一遍，按使用场景为你逐一拆解。

◆ 1. frontend-slides —— 看图选风格的 Vibe Coding 典范

GitHub: zarazhangrui/frontend-slides | ⭐ 17.6k stars

这是我最符合"Vibe Coding"理念的一个项目。核心亮点：不问你要什么风格，直接生成 3 个不同方向的预览图让你挑。 挑完之后再生成完整 deck，全程零 CSS/JS 知识门槛。

▪ 核心特性

• Show, Don't Tell
  ：不让用户描述审美，而是让用户指认审美
• 12 种精选风格模板
  ：Bold Signal、Electric Studio、Neon Cyber、Terminal Green、Swiss Modern、Paper & Ink 等
• PPT 转网页
  ：保留原文件所有图片和文字
• 一键 Vercel 部署
  或导出 PDF
• 零依赖
  ：单文件 HTML，无需 npm、构建工具

▪ 12 种风格一览

▪ 安装

npx skills add https://github.com/zarazhangrui/frontend-slides --skill frontend-slides

▪ 适合场景

需要快速出一套有设计感的演示文稿，尤其是对外 pitch 或线上分享。对设计完全不懂的用户首选。

▪ 小评

作者 zarazhangrui 在 X 上说得很直白："代码生成的 slides 可以比大部分 PPT 工具做得更好，但前提是你得先让 Claude 理解什么叫'好看'。"这个项目的精髓就在于 Show, Don't Tell——审美是识别出来的，不是描述出来的。

◆ 2. huashu-design —— 一句话生成 HTML deck + 可编辑 PPTX

GitHub: alchaincyf/huashu-design | ⭐ 13k+ stars

花叔（@AlchainHust）这个项目野心更大，不只是做 PPT，而是做 "HTML-native 设计系统"。2026年5月14日刚升级为 MIT 开源协议，商业使用完全免费。

▪ 一句话能输出什么

• 专业 HTML deck
  （浏览器直接打开）
• 可编辑 PPTX
  （给不懂代码的同事改）
• MP4 导出
  （直接当视频用）
• 交互原型
  （可点击的 App demo）
• 信息图/数据可视化
  （印刷级排版）

▪ 核心能力矩阵

▪ 内置 20 种设计哲学

涵盖五大设计学派，从包豪斯、瑞士国际主义到 Brutalism、赛博朋克，每种设计哲学都有完整的色板、字体和排版规则。

▪ 5 维设计评审系统

哲学一致性 · 视觉层级 · 执行工艺 · 功能性 · 创新性——每项 0-10 分，输出雷达图和可执行的改进清单。

▪ 安装

npx skills add alchaincyf/huashu-design

▪ 适合场景

需要多格式交付，或团队里既有技术也有非技术人员协作。尤其适合从 0 到 1 做产品发布会全套物料。

▪ 小评

在 X 中文圈常和 guizang 项目并列推荐，两者审美路线不同：huashu 偏 "设计工具消失感"——你感觉不到在设计工具里操作，一切在对话中完成；guizang 偏 "杂志编辑部美学"。花叔在 README 里写道："An 80-point skill beats a 100-point product for people unwilling to open a graphical UI."——这句定位非常精准。

◆ 3. guizang-ppt-skill —— 专治 AI 生成 PPT 审美灾难

GitHub: op7418/guizang-ppt-skill | ⭐ 7k+ stars

歸藏（@op7418）在 X 上分享自己的 PPT 模板后，直接把整套审美系统开源成了 Skill。这个项目的定位很明确：横向翻页杂志风 HTML PPT。

▪ 双视觉系统

Style A：电子杂志 × 电子墨水

像 Monocle 贴上了代码，适合叙事、观点、分享、个人风格表达。

• 10 种布局：封面、章节、数据大字报、图文、图片网格、Pipeline、对比等
• 5 套电子墨水主题色（不允许自定义 hex 值）

Style B：瑞士国际主义（新增）

网格至上、单一高饱和锚点色、直角、发丝线、极致字号对比。

• 22 种锁定版式：Cover、Statement、KPI Tower、Loop Diagram、Duo Compare 等
• 4 套锚点色：克莱因蓝 IKB、柠檬黄、柠檬绿、安全橙
• 16 列 grid 锁定、无阴影、无渐变、无圆角
• 版式强校验：node scripts/validate-swiss-deck.mjs

▪ 其他特性

• WebGL 流体背景
• Motion One 驱动的入场动效
• 单文件输出（离线可用）
• 低性能模式：按 B 键关闭 WebGL/canvas 动画
• Codex 可选配图流程：GPT-Image 2.0 生成纪实照片/信息图/流程图
• 多平台封面：公众号 21:9、分享卡 1:1、小红书 3:4、视频号横版

▪ 安装

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

▪ 适合场景

15-30 分钟的线下分享、私享会、AI 产品发布、demo day，需要凸显个人风格的场合。不适合大段表格数据、培训课件（信息密度不够）、多人协作编辑。

▪ 小评

歸藏在 README 里写："颜色搭配错了画面瞬间变丑，保护美学比给自由更重要。"这句话戳中了 AI 生成内容的核心痛点——自由度和质量往往是反比关系。在 AI 写代码这件事上，约束越强，下限越高。Style B 瑞士风用强校验脚本拦住"居中标题、实验版式、SVG 内写字、图片脱离槽位"等问题，这种工程化审美管控的思路值得所有类似项目学习。

◆ 4. open-slide —— Agent 最后一公里生产力工具

GitHub: 1weiho/open-slide | ⭐ 3k+ stars

这个项目思路最特别：不是"生成 PPT"，而是 "为 Agent 设计的 Slide 框架"。每张幻灯片是一个 React 组件，固定 1920×1080 画布。

▪ 核心 Workflow

1. 一句话 prompt 生成整套 deck

2. 在浏览器里点击任意元素留 comment

3. 运行 /apply-comments，Agent 自动应用修改

▪ 亮点特性

• Agent-native authoring
  ：内置 /create-slide 和 /slide-authoring 技能
• In-browser inspector
  ：点击任何元素留 comment，持久化为 @slide-comment 标记
• Assets manager + svgl logo 搜索
  ：内置 svgl.app 品牌 logo 目录
• Professional present mode
  ：当前/下一张预览 + 演讲者笔记 + 计时器
• 导出静态 HTML & PDF
• Slide manager
  ：按文件夹管理多个 deck

▪ 安装

npx @open-slide/cli init my-slide cd my-slide pnpm dev

▪ 适合场景

需要高频迭代、多轮修改的场景，或本身就在用 Claude Code/Cursor 的开发者。React 技术栈团队首选。

▪ 小评

这个项目的差异化价值在于 Agent 交互循环：生成 → 点击评论 → /apply-comments → 重复。传统 AI PPT 工具是"一次生成、人工修改"，open-slide 做到了"生成-反馈-修改"的闭环，且反馈交互在浏览器中完成，非常优雅。

◆ 5. html-ppt-skill —— 模板党的军火库

GitHub: lewislulu/html-ppt-skill | ⭐ 3k+ stars

这个项目走的是 "模板丰富度" 路线，数据量堪称恐怖：

▪ 数量统计

▪ 36 套主题精选

minimal-white、editorial-serif、soft-pastel、sharp-mono、catppuccin-latte/mocha、dracula、tokyo-night、nord、solarized-light、gruvbox-dark、rose-pine、neo-brutalism、glassmorphism、bauhaus、swiss-grid、terminal-green、xiaohongshu-white、cyberpunk-neon、vaporwave、corporate-clean、academic-paper、pitch-deck-vc 等

▪ 演讲者模式亮点

按 S 键弹出 4 张磁吸卡片窗口：

• 当前幻灯片（像素级预览）
• 下一张预览
• 逐字讲稿（150-300 字/页）
• 计时器

通过 BroadcastChannel 双窗口同步，切换幻灯片无闪烁。

▪ 安装

npx skills add https://github.com/lewislulu/html-ppt-skill

▪ 适合场景

不想从零开始设计，直接套模板改内容。模板密度最高，36 套主题 × 31 种布局 × 15 个完整 deck，几乎覆盖所有场景。如果需求是"快速出一版能看的"，这个库的素材是最丰富的。

◆ 6. beautiful-html-templates —— Agent 自动挑选填充

GitHub: zarazhangrui/beautiful-html-templates | ⭐ 1k+ stars

同样是 zarazhangrui 的项目，这个更像是 frontend-slides 的模板仓库。32+ 套 HTML Slide 模板，专为 coding agent 准备。

▪ 模板选摘

• Soft Editorial：暖纸+鼠尾草色，Cormorant Garamond 衬线
• Editorial Forest：森林绿+灰粉+暖奶油色
• Pin & Paper：黄色纸+安全别针插画
• Sakura Chroma：复古日式磁带美学，彩虹斜条纹
• Cobalt Grid：钴蓝斜体衬线+方格纸画布
• Emerald Editorial：翡翠绿+海军蓝+重磅 Bodoni 展示字体
• Neo-Grid Bold：现代网格粗体
• 以及更多...

▪ Agent 自动匹配机制

Agent 根据用户内容类型，通过 index.json 匹配最合适的模板：

• 自动克隆模板 → 替换占位内容 → 生成3张预览图让用户确认
• 内容超长时自动复制布局、不足时删除页面
• 支持组合式布局：表格、流程图、时间线等

▪ 安装

git clone https://github.com/zarazhangrui/beautiful-html-templates

▪ 适合场景

批量生成多套风格一致的 deck，或需要建立团队统一视觉规范。配合 frontend-slides 使用效果更佳。

◆ 7. open-design —— Claude Design 的开源替代

GitHub: nexu-io/open-design | 高速增长中

Tom Huang 团队开源的本地优先设计系统，目标是做 Claude Design 的开源替代方案。两天 40k stars 的增长速度说明了市场需求。

▪ 核心能力

• 16 种 Coding Agent CLI 自动检测
  ：Claude Code、Codex、Cursor、Gemini CLI、Hermes、Qwen、Copilot CLI 等自动识别
• 72 套品牌设计系统
  ：Linear、Stripe、Vercel、Notion、Apple、Anthropic、Supabase、小红书等
• 31 个内置 Skills
  ：27 个 prototype + 4 个 deck 模式
• 多格式导出
  ：HTML / PDF / PPTX / ZIP
• 本地 daemon + Web 应用
  架构
• BYOK（自备 API Key）
  ：支持 Anthropic、OpenAI、Azure、Google Gemini

▪ 核心设计理念

1. 我们不提供 agent，你的够好了——自动检测 PATH 里的 CLI

2. Skills 是文件，不是插件——遵循 Claude Code SKILL.md 规范

3. 设计系统是便携 Markdown——9 段式 DESIGN.md 规范

4. 交互式问题表单——在模型动笔前锁定需求

5. Daemon 让 agent 感觉在你的电脑上——因为它真的在

▪ 与其他项目的关系

Open Design 直接整合了多个开源项目：

• huashu-design
  ：设计哲学指南、5 步品牌资产协议、5 维评审
• guizang-ppt-skill
  ：deck 模式，完整 bundled
• open-codesign
  ：流式渲染、沙箱预览
• multica
  ：daemon + 运行时架构

▪ 安装

git clone https://github.com/nexu-io/open-design.git cd open-design pnpm install pnpm tools-dev

▪ 适合场景

需要的不只是 PPT，而是整套设计工作流（原型、deck、信息图、动效、评审）。如果你在用 Claude Design 但不想被锁定，这是最完整的替代方案。

◆ 横向对比总表

◆ 按场景推荐

▪ 🎯 对外 Pitch / 线上分享

首选 frontend-slides → 3 张预览图选风格，零门槛出设计感 deck。

▪ 🎯 产品发布会全套物料

首选 huashu-design → 一份需求同时拿到 HTML deck、可编辑 PPTX、发布动画 MP4。

▪ 🎯 线下私享会 / 演讲

首选 guizang-ppt-skill → 杂志风横向翻页，WebGL 背景，个人风格最强。

▪ 🎯 高频迭代 / 多轮修改

首选 open-slide → 浏览器点击留 comment，/apply-comments 自动修改，迭代效率最高。

▪ 🎯 快速出活 / 不挑设计

首选 html-ppt-skill → 36 套主题 + 15 个完整 deck，模板密度最高，总有一款能用。

▪ 🎯 团队统一视觉规范

首选 beautiful-html-templates → Agent 自动根据内容挑模板，批量生成风格一致 deck。

▪ 🎯 完整设计工作流

首选 open-design → 原型 + deck + 信息图 + 动效 + 评审，本地优先，无厂商锁定。

◆ 几个值得深思的共同趋势

▪ 1. 审美编译化

这些项目最核心的贡献，不是代码写得有多好，而是把"好看"这件事从人的主观感受翻译成了 AI 能执行的规则。颜色搭配、字号对比、间距系统、动效曲线——每一层都被参数化、规则化。

▪ 2. 自由度与质量的博弈

一个反复出现的主题：约束越多，下限越高。guizang 不允许自定义 hex 值，huashu 有 20 种哲学锁定方向，html-ppt 有 36 套严格主题。给 AI 太多自由度，往往产出平庸的"AI 风"设计。

▪ 3. 从工具到框架的演变

早期项目是"帮我做一份 PPT"，最新项目（open-slide、open-design）开始转变为"给你一个框架，AI 在里面创作"。框架化的好处是迭代闭环：生成 → 反馈 → 修改 → 再生成。这可能是 Agent 设计的最终形态。

▪ 4. 开源生态的协作模式

open-design 直接 bundled 了 guizang-ppt-skill 和 huashu-design 的设计哲学。这不是抄袭，而是 AI 时代的新开源文化——模块化设计系统可以像 npm 包一样被引用和嵌入。每个项目专注做好一个审美方向，然后通过更上层的编排系统组合使用。

◆ 结语

这些项目的共同点很清晰：它们都在用代码重新定义"什么是好看的 PPT"。

以前做 PPT 是在 PowerPoint 里拖拽，现在是在跟 AI 描述你要什么。但 AI 不懂审美——所以这些开源作者做的事，本质上是在把审美编译成 AI 能理解的规则。

正如 frontend-slides 作者所说："代码生成的 slides 可以比大部分 PPT 工具做得更好，但前提是你得先让 Claude 理解什么叫'好看'。"

如果你也在用 Claude Code 做内容生产，这 7 个库值得全部 clone 下来试一遍。因为你会发现：AI 生成内容的天花板，往往不在 AI 本身，而在你给它的"审美约束系统"有多严谨。

所有项目都是开源免费，直接 npx skills add <项目名> 即可使用。