browser-recording
使用Playwright录制浏览器操作并转换为GIF动图
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：browser-recording。 它的用途是：使用Playwright录制浏览器操作并转换为GIF动图 完整的 Skill 内容见：https://321skill.com/skills/browser-recording-x-7/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘请使用browser-recording技能，帮我录制一个在电商网站首页搜索“蓝牙耳机”并加入购物车的操作，输出为GIF。’，它会启动浏览器，自动执行搜索、浏览、点击加入购物车等一系列操作，全程录制屏幕，最后生成一个展示完整流程的GIF动图文件，方便你用于编写用户操作手册。
介绍
这个Skill解决了自动化录制浏览器操作并生成演示素材的难题。它利用Playwright驱动浏览器，精确捕捉用户在网页上的所有交互行为，并将录屏视频自动转换为体积更小、便于分享的GIF动图。
使用时，你只需指定目标网页和操作流程，Skill便会启动一个浏览器实例，执行预设的导航、点击、输入等操作，同时录制整个屏幕或指定区域。录制完成后，它会调用视频处理工具，将视频文件高效地转换为GIF格式，并支持调整帧率、尺寸等参数。
它非常适合需要制作软件操作教程、产品演示、Bug复现步骤或自动化测试报告的前端开发、测试工程师和内容创作者。对于产品经理和营销专员而言，这也是快速生成产品功能展示素材的利器。
建议在稳定的网络环境下使用，并确保已安装必要的依赖（如FFmpeg）。由于录制过程会消耗一定系统资源，建议在性能足够的机器上运行，并注意控制录制时长和GIF分辨率以平衡文件大小与清晰度。
核心特点
与单纯截图或录屏工具不同，它深度集成Playwright实现可编程的自动化操作录制，并能一键将高清录屏转换为轻量的GIF，特别适合需要嵌入文档或即时通讯软件的步骤演示。
注意事项
不适合录制需要高帧率或包含复杂动态细节（如快速动画、游戏画面）的场景，GIF格式在色彩表现和压缩上可能存在损失。
常见问题
录制时能隐藏浏览器UI吗？
可以，Playwright支持无头模式运行，录制时不会显示浏览器窗口。
生成的GIF文件太大怎么办？
可以通过调整输出GIF的帧率、颜色数量和尺寸来有效减小文件体积。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/browser-recording-x-7/raw/index.md 读取 browser-recording 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/browser-recording-x-7/raw/index.md（查看排版版本）