html-ppt-skill:让AI生成专业级HTML演示文稿

2026-08-27 浏览 (14)

html-ppt-skill 是一款开源的 AI 赋能 PPT 制作工具,作为 AgentSkill 可以直接集成到 Claude Code、Cursor 等 AI 编程助手,让 AI 一键生成符合专业设计标准的 HTML 演示文稿。它内置丰富的主题、布局和动效资源,纯静态架构无需复杂构建,彻底解决了 AI 生成 PPT 排版混乱的痛点。

核心定位:给AI装上PPT设计大脑

市面上多数 AI PPT 工具只能生成文字大纲,最终排版仍需大量人工调整。html-ppt-skill 另辟蹊径,它不是一个独立的 PPT 编辑器,而是一套面向 AI Agent 的完整技能包,让 AI 真正理解「专业PPT」的设计规范。

安装后,AI 会自动读取项目内置的设计资源索引,生成幻灯片时直接复用成熟的主题、布局和动效,无需从零开始编写 CSS,保证生成结果风格统一、排版规范。

对比传统云端 AI PPT 工具,html-ppt-skill 的优势十分明显:

特性传统云端AI PPThtml-ppt-skill
配置流程需要注册账号、购买套餐、配置API Key一行命令完成安装直接使用
设计一致性每次生成重新构思,风格波动大内置成熟主题模板,输出稳定
隐私保护内容上传第三方服务器处理纯静态本地运行,数据不落地
自定义编辑仅支持有限微调直接修改HTML/CSS,完全掌控
分享方式依赖特定软件打开直接分享链接或文件,双击打开

核心功能:覆盖PPT制作全场景

36套专业主题,一键换肤

项目内置 36 套经过设计打磨的主题,覆盖从极简白到赛博朋克,从学术论文到商业路演、小红书图文等几乎所有常见场景:

  • 技术分享:tokyo-night、cyberpunk-neon
  • 商业汇报:corporate-clean、pitch-deck-vc
  • 内容种草:xiaohongshu-white、soft-pastel
  • 学术报告:academic-paper

所有主题采用 CSS Token 设计,只需要更换一行 <link> 引用就能给整个演示文稿换风格,非常灵活。

15套完整演示模板,直接「抄作业」

不同于只提供单页组件的模板库,html-ppt-skill 提供了15套完整的多页演示模板,分为两类:

  1. 真实风格提炼款(8套):从小红书图文到赛博朋克终端风,从蓝图架构图到马卡龙图文,都是经过实际验证的视觉语言
  2. 通用场景脚手架(7套):包含投资人路演、产品发布会、技术分享、工作周报等常见场景,开箱即用

每个模板都采用 scoped CSS class,多个模板同时加载也不会互相样式污染。

31种单页布局+47种动效

项目内置 31 种单页布局,覆盖封面、目录、时间轴、架构图、对比表格等所有常见PPT页面类型,每个布局都自带示例数据,直接替换内容即可使用。

动效方面分为两层:

  • 27个CSS轻量入场动画,满足基础过渡需求
  • 20个Canvas电影级特效,实现更震撼的视觉表现 进入幻灯片时自动初始化动效,不需要编写任何代码。

像素级体验的演讲者模式

在任意演示文稿按下 S 键,即可打开独立的演讲者窗口,包含四个可拖拽、调整大小的磁吸模块:

  • 幻灯片预览
  • 逐字稿提词器
  • 演讲计时器

两个窗口通过 BroadcastChannel 双向同步翻页,完全零延迟,满足专业演讲需求。

极速上手:一行命令安装

前置需求

  • 兼容 AgentSkill 协议的 AI 工具(Claude Code、Cursor、OpenClaw 等)
  • Node.js 环境(用于执行npx命令)
  • 网络连接(加载字体资源)

安装

执行以下命令即可自动完成安装:

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

整个过程没有复杂的构建步骤,不会安装大量依赖,命令执行完成即可使用。

生成PPT

只需要给AI发送自然语言指令,例如:

  • "做一份8页的技术分享slides,用cyberpunk主题"
  • "把这段大纲转换成投资人pitch deck"
  • "做9张小红书图文,白底柔和风格"

AI 会自动选择合适的模板、布局和动效,几分钟内就能生成一份可以直接演示的HTML PPT。

技术架构:纯静态零依赖,简单清晰

整个项目完全基于 HTML/CSS/JavaScript 实现,没有 webpack,不需要 npm build,不存在依赖地狱。核心第三方资源都通过CDN引入,可选使用:

  • Google Fonts 提供网络字体
  • highlight.js 处理代码高亮
  • Chart.js 支持图表展示

项目结构清晰,便于扩展:

html-ppt-skill/
├── references/   # 详细文档
├── assets/       # 基础样式、主题、动效
└── templates/    # 布局、模板示例

总结

html-ppt-skill 为 AI 生成PPT提供了一套完整的设计规范和资源库,让 AI 从「只会写文字」升级到「能出成品」,大大减少了 PPT 制作的后期调整成本。目前项目在GitHub已经收获超过5.3k Star,是一款非常值得尝试的开源工具。如果你经常需要制作演示文稿,又厌倦了反复调整排版,不妨试一试这个项目。

  • 所属分类: 前端技术
  • 本文标签: 技术
  • 版权声明: 本文链接 https://seaxiang.com/blog/yW5GNo