别再手动做PPT了:我让AI自己装了个技能,效果炸了

昨天，我的 AI 助手章鱼小弟做了一件让我意外的事：它给自己装了一个"做PPT"的技能。

我没有提前教它怎么做。我只是把一个开源项目的链接扔给了它，说"研究研究"。然后它自己 clone 代码、分析结构、判断需要什么、创建编排系统、写出规范文档——最后生成了两套风格完全不同的精美幻灯片。

效果炸了。但过程中也踩了三个很有意思的坑。今天把整个过程摊开来，给你看看一个 AI Agent 是怎么自己给自己"长技能"的。

一、起因：一篇让我心动的公众号文章

公众号「Draco正在VibeCoding」发了一篇文章《新共识：HTML给人看，Markdown给Agent看！》，里面介绍了 nexu-io/html-anything 这个开源项目。

文章的核心观点很明确：

• • Claude 工程团队内部已经从 Markdown 切到了 HTML
• • 这个项目集成了 75 套 HTML 模板 + 对应的 Skill
• • 直接把仓库地址喂给你的 Agent，让它把 skills 引入，以后文档都用 HTML 模板可视化

我的 AI 助手叫章鱼小弟，跑在 OpenClaw 上。于是我把项目地址发给了它。

二、扔个链接，AI 自己搞定了分析

我把仓库地址和 Demo 页面发给章鱼小弟，让它分析一下：

看下这个开源项目：https://hermes.aigc.green/html-anything/
看怎么利用，里面应该有 skill，下载下来我们研究研究

章鱼小弟做了这几件事：

1. 1. 浏览器打开 Demo 页面，扫描了 75 套模板的完整列表
2. 2. Git clone 仓库，分析项目结构
3. 3. 发现关键信息：每套模板都有 SKILL.md（prompt 指令）+ example.html（预览文件）
4. 4. 发现项目没有上层的编排 skill——有零件，没有调度员

75 套模板覆盖了 13 个类别：

整个分析过程就是一轮对话——把项目地址扔给 AI，它自己 clone、扫描、出结论。

三、AI 的自我修养：自己给自己建了一个编排系统

我问章鱼小弟：

这个怎么统领起来呢，没有一个上层的 skill 编排吗？比如什么场景用哪个模板

它花了大概 10 分钟完成了以下建设：

1. 拷贝 75 个模板到 workspace

skills/html-anything/
├── templates/           ← 75 个模板（SKILL.md + example.html）
├── registry.json        ← 结构化索引（自动生成）
├── scripts/
│   └── build-registry.js
└── SKILL.md             ← 编排 skill 主文件

2. 生成 registry.json 索引

用脚本自动扫描所有 SKILL.md 的 frontmatter，提取名称、分类、场景、标签等结构化数据。

3. 编写编排 SKILL.md

核心是一个"场景→模板路由表"——用户说"做个分享 PPT"，自动匹配 deck-course-module；说"生成技术分享"，匹配 deck-tech-sharing。

现在只要说一句"帮我做个分享 PPT"，章鱼小弟就能自动选模板、读 prompt、生成 HTML。

四、效果炸了：同一篇文章，两种风格的幻灯片

编排 Skill 建好之后，就得实测了。我拿之前写的一篇 Giffgaff 手机卡激活充值教程当内容，直接发了一段话：

你拿我们之前写的 giffgaff 文章，测试一下看看用哪个模板做一个分享的 html

然后又换了个风格：

还是这个 giffgaff 教程分享，换一种风格呢，用演讲者模式 Deck

整个过程就是对话——我说需求，章鱼小弟选模板、生成 HTML、发文件给我。

生成的是单文件 HTML，所有 CSS/JS 内联，浏览器打开就能用，左右箭头翻页。远程办公不在本地电脑也没问题，直接微信收到文件就能预览。

风格一：课程教程版（deck-course-module）

暖纸背景 + Playfair 衬线字体，左侧固定导航栏显示学习目标和进度。

8 页幻灯片，包含封面、学习目标、背景介绍、SIM 激活步骤、支付踩坑、汇率陷阱、信息汇总表、总结。

章鱼小弟自动识别了"教程类内容"→匹配 deck-course-module 模板→读取 SKILL.md 的 prompt 指令→生成完整 HTML→浏览器打开预览。整个流程就是一轮对话搞定。

风格二：演讲者模式版（deck-presenter-mode）

Tokyo Night 暗色主题，全屏内容无侧栏，支持按 T 键切换 5 种主题（Tokyo Night / Dracula / Catppuccin / Nord / 浅色商务），每页还有 150-300 字的逐字稿笔记。

同一个内容，两种风格完全不同的视觉体验。一句话总结：内容不变，换个模板就是完全不同的调性。这就是 75 套模板的威力。

五、效果炸归炸，踩了三个坑

测试过程中遇到了三个问题，每个都有值得记录的教训。

坑 1：翻页功能失效

现象：打开 HTML 后所有页面同时显示，键盘左右箭头无法翻页。

根因：模板中有一段"静态预览"CSS，强制所有 slide 的 opacity:1、position:relative，相当于把导航 JS 架空了。这是为了在没有 JS 的环境下（比如直接打印）能正常显示所有内容。

修复：生成交互版时，注释掉这段 CSS。

<!-- static preview: disabled for interactive mode.
<style>
.deck{height:auto;min-height:100vh;overflow:visible}
.slide{position:relative;inset:auto;opacity:1;...}
</style>
-->

坑 2：主题切换不生效

现象：按 T 键无法切换主题。

根因：双层问题。

