fengfanM/ppt-skill：面向 Agent 的单文件 HTML PPT Skill
fengfanM/ppt-skill：面向 Agent 的单文件 HTML PPT Skill
fengfanM/ppt-skill 是一个适配 Claude Code、Codex 等本地 Agent 环境的网页 PPT 技能，用来把文章、Markdown、产品观点或演讲主题整理成可横向翻页的单文件 HTML 演示稿，并延伸生成 PPT 配图和多平台封面。它更像一套可复用的视觉工作流：Agent 负责理解内容、选择 Style A 电子杂志风或 Style B 瑞士国际主义，最后交付浏览器可打开、可截图、可继续修改的演示页面。
公开仓库：fengfanM/ppt-skill。
一分钟看效果
最小试跑先从克隆、安装或目录检查开始，确认能打开入口文件、读取 Skill 规则或启动对应服务。
npx skills add https://github.com/fengfanM/ppt-skill --skill ppt-skill
git clone https://github.com/fengfanM/ppt-skill.git ~/.claude/skills/ppt-skill
ls ~/.claude/skills/ppt-skill跑通后重点确认这些产物：
- 单文件 HTML 横向翻页 PPT
- PPT 配图素材
- 公众号、小红书、视频号等封面规格图
- 浏览器预览用页面
自制结构图把项目的最小路径压成一条线：先确认输入，再套用规则或模板，最后检查能交付的文件。
为什么需要这个项目
传统做法通常是先让 AI 写大纲，再手工复制到 PPT 软件里排版，最后另开一轮工具做封面和配图。这个过程最不稳定的地方在于视觉系统会断裂：PPT 是一种风格，配图是另一种风格，封面又重新设计。ppt-skill 把模板、版式、主题色、配图比例和检查清单放进 Skill，让 Agent 在同一个工作流里完成内容组织和视觉落位。
核心功能
- 提供电子杂志风和瑞士国际主义两套视觉系统，分别服务叙事分享和事实分析场景。
- 横向翻页支持键盘、滚轮、触屏滑动、底部圆点和索引视图，生成后可直接演示。
- 内置 Style A 10 种布局、Style B 22 种锁定版式，减少临时发明页面结构带来的版式漂移。
- 同一套规则可生成 PPT、配图、公众号 21:9 头图、1:1 分享卡、小红书 3:4 封面等内容。
- 瑞士风配有版式校验命令，可检查图片槽位、标题对齐和危险 SVG 等问题。
与传统方案对比
| 维度 | 传统流程 | 自动化流程 |
|---|---|---|
| 核心目标 | 人工做 PPT 与配图 | 用本项目搭建自动化流程 |
| 适用场景 | 一次性汇报、临时排版 | 需要复用模板、生成、预览和修改的演示生产 |
| 输入格式 | 文章、想法、截图分散在不同文件 | 主题、Markdown、模板、脚本或 Agent 指令 |
| 输出形态 | 手工维护的 PPT 文件 | HTML、PPTX、PNG、视频或可继续编辑的项目产物 |
| 模板处理方式 | 靠人记住字体、配色和版式 | 把模板、规则和检查步骤放进仓库或 Skill |
| 检查方式 | 人工翻页找问题 | 命令、预览、目录检查或视觉 QA 逐步确认 |
| 适合人群 | 偶尔做演示的人 | 希望把 PPT 生产流程沉淀成工具的开发者和内容团队 |
工作原理
- 读取文章、Markdown、截图或演讲主题，先抽出核心观点和页数节奏。
- 根据场景选择 Style A 或 Style B，并确定主题色、图片比例和硬约束。
- 从模板文件中复制合适骨架，按页面功能填入标题、正文、图片槽位和翻页结构。
- 需要配图时按页面比例生成或重构图片，再放入预留槽位。
- 用浏览器打开 HTML，检查翻页、字号、图片位置和静态模式。
- 根据检查结果微调 inline 样式、文案长度和图片裁切。
仓库结构
下面按公开文件和二次开发时应保留的工程入口整理，实际新增目录应以你的本地改造为准。
ppt-skill/
├── README.md
├── README.en.md
├── SKILL.md
├── assets/template.html
├── assets/template-swiss.html
├── references/checklist.md
├── references/image-prompts.md
├── references/screenshot-framing.md
├── scripts/validate-swiss-deck.mjs环境要求
- Node.js 和 npx，用于一行安装 Skill。
- Claude Code、Codex、Cursor 或其他能读写文件并执行命令的 Agent。
- 现代浏览器，用于打开单文件 HTML deck。
- 可选：图像生成能力，用于 PPT 配图、封面和截图再设计。
安装方式
npx skills add https://github.com/fengfanM/ppt-skill --skill ppt-skill
git clone https://github.com/fengfanM/ppt-skill.git ~/.claude/skills/ppt-skill
node ~/.claude/skills/ppt-skill/scripts/validate-swiss-deck.mjs path/to/index.html推荐使用流程
- 先把文章、Markdown、产品说明或演讲主题交给 Agent。
- 说明风格偏好，例如“瑞士风 7 页”或“杂志风分享 PPT”。
- 让 Agent 选择布局并生成 HTML deck 初稿。
- 需要图片时先确定图片类型和比例，再生成或重构素材。
- 打开 HTML 预览，检查翻页、字号、图片槽位和低性能静态模式。
- 修正文案、间距和配图后导出截图或交付单文件 HTML。
常用命令
npx skills add https://github.com/fengfanM/ppt-skill --skill ppt-skill
git clone https://github.com/fengfanM/ppt-skill.git ~/.claude/skills/ppt-skill
git -C ~/.claude/skills/ppt-skill pull
node ~/.claude/skills/ppt-skill/scripts/validate-swiss-deck.mjs path/to/index.htmlfengfanM/ppt-skill 的价值不在于“把文字塞进幻灯片”，而是把演讲页面、配图和封面放到同一套视觉规则里处理。适合已经习惯用 Agent 写作和改文件的人，把内容交给 Agent 后，可以更快得到一份能演示、能截图、能继续微调的 HTML PPT。