用 Hermes Agent 实现网页截图（附代码）

为了解决截图的烦恼，我们最近上线了一个专门用于网页截图的小工具。
🔗 工具体验地址：网页截图工具入口

相比于普通的电脑截图软件，它最大的优势在于场景丰富。你不仅可以用它截普通的电脑网页，还能完美模拟手机、平板的显示效果。不仅能截第一屏，连那种需要一直往下拉的长网页，它也能一键搞定。

图示：网页截图工具的 Logo

图示：这是我们截图工具的操作界面，非常清爽简单

图示：这是手动输入网址后，生成的截图结果

---

这是一个经常用到的工具，平常碰到截图的需求，直接在电脑上使用相关的截图小软件就可以完成。 有时候需要在电脑上模拟手机的截屏还是会麻烦一点，这个工具就考虑了此类的场景，支持 PC ，平板，手机，自定义分辨率等需求，还可以首屏和滚动截屏。

这个工具还可以和 OpenClaw , Hermes Agent , WorkBuddy , CodeBuddy, OpenCode , Codex 等工具一起结合使用。
下面以 Hermes Agent 为例，介绍如何使用截图工具。

最近经常遇到图片处理中需要增加水印的情况。给图片加水印是一个重复次数较多，做起来比较枯燥。让 Hermes Agent 写了一个 Skill 自动化完成这个工作。

---

第二部分：让 AI 替你打工 —— Hermes Agent 登场

手动用网页工具截图确实方便了些，但如果遇到图片处理（比如截图后还要加水印）等重复性工作，还是有点累。

能不能让 AI 帮我们自动调用这个截图工具呢？ 答案是：完全可以！
这里我们就要请出今天的主角：Hermes Agent。它就像是一个听话的数字员工，只要你教给它一个“技能（Skill）”，它以后就能帮你全自动干活。

核心原理（小白也能懂）：

简单来说，就是我们通过聊天的方式，告诉 Hermes Agent：“我给你一个截图工具的说明书，你学会它。以后我丢给你网址，你就自己去调用这个工具帮我截图。”

准备工作：获取你的“通行证”（API Key）

要让 AI 能够使用截图工具，需要给它一把“钥匙”，在程序里这叫 API Key。

1. 点击这里申请你的专属钥匙：API Key 申请地址
2. 拿到钥匙后，我们需要在 Hermes Agent 中把它存起来，名字就叫 JCJC_APIKEY。（就像把钥匙放在固定的抽屉里，AI 用的时候自己去拿）。

---

第三部分：手把手教 AI 学习截图技能

打开你的 Hermes Agent，我们不需要写复杂的代码，只需要用人类的自然语言对它下达指令即可。

请把下面这段话（提示词），直接复制粘贴发送给 Hermes Agent：

你的任务是创建一个网站在线截图的 skill（技能）， skill 的名字： my-web-page-snapshot

参考文档： https://cuobiezi.net/tools/image/website/snapshot/docs/llms.txt
调用说明： 调用 API 接口需要 Bearer 的认证 token ，就存储在刚才说的全局变量 JCJC_APIKEY 中。
命名规范： 截图后的文件名称请按照这个格式保存：{original_name}snapshot{yyyymmdd}.{ext} 。
使用场景： 当使用 my-web-page-snapshot 这个技能的时候，用户可能会提供一个或者多个网址，请你耐心逐一调用处理。

发送出去后，Hermes Agent 就会开始编写自动化脚本了。

图示：将提示词输入给 Hermes Agent 开始创建技能

💡 小插曲：遇到问题不用慌
在测试过程中，我遇到了一个小意外——接口提示账户费用不够了。
不过这刚好展示了 Hermes Agent 让人安心的一面：它会清晰地把错误信息反馈给你，细节满满。充值或调整后，任务就能继续顺畅运行。

图示：AI 在执行时遇到余额不足的提示，反馈非常清晰

图示：Hermes Agent 正在努力编写和调试截图技能的细节过程

图示：AI 甚至可以对截图任务进行可视化的安全认证

不仅能截取单个网页，AI 还会很聪明地进行批量测试：

图示：AI 正在测试同时处理多个网址的批量截图模式

稍等片刻，系统就会提示你，这个名为“网页截图”的专属技能已经创建成功啦！

图示：大功告成！你拥有了一个专属的自动化截图技能

---

第四部分：见证奇迹！一句话搞定网页截图

技能建好后怎么用呢？超级简单。
在 Hermes Agent 的对话框里，敲下一个斜杠 /，你就会看到刚才创建的 my-web-page-snapshot 技能弹出来了。

图示：使用斜杠命令，轻松召唤你的截图小助手

现在，我们就拿全球知名的代码托管网站 GitHub 来做个测试。
直接输入：

/my-web-page-snapshot 你的任务是给网址 www.github.com 截图。

图示：向 AI 下达对 GitHub 首页进行截图的具体指令

按下回车，你去喝口水的功夫，Hermes Agent 就把任务干完了！它还会给你一份详细的“工作汇报”。

图示：AI 正在飞速执行我们刚刚下达的截图任务

以下是 Hermes Agent 的执行结果汇报：

╭─ Ψ Poseidon ────────────────────────╮
截图成功。

结果：
- URL: https://www.github.com
- 模式: viewport（首屏）
- 设备: desktop（1920×1080）
- 输出文件: /tmp/www.github.com_snapshot_20260611.png
- 图片规格: 1920×1080, PNG, RGB

如需其他样式（全页长图、手机模式等），可以告诉我。

╰──────────────────────────────────────╯

图示：任务圆满成功，AI 贴心地输出了详细的结果日志

最后，让我们来看看这张全自动生成的截图效果吧，非常高清完美：

图示：这就是 AI 帮我们自动截取的 GitHub 高清首页图

写在最后

如果你也在用 Hermes Agent 欢迎加入我们的社群，一起进步：