browser-recording
录制浏览器操作并转为GIF动图
安装使用
复制下面这段提示词发给你的 AI(Claude / Cursor / TRAE / Codex / WorkBuddy 等),它会自动帮你完成安装:
帮我安装这个 AI Skill:browser-recording。 它的用途是:录制浏览器操作并转为GIF动图 完整的 Skill 内容见:https://321skill.com/skills/browser-recording-x-3/raw/index.md 请读取该页面内容,如果是 SKILL.md 格式直接安装,如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接,AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'录制百度首页的搜索操作,打开www.baidu.com,输入“AI”并回车,录制3秒,输出为test.gif',它会自动控制浏览器完成操作并生成GIF动图,保存到指定路径。
介绍
在制作教学演示、产品宣传素材或记录Bug复现步骤时,手动录屏再转GIF往往步骤繁琐且文件体积大。本Skill通过Playwright自动化录制浏览器会话,并直接输出为轻量级GIF动图,省去后期转换环节,让你快速获得可直接嵌入文档或网页的演示素材。
使用方式非常简单:安装后通过命令行或脚本指定目标URL、录制时长和输出路径,Skill会自动启动无头浏览器执行操作(如点击、输入、滚动等),完成后将录屏片段压缩为GIF。你还可以通过配置参数调整帧率、画质和循环模式,以适应不同场景需求。
适合需要频繁制作操作演示的内容创作者、用于记录测试步骤的测试工程师,以及希望快速生成产品功能展示的视频剪辑师。无论是制作软件教程、汇报材料中的动图,还是为社交媒体准备宣传素材,都能显著提升效率。
建议在录制时保持浏览器窗口尺寸固定,避免窗口缩放导致GIF变形;若录制时间较长,可适当降低帧率以控制文件大小。注意Playwright默认使用Chromium,确认目标网站在该浏览器下兼容。
核心特点
与其他录屏转GIF工具相比,本Skill直接内嵌Playwright实现无头浏览器录制,无需额外安装录屏软件,且可编程控制交互行为,适合自动化流水线或批量生成场景。
注意事项
不适合录制高动态或长时间(如超过30秒)的浏览器会话,GIF文件大小和帧率限制会导致画质下降或体积过大。
常见问题
如何录制特定页面的点击操作?
目前支持通过Playwright脚本自定义键盘鼠标动作,需在配置文件中编写简单的操作步骤,Skill会自动执行并录制。
输出GIF可以调整循环次数吗?
可以,在参数中设置 `--loop 0` 为无限循环,`--loop 1` 为播放一次,默认无限循环。
给 AI 助手的安装指引
如果你的 AI 编程助手(Claude Code、Cursor、TRAE 等)能看到这个页面,把下面这段发给它即可自动完成安装:
请访问 https://321skill.com/skills/browser-recording-x-3/raw/index.md 读取 browser-recording 的原始 Skill 定义(Markdown 格式),按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址:/skills/browser-recording-x-3/raw/index.md(查看排版版本)