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 等问题。

与传统方案对比

工作原理

1. 读取文章、Markdown、截图或演讲主题，先抽出核心观点和页数节奏。
2. 根据场景选择 Style A 或 Style B，并确定主题色、图片比例和硬约束。
3. 从模板文件中复制合适骨架，按页面功能填入标题、正文、图片槽位和翻页结构。
4. 需要配图时按页面比例生成或重构图片，再放入预留槽位。
5. 用浏览器打开 HTML，检查翻页、字号、图片位置和静态模式。
6. 根据检查结果微调 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

推荐使用流程

1. 先把文章、Markdown、产品说明或演讲主题交给 Agent。
2. 说明风格偏好，例如“瑞士风 7 页”或“杂志风分享 PPT”。
3. 让 Agent 选择布局并生成 HTML deck 初稿。
4. 需要图片时先确定图片类型和比例，再生成或重构素材。
5. 打开 HTML 预览，检查翻页、字号、图片槽位和低性能静态模式。
6. 修正文案、间距和配图后导出截图或交付单文件 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.html

fengfanM/ppt-skill 的价值不在于“把文字塞进幻灯片”，而是把演讲页面、配图和封面放到同一套视觉规则里处理。适合已经习惯用 Agent 写作和改文件的人，把内容交给 Agent 后，可以更快得到一份能演示、能截图、能继续微调的 HTML PPT。