用 Claude Code 录浏览器操作 GIF，这个 Skill 专治「演示脚本难写」

做开发工具推广、写教程、给 PR 加录屏，最头疼的是什么？不是写代码，是把浏览器里的每一步操作录成可复现的演示。

要么你手忙脚乱边点边录屏，事后还要剪辑；要么你写一堆 Playwright/Cypress 脚本，结果只是跑个 demo 根本没必要那么重。

今天推荐一个思路非常清晰的 Skill：automating-browser。它专为 Claude Code 设计，做的是「轻量交互式浏览器自动化」这件事。

它是什么

automating-browser 是一个基于 claude-in-chrome MCP 扩展的 Claude Code Skill。它的能力边界写得非常清楚：

• ✅ 适合：演示录制、文档 GIF、手动测试、实时浏览器操控
• ❌ 不适合：CI/CD 里的 E2E 自动化测试（那应该用官方 webapp-testing Skill）

这种「说清楚自己不该被用在哪」的 Skill，比什么都敢揽的靠谱得多。

能做什么

• 截图：随时抓取当前页面快照，做视觉验证
• 表单填写：让 Claude 按步骤填写表单、点击按钮
• 导航控制：打开页面、切换 tab、跳转链接
• GIF 录制：把整个操作过程录成 GIF，直接贴进文档或 README
• 数据提取：从当前浏览器页面抓取内容

工具权限收得很窄：只允许 Read、Glob 和 claude-in-chrome 的 MCP 调用，不会乱碰你的文件系统。

为什么值得装

很多人对 Claude Code 的浏览器能力有个误解：要么以为它只能看页面，要么以为要写一整套自动化框架才能录 demo。

automating-browser 把门槛降到了最低——你只需要在 Chrome 里装好 claude-in-chrome 扩展，然后在 Claude Code 里用自然语言说「帮我把这个表单填一遍并录成 GIF」，它就能一步步执行并生成产物。

对写教程的人、做开源推广的人、或者单纯想省点重复操作时间的人来说，这个 Skill 的 ROI 很高。

怎么用

1. 安装 claude-in-chrome Chrome 扩展
2. 在 Claude Code 项目中安装 automating-browser Skill
3. 用自然语言描述你想让 Claude 在浏览器里做什么
4. 需要录屏/GIF 时，让它开启录制再执行操作

注意：这个 Skill 的定位是交互式演示辅助，不是 CI 自动化。如果要写真正的 E2E 测试流水线，还是去装 Playwright/Cypress 那一套。

如果你经常要给 Claude Code 的能力做演示，或者想用 AI 帮你录一系列浏览器操作，这个 Skill 值得放进你的工具箱。

🔗 GitHub：https://github.com/ForceInjection/domain-driven-design-skills/tree/main/relative-skills/claude-skill-registry/skills/testing/automating-browser

GitHub: https://github.com/ForceInjection/domain-driven-design-skills/tree/main/relative-skills/claude-skill-registry/skills/testing/automating-browser