html-ppt · HTML PPT 工作室

html-ppt 是一款专为 AI Agent（如 Claude Code, Cursor, Codex, OpenClaw 等）设计的 AgentSkill。它让 AI 能够生成真正可用、视觉精美且交互流畅的 HTML 演示文稿，彻底告别简陋的 PPT 截图或静态页面。

只需一行命令安装，即可赋予 AI 36 套主题、15 套完整 Deck 模板、31 种页面布局以及 47 种动效的能力。更令人兴奋的是，它引入了全新的演讲者模式，提供像素级完美的预览、逐字稿提词器和计时器。

核心亮点

1. 全新演讲者模式 (Presenter Mode)

按 S 键即可开启独立的演讲者窗口，包含四个可拖拽、可调整大小的磁吸卡片：

• 当前页/下一页预览：通过 <iframe> 加载真实 Deck，确保与观众视图 100% 像素级一致（同 CSS、同字体、同Viewport）。
• 逐字稿提词器：遵循“提示信号而非讲稿”原则，每页 150-300 字，口语化表达。
• 计时器：掌控演讲节奏。
• 丝滑同步：通过 BroadcastChannel 和 postMessage 实现双向翻页同步，零闪烁、无白屏、不重载。

2. 丰富的视觉资产

• 36 套主题：从极简白 (minimal-white) 到赛博朋克 (cyberpunk-neon)，再到小红书风 (xiaohongshu-white) 和专业创投风 (pitch-deck-vc)。每个主题均为纯 CSS Token 文件，一键换皮。
• 15 套完整 Deck 模板：包括投资人 Pitch、产品发布、技术分享、周报、小红书图文（9页 3:4）等场景化模板。
• 31 种单页布局：覆盖封面、目录、分栏、代码、图表（柱/线/饼/雷达）、架构图、时间轴、对比图等所有常见需求。

3. 电影级动效

• 27 个 CSS 动画：轻量高效，包括打字机、霓虹光晕、流光、3D 翻转、视差倾斜等。
• 20 个 Canvas FX：震撼视觉，包括粒子爆发、烟花、代码雨、力导向知识图谱、神经网络脉冲、星系漩涡等。由 fx-runtime.js 自动初始化。

4. 纯静态，零构建

• 技术栈：纯 HTML/CSS/JS，无需 Node.js 构建步骤。
• 依赖极少：仅可选引用 CDN 上的 webfont、highlight.js 和 chart.js。
• Iframe 隔离：所有预览均通过 Iframe 渲染，避免样式污染，保证真实性。

安装与使用

1. 安装 Skill

在支持 AgentSkill 的环境中运行：

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

2. 向 AI 下达指令

安装完成后，你可以直接对 AI Agent 说：

• “做一份 8 页的技术分享 slides，用 cyberpunk 主题。”
• “把这段 outline变成投资人 pitch deck。”
• “做一个小红书图文，9 张，白底柔和风。”
• “做一份带演讲者模式的产品分享，我想要有逐字稿。”

资源概览

热门主题示例

• 专业/极简：minimal-white, corporate-clean, academic-paper
• 极客/科技：cyberpunk-neon, terminal-green, dracula, tokyo-night
• 社交/媒体：xiaohongshu-white, xhs-pastel-card, magazine-bold
• 创意/艺术：bauhaus, vaporwave, neo-brutalism, glassmorphism

设计理念

1. Token 驱动：所有颜色、圆角、阴影、字体均在 CSS 变量中定义，修改一个变量即可全局重排。
2. 资深设计师默认值：字号规律、间距节奏、渐变处理均经过精心调优，拒绝“PowerPoint 2006”式的廉价感。
3. 中英双语一等公民：预导入 Noto Sans SC / Noto Serif SC，确保中文排版优雅。
4. 真实预览：所有 Showcase 均通过 Iframe 加载真实文件，所见即所得。