Communitygithub.com

gravar-site

录制网站的流畅水平视频(1440x900,30fps),鼠标自动移动并点击功能,适用于向客户展示网站在电脑端的表现。

gravar-site 是什么?

此技能用于自动录制指定网站在电脑端的水平视频(1440x900,30fps),输出流畅无卡顿的MP4文件。它由脚本驱动,而非AI直接控制:模型仅选择模式、运行命令并最后查看一张检查图像。因此建议在低成本的快速模型上运行(如Haiku、Mini、Flash等),避免使用昂贵模型。支持自动模式和脚本模式:自动模式自动遍历页面各区域、展开菜单、点击按钮、填写表单(不提交)并悬停链接;脚本模式允许定义精确的操作序列(通过JSON文件)。录制过程会加载完整资源(地图、字体、视频),不屏蔽站点外资源以确保真实效果。输出会生成联系页(12帧快照)供操作者最终检查,确保无误后交付。此技能不适用于录制电脑屏幕、竖屏手机视频或视频编辑。

兼容平台✓Claude Code✓Codex CLI✓Cursor✓Antigravity✓Gemini CLI
npx skills add https://github.com/mkttpierre/site-demonstracao/tree/HEAD/skills/gravar-site

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

录制网站

该脚本在一个隐形浏览器中打开网站,逐帧推进时钟,输出一个永无卡顿的 MP4,即使有复杂动画也能流畅运行。录制工作由脚本执行,而非 AI:模型仅负责选择模式、运行命令并在最后检查一张图像。因此请在最便宜的模型上运行此技能:

  • Claude Code: Haiku(/model haiku)或低功耗下的 Sonnet。此处使用 Opus 是浪费。
  • Codex / ChatGPT: 采用 mini 模型或低功耗模式。
  • 其他代理(Gemini CLI, Antigravity, Cursor): 使用快速模型(Flash 或等效模型)。

不要启动子代理或委派给其他代理:解释任务的成本高于执行命令的成本。

运行

node "${CLAUDE_SKILL_DIR}/scripts/gravar.mjs" --url https://site.com --saida "C:/caminho/entregas/site-pc.mp4"

首次在本机运行时:cd "${CLAUDE_SKILL_DIR}/scripts" && npm install。脚本会自动找到 Playwright 的 Chromium 和 ffmpeg;如果缺少任何一个,错误信息会提示安装内容。耗时 1 到 3 分钟。

输出:MP4 文件以及一行 RESULTADO {...} 信息,包含 ok、时长、大小、检查结果和 folha_de_contato(联系页)。

两种模式

  • 自动模式(默认,无需剧本): 显示页面顶部并在菜单按钮上悬停鼠标;逐部分向下滚动;在每个部分中展开标签页、打开问答、点击表单选项、输入姓名("Maria")和简短消息、在按钮和链接上悬停鼠标;然后返回顶部。最长 75 秒(--max 60 可缩短)。适用于大多数网站;已在两种不同结构上进行过测试。
  • 剧本模式(--roteiro roteiro.json): 当操作者需要精确的顺序或自动模式出错时使用。格式和操作定义见 referencia/roteiro-exemplo.json。选择器使用 Playwright 格式(#id, .classe, text=Agendar, role=button[name="X"])。

选项:--viewport 1440x900, --fps 30, --bloquear dominio.com(添加屏蔽),--sem-folha。

脚本已遵循的规则

  • 绝不提交表单,绝不打开 WhatsApp、Instagram 或其他网站:链接仅被悬停鼠标。
  • 开放所有网络资源。地图、字体和嵌入式视频只有在此情况下才能正常加载;如果屏蔽除站点域名以外的所有内容,会导致地图失效并替换品牌字体。
  • 在录制该部分之前,会等待地图和 iframe 实时加载完成。
  • 如果滚动出现卡顿、表单被提交、打开了新窗口或离开了网站,则判定为失败(ok: false)。

交付前必须检查(必须执行)

  1. 读取 folha_de_contato 中的图像(整个视频的 12 帧快照)。检查:白屏、图像缺失、字体替换、地图错误、可见的测试文本(XXXXXX、"lorem"、CRP 或临时电话号码)、光标丢失。
  2. 如果发现任何问题,请修改网站或使用剧本模式;不要带着问题交付。
  3. 删除联系页(rm 加上 folha_de_contato 的路径),并告知操作者 MP4 文件的路径、时长和大小。

视频将放入客户文件夹的 entregas/ 目录。是否发送给客户由操作者决定。

限制

  • 仅支持水平方向。对于竖屏视频,--viewport 390x844 可更改尺寸,但不会模拟触摸操作:将其视为未来扩展功能,不做出承诺。
  • 需要登录或仅能用真实数据打开的网站:请使用剧本模式和预览 URL。
  • 修改网站后需要重新录制时,请先发布修改内容(脚本会录制公开地址或 http://localhost:porta(前提是服务器正在运行))。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

相关技能