Communitygithub.com

gravar-site

錄製一個流暢不卡頓的橫向網站影片(電腦畫面,1440x900,30 fps),包含滑鼠移動與點擊操作,適合提供給客戶或潛在客戶,讓他們在手機上開啟連結後也能看到電腦版的呈現。

gravar-site 是什麼?

gravar-site 是一個專為 AI 代理設計的技能,用於以全自動或腳本驅動的方式錄製網站操作影片。它藉由 Playwright 啟動無頭 Chromium 瀏覽器,逐影格推進時間軸,最終產出永不卡頓的 MP4 影片,即使在動畫繁重的網站上也一樣流暢。核心優勢在於錄製工作完全由腳本執行,而非 AI 模型本身,因此可以在低成本的模型上運行(如 Claude Haiku、Codex mini),避免浪費昂貴的推理資源。支援兩種模式:自動模式會自動瀏覽網站各區塊、展開選單與表單、懸停滑鼠;腳本模式則允許操作者指定精確的點擊與懸停動作序列。輸出的影片會包含接觸頁(contact sheet)供驗證,強制執行不得提交表單、不得離開網站等安全規則。此技能僅支援橫向錄製,通常用於向客戶展示電腦版網站的外觀與互動方式。

相容平台✓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. 刪除接觸頁(對 folha_de_contato 的路徑執行 rm),並告知操作者 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.

相關技能