by Rain Chu | 6 月 14, 2026 | AI, 影片製作
HyperFrames 是 HeyGen 推出的開源影片製作框架，核心概念是把影片當成網頁來寫，再渲染成 MP4 影片。
HyperFrames 改成用 HTML、CSS、JavaScript 來描述畫面與動畫。也就是說，標題、圖片、影片片段、字幕、轉場、背景音樂，都可以像寫網頁一樣被組合起來，再由系統渲染成正式影片。
它最大的特色，是專門為 AI coding agent 設計。使用者可以搭配 Claude Code、Cursor、Gemini CLI、Codex 等工具，只要用自然語言描述想要的影片，例如：「做一支 10 秒產品介紹影片，加入淡入標題、背景影片和音樂」，AI 就可以產生對應的 HyperFrames 專案、HTML 結構、動畫設定，並協助預覽與輸出。
HyperFrames 適合的應用包括產品介紹影片、社群短影音、簡報轉影片、PDF 轉說明影片、CSV 資料動畫、圖表競賽影片、字幕動畫、網站展示影片，以及自動化內容生產流程，對於想要建立大量短影音模板、AI 行銷內容流程，或把影片製作變成可重複執行 pipeline 的團隊來說，這是一個很值得關注的工具。
簡單來說，HyperFrames 不是一般的無程式碼剪輯工具，而是「影片即程式碼」的製作方式。它讓影片可以被版本控制、被 AI 修改、被自動化產生，也更容易整合到內容生產系統中。
安裝
安裝方式也很直接，要搭配 AI agent，可以使用：
npx skills add heygen-com/hyperframes
如果要手動建立影片專案，可以使用：
npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes render
參考資訊
by Rain Chu | 4 月 2, 2026 | Agent, AI
🧠 什麼是 OpenCLI？
OpenCLI 是一個結合 CLI（命令列）＋AI Agent＋瀏覽器控制能力 的工具。
它讓你可以：
- 用 AI 操作你的瀏覽器（真的操作你的 Chrome）
- 控制本地開發工具（例如 Cursor）
- 串接自訂 Plugin（抓資料、爬網站、整合 API）
👉 簡單來說，它是「本地版 AI Agent 作業系統」
🧠 核心組件說明
1️⃣ Runtime（最重要）
OpenCLI 本體負責：
👉 類似：
- LangChain Agent Executor
- 或 AutoGPT 的 runtime
2️⃣ Plugin Adapter（YAML）
👉 這是 OpenCLI 最強的地方之一
你可以：
- 把網站轉成 CLI
- 定義資料抓取規則
- 建立 AI 工具鏈
📌 重點：
👉 不是寫程式，而是寫 YAML
3️⃣ Browser Bridge（關鍵黑科技）
OpenCLI 不是用 Selenium
👉 而是：
- Playwright MCP bridge
- Chrome DevTools Protocol（CDP）
👉 直接控制「你正在用的瀏覽器」
4️⃣ Channel / Gateway
負責：
⚡ 核心特色
1️⃣ 直接使用你的 Chrome（含登入狀態）
OpenCLI 最大的優勢之一：
👉 直接控制你正在使用的 Chrome
這代表：
- ✅ 可以使用已登入的帳號（Google、FB、銀行等）
- ✅ 可以存取 cookies / session
- ✅ 不需要重新登入
背後技術是：
👉 Chrome DevTools Protocol（CDP） ( opencli chrome外掛)
這比 Selenium 強的地方在於：
2️⃣ 控制 Cursor 寫程式（AI 自動開發）
Cursor 是目前非常強的 AI 編輯器，而 OpenCLI 可以直接操控它 👇
🛠️ 設定方式
Step 1：啟動 Cursor Debug 模式
cursor --remote-debugging-port=9226
⚠️ 注意：
- 視窗 不能關閉
- 這會開啟 CDP 讓 OpenCLI 控制
Step 2：設定環境變數
mac or linux
export OPENCLI_CDP_ENDPOINT="http://127.0.0.1:9226"
windows 版本
set OPENCLI_CDP_ENDPOINT=http://127.0.0.1:9226
Step 3：測試是否成功
opencli cursor model
Step 4：讓 AI 寫程式
opencli cursor send "新增一個 readme.txt"
👉 OpenCLI 會直接：
🔥 實際應用場景
- 自動生成專案 README
- 批次修改程式碼
- 自動補齊文件
- AI Refactor 專案
👉 等於你有一個「真的會操作 IDE 的 AI 工程師」
3️⃣ 自訂 Plugin Adapter（YAML 抓網站）
OpenCLI 支援自訂 Plugin，透過 YAML 定義資料來源 👇
🧩 範例概念
name: fetch_news
description: 抓取新聞網站資料request:
url: https://example.com/news
method: GETparse:
type: html
selectors:
title: h1.title
content: div.article
👉 你可以做到：
- 抓網站資料
- 做 ETL pipeline
- 整合 API
- 建立 AI 工具鏈
📦 安裝 OpenCLI
官方資源：
npm install -g @jackwener/opencli
安裝 OpenCLI Chorm extension
https://github.com/jackwener/opencli/releases
下載 opencli-extension.zip
解壓縮後放到 chrome 的擴充套件中
檢查安裝狀態
opencli doctor
看到上面的資訊就代表成功
可以測試用自己的帳號去查 B 站的最熱門影片了
opencli bilibili hot –limit 5
⚡ 三大核心能力
🔥 1. 把任何網站變 CLI
👉 這是 OpenCLI 最核心功能
例如：
opencli hackernews top
opencli twitter mentions
opencli gmail read
背後：
🔥 2. 直接用你 Chrome（含登入）
👉 這點非常關鍵（你前面有用到）
OpenCLI：
- 不模擬登入
- 不存 cookie
- 不重建 session
👉 直接用你 Chrome 裡的登入狀態
🔥 這代表什麼？
你可以：
- 操作 Gmail
- 操作 FB / IG
- 操作內部系統（SSO）
👉 完全不像傳統爬蟲
🔥 3. 控制本地工具（Cursor / VSCode）
👉 這才是 AI Agent 真正關鍵
OpenCLI 可以：
👉 等於：
AI 可以「真的幫你寫程式」
🧪 真實應用場景
📌 1. 自動收集資訊
👉 每天做：
📌 2. 自動寫程式
👉 例如：
opencli cursor send "建立 flask API"
📌 3. 自動操作後台
👉 例如：
- WordPress 發文
- Cloud Console 操作
- CRM 系統
📌 4. 自動化工作流
👉 一句話：
👉「抓資料 → 分析 → 寫報告 → 存檔」
📱 延伸：手機 + Termux + OpenCLI
Termux + Android 手機也可以跑：
👉 搭配：
可以做到：
⚠️ 注意事項
🔒 安全性
因為它可以：
👉 建議：
⚙️ 穩定性
- CDP port 被占用會失敗
- Cursor 視窗關閉會斷線
- Plugin YAML 要寫正確
🎯 總結
OpenCLI 的本質不是工具，而是：👉 AI 的「手」
👉 AI 操作你電腦的入口
它讓你可以：
- 🧠 用 AI 控制瀏覽器
- 💻 用 AI 操作 IDE（Cursor）
- 🔗 串接任何資料來源（Plugin）
🧠 AI 能力分層
| 層級 | 能力 |
|---|
| LLM | 思考 |
| LangChain | 決策 |
| OpenCLI | 行動 |
👉 沒有 OpenCLI：
👉 AI 只能「講」
👉 有 OpenCLI：
👉 AI 才能「做」
參考資訊
https://opencli.info/docs
by rainchu | 12 月 16, 2025 | AI, 程式開發
最新推出的 Cursor 2.2，不僅加入了備受期待的 視覺化編輯器（Visual Editor），更讓 Agent 能夠直接使用瀏覽器進行除錯，大幅提升前端與全端開發的效率與準確度。
這次更新不只是功能疊加，而是從「Agent 如何理解你的專案」出發，重新設計了日誌處理、視覺回饋與開發環境感知能力，讓 AI 不再只是聊天式輔助，而是真正融入你的開發流程。
視覺化編輯器：讓 Agent「看得見」你的畫面
過去，AI 在除錯前端問題時，往往只能依賴文字描述或程式碼推測 UI 狀態；在 Cursor 2.2 中，這個限制被徹底打破。
以圖片提供視覺回饋
Cursor 2.2 將 瀏覽器螢幕截圖 直接整合進檔案讀取工具中，Agent 能夠「實際看到」當前的瀏覽器狀態，而不是依靠抽象的文字敘述。
這項能力帶來的好處包括：
- 更精準理解版面配置與 UI 元件位置
- 更容易發現 CSS、RWD、遮擋或互動錯誤
- 大幅降低人為描述與 AI 理解之間的落差
對前端工程師而言，這代表 UI 除錯不再是猜測，而是視覺對齊。
高效的日誌處理：Token 使用量大幅下降
在大型專案中，瀏覽器日誌往往又多又雜，過去 AI 必須讀取並總結大量輸出，既耗時又耗 token。
瀏覽器日誌寫入檔案，Agent 精準讀取
Cursor 2.2 將瀏覽器日誌直接寫入檔案，Agent 可以：
- 使用
grep 搜尋特定錯誤或關鍵字
- 只讀取「需要的行數」，而非整段輸出
- 在保留完整上下文的同時，將 token 使用量降到最低
這讓 Agent 的行為更像一位資深工程師，而不是一次看完所有 log 的新手。
智慧提示：更聰明地理解日誌內容
除了能選擇性讀取，Cursor 2.2 還進一步強化 Agent 的判斷能力。
額外上下文資訊輔助決策
Agent 在讀取日誌前，會先取得：
這讓 Agent 能夠更聰明地決定：
- 是否需要深入檢查
- 應該查看哪一段
- 哪些資訊其實可以忽略
結果就是：更少無意義讀取，更快定位問題。
開發伺服器感知能力：避免重複啟動與連接錯誤
在本地開發時，最常見的問題之一就是：
「伺服器其實已經在跑，但工具又幫你開了一個新的。」
Cursor 2.2 對此給出了解法。
自動偵測正在執行的開發伺服器
Agent 會被提示去偵測目前系統中：
因此它能：
- 直接連線到正確的服務
- 避免啟動重複的伺服器
- 不再「猜測」port
這對使用 Vite、Next.js、React、Vue 或後端 API 專案的開發者來說，體驗提升非常明顯。
為什麼 Cursor 2.2 是 Vibe Coding 的關鍵里程碑？
Cursor 2.2 的核心價值不只是「功能更多」，而是：
- Agent 能 看懂畫面
- Agent 能 精準讀 log
- Agent 能 理解你的開發環境
- Agent 更像一位真正參與專案的工程夥伴
你只要專注在設計與邏輯，AI 負責觀察、分析與除錯。
如果你正在尋找一個能真正提升開發節奏的 AI 編輯器，Cursor 2.2 絕對值得親自體驗。
👉 官方網站：https://cursor.com/zh-Hant/home
👉 功能說明：https://cursor.com/zh-Hant/docs/agent/browser#browser
近期留言