browser-recording
录制浏览器会话并转换为GIF动图
安装使用
复制下面这段提示词发给你的 AI(Claude / Cursor / TRAE / Codex / WorkBuddy 等),它会自动帮你完成安装:
帮我安装这个 AI Skill:browser-recording。 它的用途是:录制浏览器会话并转换为GIF动图 完整的 Skill 内容见:https://321skill.com/skills/browser-recording-x-5/raw/index.md 请读取该页面内容,如果是 SKILL.md 格式直接安装,如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接,AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'帮我录制百度首页的搜索框输入过程,时长5秒,输出GIF',它会自动打开浏览器,定位到百度首页,录制输入关键词的动画,并生成高清GIF文件保存到本地。
介绍
在日常工作中,我们经常需要将浏览器中的操作步骤、页面交互或Bug复现过程记录下来,用于教学演示、技术文档或社交媒体分享。这个Skill通过Playwright自动化录制浏览器会话,并直接将视频转换为GIF动图,省去了手工录制、剪辑、转换的繁琐流程,让演示素材的制作变得简单高效。
使用方式非常直观:只需提供目标网页URL和录制时长,Skill会自动打开浏览器并录制指定区域的操作,待录制完成后自动将视频片段压缩、优化并输出为GIF文件。你可以控制录制区域、帧率、质量等参数,确保输出结果清晰且文件大小适中。整个过程无需手动安装任何额外工具,仅依赖Playwright的浏览器自动化能力。
这个Skill特别适合内容创作者、视频剪辑师和高校学生。内容创作者可以快速制作产品功能演示GIF用于社媒或博客;视频剪辑师能高效捕获网页交互用于教程素材;高校学生则能轻松录制实验操作步骤或编程演示,用于汇报或作业提交。此外,测试人员也可用它记录Bug复现过程,便于团队沟通。
使用时建议注意:录制过程会打开真实浏览器,请确保网络稳定并关闭不必要的弹窗或通知;对于包含滚动或动画的复杂页面,可适当增加录制时长和帧率以获得流畅效果。由于输出为GIF,不支持音频,且长时间录制会导致文件较大,建议单次录制控制在30秒以内。
核心特点
与通用的录屏工具不同,这个Skill直接集成在开发工作流中,通过Playwright自动化录制并自动转换为GIF,无需额外安装录屏软件,且支持编程控制录制参数,适合批量或重复性任务。
注意事项
不支持音频录制,且对于超长或高动态页面可能导致GIF文件过大或帧率不稳定。
常见问题
如何录制指定的浏览器标签页?
提供目标URL即可,Skill会自动打开浏览器并录制该页面,无需手动切换标签。
输出GIF的质量和大小可以控制吗?
可以,支持设置帧率、缩放比例和颜色数,平衡质量与文件大小。
给 AI 助手的安装指引
如果你的 AI 编程助手(Claude Code、Cursor、TRAE 等)能看到这个页面,把下面这段发给它即可自动完成安装:
请访问 https://321skill.com/skills/browser-recording-x-5/raw/index.md 读取 browser-recording 的原始 Skill 定义(Markdown 格式),按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址:/skills/browser-recording-x-5/raw/index.md(查看排版版本)