第一层——章鱼小弟偷懒。example.html 里有完整的 5 套主题 CSS，但生成时只带了 Tokyo Night 一套，其他 4 套直接省略了。所以按 T 切换后没有对应的 CSS 规则。

第二层——切换方式不对。JS 用了 setAttribute('data-theme', 'dracula')，但这个方法没用——因为所有 <style> 标签同时存在，后面的会覆盖前面的。正确做法是用 style.disabled 属性控制，只启用当前主题的 style 标签。

// ❌ 错误方式
document.documentElement.setAttribute('data-theme', themes[themeIdx]);

// ✅ 正确方式
document.querySelectorAll('style[data-theme]').forEach(el => {
  el.disabled = el.getAttribute('data-theme') !== themes[themeIdx];
});

坑 3：AI 生成时省略内容的深层原因

表面看是"AI 偷懒"，但往深了分析，根因是 SKILL.md 的约束不够。

原始的 deck-presenter-mode SKILL.md 只写了：

【设计细节】
- 默认 tokyo-night; 共 5 套主题 (含 light)

它描述了有 5 套主题，但没约束必须包含所有主题的完整 CSS。所以 AI 生成时看到"5 套主题"就觉得"哦有这个 feature"，实际输出时只写了一套。

修复方案：在编排 SKILL.md 中增加"生成纪律"章节，明确要求：

• • 必须完整参照 example.html，不可省略任何 CSS/JS
• • 主题切换必须用 disabled 属性
• • 生成交互版时必须注释静态预览 CSS

这个教训很重要：给 AI 的指令里，"描述性信息"和"约束性规范"是两回事。前者让 AI 知道有什么，后者让 AI 知道必须做什么。

六、HTML 转图片

HTML 幻灯片生成好了，但实际场景经常需要放到 PPT 里。我问了章鱼小弟一句"能转图片吗"，它直接给了我两套 PNG 压缩包：

后来我又反馈了"主题切换不支持"，它分析了根因并修复——这就是踩坑的起点，下一章细说。

先说 HTML → PNG 的几种方案：

方案 1：Playwright 截图（推荐 ✅）

最简单直接的方式，本地安装了 Playwright 就能用：

const { chromium } = require('playwright');
const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
await page.goto('file://' + htmlPath, { waitUntil: 'networkidle' });

// 逐页激活 slide 并截图
for (let i = 0; i < totalSlides; i++) {
  await page.evaluate((idx) => {
    document.querySelectorAll('.slide').forEach((s, j) => {
      s.classList.toggle('is-active', j === idx);
    });
  }, i);
  await page.screenshot({ path: `slide-${i + 1}.png` });
}

优点：无需启动 Web 服务，直接本地运行，截图质量高。

方案 2：modern-screenshot（仓库官方方案）

仓库的 Next.js 应用用的就是这个库，在浏览器端将 DOM 渲染为 PNG。核心代码在 next/src/lib/export/image.ts，支持 2x 高 DPI 输出、自动等待字体加载。但需要跑在 Next.js 环境中，不如 Playwright 省心。

我最终选了 Playwright，写了个 30 行脚本，一键把 HTML 幻灯片的所有页面导出为 PNG 压缩包，直接拖进 PPT 就能用。

七、最终效果

同一个 Giffgaff 教程内容，两套风格对比鲜明：

• • 课程教程版：暖纸背景 + 左侧导航，温和学术，适合教程分享
• • 演讲者模式版：Tokyo Night 暗色 + 5 主题切换，酷炫专业，适合技术分享

两种风格都是单文件 HTML，浏览器打开即可，左右箭头翻页。演讲者模式版额外支持 T 键切换主题，每页还有逐字稿笔记。PNG 版本（1280×720）也已导出，可以直接插入 PPT 使用。

八、重点来了：给自己也搞一个 AI Agent

回看整个过程，最让我觉得有意思的一件事是，我并没有提前给章鱼小弟装「做PPT」的能力。

它是在我发来项目链接后，自己分析结构，自己判断需要什么，自己创建编排系统，自己写规范文档。等于它给自己长了一个新技能。

个人 AI Agent 和普通聊天机器人最本质的区别就在这儿。聊天机器人是你问它答，对话结束就忘了。AI Agent 有记忆，了解你，能自我更新技能。章鱼小弟知道我喜欢写公众号，知道我的工作目录结构，下次我说「帮我做个分享 PPT」，它直接调用已经装好的 skill 就行，一气呵成。

如果你正在了解 AI，我真诚建议给自己搞一个 OpenClaw 或 Hermes 这样的个人 Agent。不用会编程，它们已经比半年前成熟太多了。拥抱 AI 的变化，不用从学 Prompt Engineering 开始，从拥有一个属于自己的 AI Agent 开始就好。

OpenClaw，https://github.com/openclaw/openclaw
文档，https://docs.openclaw.ai

九、几个实用建议

1. 1. 别只看 SKILL.md，一定要看 example.html。SKILL.md 告诉你意图，但完整的 CSS、JS、动画都在 example.html 里。省略任何一部分都会出问题。
2. 2. 给 AI 加「生成纪律」，不只是「描述信息」。「有 5 套主题」是描述，「必须包含全部 5 套主题的完整 CSS」是约束。后者才能防止 AI 偷懒。
3. 3. HTML → PNG 用 Playwright 最省心。30 行脚本搞定，截图质量和浏览器渲染完全一致。

html-anything 项目，https://github.com/nexu-io/html-anything
模板预览，https://hermes.aigc.green/html-anything/

如果你也在用 AI Agent，强烈建议把这个项目装上。说一句「帮我做个 PPT」，就能拿到一份精美的 HTML 幻灯片，不再是梦想了。