📦 AI Demo Recorder — 浏览器演示录制

功能说明

screencli 录制 AI 驱动的浏览器会话并生成带有渐变背景、自动缩放、点击高亮和光标轨迹的精美 MP4。AI agent 会根据你的提示指令导航目标 URL，然后录制内容会添加效果并自动上传到 screencli.sh，生成可分享链接。无需视频编辑。

使用场景

在用户要求以下操作时使用此技能：

• 录制演示或教程 网站应用、功能或工作流程的演示
• 创建屏幕录制或视频 展示浏览器中某物的运作方式
• 生成可分享链接 屏幕录制的可分享链接
• 制作 GIF 或视频 用于 README、PR、文档或社交媒体
• 录制前后对比 展示 UI 更改或 bug 修复
• 演示部署或预发布环境 可视化演示

不要将此技能用于：

• 截图（请使用截图工具）
• 非浏览器任务（终端录制、桌面应用）
• 编辑现有视频

快速开始

录制演示并获取可分享链接：

npx screencli record https://example.com -p "Click the Sign Up button, fill in the form with test data, and submit"

首次运行时，CLI 会自动打开浏览器进行 GitHub 登录。之后，它会录制会话、添加效果、上传并打印可分享 URL。

录制

命令

npx screencli record [url] -p "" [options]

URL 和提示是必需的。如果省略，CLI 会交互式提示。

关键选项

示例

简单录制公开页面：

npx screencli record https://myapp.com -p "Navigate to the pricing page and compare the Free and Pro plans"

带认证——先登录私人应用：

# 首次运行：人工登录，保存认证状态
npx screencli record https://app.internal.com -p "Show the dashboard metrics" --login --auth myapp
# 后续运行：重用保存的会话
npx screencli record https://app.internal.com -p "Export the monthly report" --auth myapp

导出

使用平台特定预设导出录制内容：

npx screencli export  --preset 

预设

示例

npx screencli export ./recordings/abc123 --preset twitter

导出还支持 --background、--padding、--corner-radius、--no-shadow、--no-zoom、--no-highlight 和 --no-cursor。

私人应用认证

要录制登录墙后的内容，在首次运行时一起使用 --login 和 --auth：

npx screencli record https://app.example.com -p "..." --login --auth myapp

浏览器会打开让你手动登录。完成后，AI agent 会接管，认证状态会保存到 ~/.screencli/auth/myapp.json。后续运行时只需传递 --auth：

npx screencli record https://app.example.com -p "..." --auth myapp

如果会话过期，重新运行 --login --auth 来刷新。

云端录制

默认自动上传到 screencli.sh。使用 --local 跳过。

命令

积分

1 积分 = 10 个 agent 步骤。免费套餐每月包含 15 积分。录制上传后，CLI 会显示已用和剩余积分。

效果

所有录制内容都会自动进行后期处理：

• 渐变背景 —— 自动选择（使用 --background 覆盖）
• 自动裁剪 —— 移除动作之间的空闲时间
• 自动缩放 —— 在交互期间放大活动区域
• 点击高亮 —— 每次点击的视觉脉冲
• 光标轨迹 —— 流畅的光标移动叠加

使用 --no-zoom、--no-highlight、--no-cursor 单独关闭某个效果。

渐变颜色和完整效果 pipeline 详见 references/effects.md。

故障排除

参考资料

• CLI 参考 —— 所有命令和标志
• 效果参考 —— 渐变、背景、效果 pipeline