我喜欢在我在线写作中包含动画 GIF 演示，通常使用 LICEcap 录制。交互式解释 章节中有一个例子。
这些 GIF 可能相当大。我尝试了一些工具来优化 GIF 文件大小，我最喜欢的是 Eddie Kohler 的 Gifsicle。它通过识别未更改的帧区域并仅存储差异来压缩 GIF，并且可以可选地减少 GIF 调色板或应用可见的有损压缩以获得更大的尺寸减小。
Gifsicle 是用 C 编写的，默认界面是一个命令行工具。我想要一个 Web 界面，这样我可以在浏览器中访问它并可视地预览和比较不同的设置。
我在 iPhone 上使用 Claude iPhone 应用从我的 simonw/tools 仓库提示 Claude Code for web，以下是提示：
以下是它构建的内容，加上我用该工具优化的动画 GIF 演示：
让我们逐块解决该提示。
gif-optimizer.html
第一行简单地告诉它我想创建的文件名。这里只是一个文件名就够了——我知道当 Claude 在仓库上运行"ls"时，它会理解每个文件都是一个不同的工具。
我的 simonw/tools 仓库目前缺少 CLAUDE.md 或 AGENTS.md 文件。我发现助手从现有文件树扫描和查看现有文件中的相关代码中足以掌握仓库的要点。
将 gifsicle 编译为 WASM，然后构建一个网页，让你打开或拖放一个动画 GIF 到它上面，然后它向你显示使用 gifsicle 以多种不同设置压缩的 GIF，每个都有大小和下载按钮
我在那里做了很多假设——都得到了回报。
Gifsicle 几乎有 30 年历史了，是一款广泛使用的软件——我相信仅凭名称提及它就足以让 Claude 找到代码。
"Compile gifsicle to WASM" 在这里做了很多工作。
WASM 是 WebAssembly 的缩写，是一种让浏览器在沙箱中运行编译代码的技术。
将 Gifsicle 这样的项目编译为 WASM 不是一件琐碎的操作，涉及通常涉及 Emscripten 项目的复杂工具链。它通常需要大量试验和错误才能让一切工作。
编程助手非常擅长试验和错误！他们通常可以蛮力解决我会在第五个不可理解的编译器错误后放弃的问题。
我见过 Claude Code 多次弄清楚 WASM 构建，所以我有信心这会工作。
"然后构建一个网页，让你打开或拖放一个动画 GIF 到它上面"描述了我在许多其他工具中使用过的模式。
HTML 文件上传适用于选择文件，但更好的 UI，特别是在桌面上，是允许用户将文件拖放到页面上的一个显眼位置。
设置这涉及一点 JavaScript 来处理事件和一些 CSS 用于放置区域。它不复杂，但比我自己通常会添加的额外工作多一点。有了提示，它几乎免费。
然后向你显示使用 gifsicle 以多种不同设置压缩的 GIF，每个都有大小和下载按钮描述了应用程序的关键功能。
我没有费心定义我想要设置的集合——根据我的经验，Claude 有足够好的品味为我去挑选，我们可以总是如果它的第一个猜测不工作就去改变它们。
显示大小很重要，因为这都是关于优化大小的。
我从过去的经验知道，要求一个"下载按钮"会得到一个具有正确 HTML 和 JavaScript 机制的按钮，点击它会提供文件保存对话框，这是比需要右键单击保存更方便的便利。
还包括 gifsicle 选项的手动使用控件——每个预览都有一个"调整这些设置"链接，设置那些用于该预览的手动设置，这样用户可以进一步自定义
这是一个相当笨拙的提示——毕竟我是在手机上打的——但它表达了我的意图，足以让 Claude 构建我想要的。
以下是该工具的样子，这张截图显示了移动版本。每个图像都有一个"调整这些设置"按钮，点击时会更新这组手动设置和滑块：
运行"uvx rodney --help" 并使用该工具测试你的工作——用这个 GIF 测试 https://static.simonwillison.net/static/2026/animated-word-cloud-demo.gif
编程助手如果你确保它们在工作时有能力测试代码，效果会好得多。
有多种不同的方式来测试 Web 界面——Playwright、Selenium 和 agent-browser 是三个可靠的选择。
Rodney 是我自己构建的浏览器自动化工具，安装快速，--help 输出被设计为教助手需要知道的使用该工具的一切。
这非常有效——在会话记录中你可以看到 Claude 使用 Rodney 并修复它发现的一些小错误，例如：
CSS display: none 赢得了内联样式重置。我需要明确设置 display: 'block'。
后续提示
当我与 Claude Code 一起工作时，我通常会关注它在做什么，这样我可以在它仍在进行中时重定向它。我也经常在它工作时想出新想法，然后注入队列。
在提交中包含构建脚本并与原始 gifsicle 代码的 diff 放在适当的子目录中
构建脚本应该将 gifsicle 仓库克隆到 /tmp 并在应用 diff 之前切换到已知提交——因此提交中没有 gifsicle 的副本，但包含构建 wqsm 所需的所有脚本
当我注意到它投入了大量努力来弄清楚如何让 Gifsicle 与 WebAssembly 一起工作时，我添加了，包括修补原始源代码。以下是补丁和它添加到仓库的构建脚本。
我知道该仓库已经有一个支持文件所在位置的模式，但我记不清那个模式是什么。说"在适当的子目录中"足以让 Claude 弄清楚把它放在哪里——它找到了并使用了现有的 lib/ 目录。
你应该包含 wasm 包
这可能不必要，但我想绝对确保编译的 WASM 文件（结果是 233KB）被提交到仓库。我通过 GitHub Pages 在 tools.simonwillison.net 提供 simonw/tools，我希望它在本地不需要构建就能工作。
确保 HTML 页面 credits gifsicle 并链接到仓库
这只是为了礼貌！我经常围绕其他人的开源项目构建 WebAssembly 包装器，我喜欢确保它们在结果页面中得到信任。
Claude 将此添加到工具的页脚：
Built with gifsicle by Eddie Kohler, compiled to WebAssembly. gifsicle is released under the GNU General Public License, version 2.
原文：Agentic Engineering Patterns by Simon Willison
关注公众号「Python之禅」，回复「1024」免费获取Python资源
