by Rain Chu 6 月 18, 2026 | AI , skills
要用在 WordPress 的細節是這樣：
UIUX Pro Max 不是在 WordPress 後台裡用，也不是在 Elementor 裡直接用語音說話。
官方 README 也寫得很清楚：CLI 安裝方式是先 npm install -g uipro-cli，再 cd /path/to/your/project，然後執行 uipro init --ai claude、uipro init --ai cursor、uipro init --ai codex 等指令。使用時則是「自然聊天」提出 UI/UX 任務，或用 /ui-ux-pro-max slash command 觸發。
1. 要放在 WordPress 根目錄下嗎？
如果你是要它幫你「改 WordPress 主題、外掛、樣式檔、PHP template」，那建議放在 WordPress 專案根目錄。
例如你的 WordPress 專案是：
/var/www/html/my-wordpress-site 或 Windows 本機：
C:\Users\Rain\Projects\my-wordpress-site 那你就進到這個資料夾：
cd /var/www/html/my-wordpress-site 或：
cd C:\Users\Rain\Projects\my-wordpress-site 然後執行：
或：
這樣 AI 工具比較容易讀到你的 WordPress 結構，例如：
wp-content/themes/plugins/uploads/ 2. 如果只是用 Elementor？
如果你只是想讓它幫你規劃 Elementor 頁面，例如：
首頁區塊怎麼排
Hero 文案怎麼寫
CTA 怎麼放
色彩與字體怎麼設定
手機版怎麼調
WooCommerce 商品頁怎麼規劃
可以在任何 AI 工具裡直接問：
請使用 UIUX Pro Max 的思維，幫我規劃一個 WordPress + Elementor 首頁。網站類型：顧問公司目標客戶：中小企業老闆風格：專業、可信任、不要太花請輸出：1. Elementor 區塊架構2. 每個 Section 的標題與文案3. Container / Column 建議4. Global Colors5. Global Fonts6. 手機版設定 然後你再手動把結果做到 Elementor 裡。
這種方式不需要碰 WordPress 根目錄，因為它只是給你「設計規劃」。
3. 什麼情況一定建議在 WordPress 根目錄下？
當你要 AI 直接幫你看檔案、改檔案、產生程式碼時，就建議在 WordPress 根目錄。
例如你要它做這些事：
請幫我檢查目前 WordPress 主題的首頁 template，並重新設計 Hero 區塊。 請幫我修改 wp-content/themes/my-theme/front-page.php，讓首頁更像專業 SaaS Landing Page。 請幫我建立一個 WordPress 外掛設定頁，風格要乾淨、專業、適合老師使用。 請幫我新增一個 Elementor 可以貼上的 HTML 區塊，並附 CSS。 這種情況 AI 需要讀你的專案檔案，所以最好在 WordPress 專案根目錄執行。
4. 在哪裡「用說的」？
不是在 WordPress 後台說。
是在這些地方用文字說：
A. Claude Code
如果你用 Claude Code，可以在專案目錄下開啟 Claude Code，然後直接輸入：
請使用 UIUX Pro Max，幫我優化這個 WordPress 網站首頁的 UI/UX。請先讀取目前主題結構，不要直接改檔案，先提出規劃。 如果是 slash command 模式，則可以用：
/ui-ux-pro-max 請幫我設計 WordPress + Elementor 首頁架構 官方文件也提到，Skill Mode 可以自然語言觸發，Workflow Mode 則可以使用 /ui-ux-pro-max 指令。
B. Cursor
如果你用 Cursor：
用 Cursor 開啟 WordPress 專案資料夾
安裝 UIUX Pro Max：
npm install -g uipro-cliuipro init --ai cursor
在 Cursor Chat 裡輸入：
請使用 UIUX Pro Max 的 UI/UX 規則，幫我分析這個 WordPress 網站。目標是把首頁改成專業的 B2B SaaS Landing Page。請先不要修改檔案，先列出設計系統、區塊架構與需要改的檔案。 C. Codex CLI / Gemini CLI / Windsurf
邏輯一樣，先在專案資料夾安裝：
或：
然後在該工具的聊天或 CLI 裡下指令。
5. WordPress + Elementor 最實際流程
如果你是一般 WordPress 使用者，我會建議你不要一開始就讓 AI 改檔案，而是先用這個流程：
UIUX Pro Max 產生設計規劃↓你在 Elementor 設定 Global Colors / Fonts↓依照 Section 一段一段建立頁面↓再請 AI 幫你檢查手機版、轉換率、可讀性 實際操作如下。
第一步：先問它設計系統
請使用 UIUX Pro Max，幫我建立 WordPress + Elementor 網站的設計系統。網站類型：AI 批改工具目標使用者：國中小老師品牌感覺：乾淨、專業、低壓力、不要像兒童玩具主色：白色、深灰，主要 CTA 使用 Shane Red請輸出：1. Global Colors2. Global Fonts3. H1/H2/H3/Body 字級4. Button 樣式5. Card 樣式6. Section 上下間距7. 手機版斷點建議 第二步：請它產生 Elementor 區塊
請依照剛剛的設計系統，幫我規劃 Elementor 首頁。請輸出：1. Section 名稱2. 每個 Section 的目的3. Container / Column 結構4. 標題文案5. 按鈕文案6. 圖片或 Icon 建議7. 手機版排列方式 第三步：手動做到 Elementor
到 WordPress 後台：
WordPress 後台→ 頁面→ 新增頁面 / 編輯首頁→ 使用 Elementor 編輯 然後照 AI 給你的 Section 一段一段做。
第四步：請它檢查 Elementor 設計
你可以截圖，或把頁面區塊描述貼回去問：
請用 UIUX Pro Max 的角度，檢查這個 Elementor 首頁。請特別看：1. 首屏是否清楚2. CTA 是否明顯3. 文字是否太多4. 手機版是否容易讀5. 有沒有不一致的間距或字級6. 如何提高轉換率 6. 如果要改 WordPress 主題，流程是另一種
假設你有一個自製主題：
wp-content/themes/my-theme/ 你可以在 WordPress 根目錄下開 AI 工具，然後問：
請使用 UIUX Pro Max 分析這個 WordPress 主題。目標：把首頁 front-page.php 改成專業 Landing Page。限制：1. 不要改後台功能2. 不要破壞現有 header.php 和 footer.php3. 優先修改 front-page.php 和 style.css4. 請先列出修改計畫，不要直接改檔案 等它列出計畫後，再說：
可以，請開始修改 front-page.php 和 style.css。 這種才是「在 WordPress 根目錄下用」。
7. Elementor 使用者的重點結論
你可以這樣理解：
只做 Elementor 頁面規劃：不用一定在 WordPress 根目錄。在 Claude / Cursor / ChatGPT 裡問都可以。要 AI 讀取或修改 WordPress 檔案：建議在 WordPress 根目錄。要做外掛、主題、template、CSS：一定建議在 WordPress 專案根目錄。要做文章、頁面文案、區塊設計：不需要根目錄，直接用文字問即可。 8. 最推薦的用法
要寫 WordPress 文章、又想說明 Elementor 使用場景，我建議寫成這樣：
UIUX Pro Max 並不是直接在 WordPress 後台安裝後就會自動產生頁面的外掛，而是搭配 Claude Code、Cursor、Codex CLI、Windsurf 等 AI 工具使用的 UI/UX Skill。
最簡單一句話：Elementor 規劃不用放根目錄；要改 WordPress 程式碼，就放在 WordPress 根目錄。
by Rain Chu 6 月 18, 2026 | AI , skills
在網站製作的世界裡，最痛苦的往往不是「會不會架 WordPress」，而是「怎麼把網站做得像專業品牌」。
很多人可以安裝主題、套版、放圖片、改文字，但真正卡住的地方通常是：
版面不夠高級、配色不協調、按鈕不知道放哪裡、手機版跑版、Landing Page 沒有轉換力、Dashboard 看起來不像專業產品。
這時候，UIUX Pro Max Skill 就像是一位專門站在你旁邊的前端與 UI/UX 顧問。你不需要一開始就懂設計系統、字體比例、色彩心理學、Tailwind、React、Next.js 或 shadcn/ui，只要用自然語言描述你想要的網站，它就能協助 AI Coding Assistant 產生更像專業前端設計師規劃出來的介面。
官方網站：https://ui-ux-pro-max-skill.nextlevelbuilder.io/
GitHub 專案：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
下載與安裝：https://github.com/nextlevelbuilder/ui-ux-pro-max-skill/releases
UIUX Pro Max 是什麼？
UIUX Pro Max，全名通常會看到 ui-ux-pro-max-skill ，是一個提供 AI 助手使用的 UI/UX 設計技能包。它的核心概念很簡單：
讓 AI 不只是「會寫前端程式」，而是更懂「什麼樣的前端才像專業產品」。
一般 AI 寫前端時，很容易產生一種常見問題：功能有了，但畫面普通；元件有了，但缺乏層次；版面能跑，但沒有品牌感。
UIUX Pro Max 則補上這塊空白。它把 UI 風格、色票、字體搭配、圖表類型、UX 規則、設計系統與不同技術框架的實作建議整理成一套可被 AI 助手調用的知識庫。
你可以把它想像成：
給 Claude Code、Cursor、Codex CLI、Windsurf 等工具使用的 UI/UX 專家包
給前端開發者使用的設計系統產生器
給不懂設計的創業者、站長、行銷人員使用的網站美感加速器
給 WordPress 專案使用的外觀與互動規劃參考工具
它不是單純的 WordPress 外掛，而是可以協助你在製作 WordPress 網站、Landing Page、SaaS 後台、會員系統、形象網站或行銷頁時，快速產生更專業的前端設計方向。
特色
1. 用自然語言產生 UI/UX 設計方向
你不需要一開始就寫完整規格，只要描述你的需求，例如：
「幫我設計一個牙醫診所形象網站，要乾淨、可信任、有預約按鈕。」
「我要一個 WordPress 課程銷售頁，風格要像高級教育平台。」
「幫我做一個 SaaS 後台 Dashboard，要有現代感、卡片式資料區塊、RWD。」
AI 搭配 UIUX Pro Max 後，就能更有方向地產生版面、色彩、字體、元件與視覺層次。
2. 自動生成設計系統
UIUX Pro Max 的重點之一，是能依據專案需求產生設計系統。
這對 WordPress 網站很重要，因為很多網站最後看起來不專業，不是因為圖片不夠漂亮，而是缺乏一致性。
設計系統可以包含：
主色與輔色
字體搭配
標題大小
內文行距
按鈕樣式
卡片樣式
表單樣式
間距規則
RWD 斷點
常用元件規範
如果你是用 WordPress + Elementor、Bricks、Block Editor、GeneratePress、Astra 或自製主題，這些設計系統都可以成為你調整網站外觀時的重要依據。
3. 適合 WordPress 外掛與主題開發
雖然 UIUX Pro Max 不是傳統意義上的 WordPress 外掛，但它非常適合拿來輔助 WordPress 開發。
例如你正在開發：
WordPress 企業形象網站
WooCommerce 商品頁
線上課程銷售頁
會員中心
後台管理介面
預約系統
AI 工具網站
部落格首頁
Landing Page
WordPress 外掛設定頁
你可以請 AI 搭配 UIUX Pro Max 先產生 UI 規劃，再把設計轉換成 HTML、Tailwind、React、Next.js、PHP Blade、甚至 WordPress 區塊設計邏輯。
4. 支援多種前端技術棧
UIUX Pro Max 不只適合單一框架，它的 GitHub README 中列出多種支援方向，包括 HTML + Tailwind、React、Next.js、shadcn/ui、Vue、Nuxt、Angular、Svelte、Astro、SwiftUI、Jetpack Compose、React Native、Flutter 等。
對 WordPress 使用者來說，最實用的組合通常會是：
HTML + Tailwind
React
Next.js
shadcn/ui
PHP / Laravel Blade 概念
WordPress 區塊與前端樣式規劃
如果你的 WordPress 網站有自製外掛、客製後台、Headless WordPress 或 Next.js 前台，UIUX Pro Max 會更有幫助。
5. 做出不「凡」的網站
多數人不是專業設計師，也不是全職前端工程師。
你可能是創業者、老師、站長、接案者、行銷人、公司內部資訊人員，甚至只是想把自己的 WordPress 網站改得更好看。
UIUX Pro Max 的價值在於：它把許多專業設計師腦中的判斷，變成 AI 可以引用的規則與資料庫。你不必從零開始學完 UI/UX，也能讓 AI 提供更接近專業前端顧問的建議。
關鍵指令
以下是常用指令，可以依照你的 AI 工具環境選擇。
Claude Code Marketplace 安裝方式
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill CLI 安裝方式
npm install -g uipro-cli
cd /path/to/your/project
uipro init --ai claude 安裝到其他 AI 助手
uipro init --ai cursor
uipro init --ai windsurf
uipro init --ai copilot
uipro init --ai codex
uipro init --ai gemini
uipro init --ai opencode
uipro init --ai all 全域安裝
uipro init --ai claude --global
uipro init --ai cursor --global 更新與移除
uipro versions
uipro update
uipro uninstall 使用範例
Build a landing page for my SaaS product Create a dashboard for healthcare analytics Design a portfolio website with dark mode Make a mobile app UI for e-commerce Build a fintech banking app with dark theme 直接呼叫 Skill
/ui-ux-pro-max Build a landing page for my SaaS product 使用流程圖
WordPress 使用情境範例
情境一：幫企業形象網站重新設計首頁
你可以這樣下指令：
請幫我重新設計一個 WordPress 企業形象網站首頁。
產業是 B2B 軟體服務，目標客戶是中小企業老闆。
風格要專業、可信任、不要太科技黑。
請提供首頁區塊架構、主色、字體、CTA 按鈕、RWD 注意事項。 AI 搭配 UIUX Pro Max 後，會比較容易產生完整的首頁架構，例如 Hero、痛點、服務特色、案例、流程、FAQ、CTA 等，而不是只給你一個普通的套版。
情境二：幫 WooCommerce 商品頁提高轉換率
請幫我優化 WooCommerce 商品頁 UI/UX。
商品是高單價健康設備。
目標是增加詢問與預約體驗。
請設計商品頁資訊層級、信任元素、CTA 區塊與手機版版面。 這類任務不只是美化，而是結合轉換率、資訊層級與使用者行為。UIUX Pro Max 很適合用在這種「不只要好看，也要有效」的頁面。
情境三：設計 WordPress 外掛設定頁
請幫我設計一個 WordPress 外掛設定頁。
外掛功能是 AI 自動批改作業。
需要包含 API Key 設定、模型選擇、批改規則、通知設定與儲存按鈕。
請提供乾淨、專業、適合老師使用的 UI。 如果你正在開發 WordPress 外掛，後台設定頁常常會被忽略，但它其實非常影響使用體驗。UIUX Pro Max 可以協助你把設定頁做得更清楚、有層次，也更接近 SaaS 產品的質感。
為什麼推薦 UIUX Pro Max？
1. 降低設計門檻
不是每個人都請得起專業 UI 設計師，也不是每個專案都有時間走完整設計流程。UIUX Pro Max 可以讓 AI 幫你補上第一版設計判斷。
2. 節省溝通成本
過去做網站常常要反覆跟設計師或前端工程師溝通：「再高級一點」、「不要那麼像模板」、「手機版怪怪的」。現在你可以直接把品牌、情境、目標客戶、色調偏好告訴 AI，讓它先產出一版更接近方向的方案。
3. 適合快速做 MVP
如果你正在做新產品、SaaS、AI 工具、課程平台、會員網站或接案展示頁，UIUX Pro Max 很適合用來快速產生第一版專業視覺。
4. 可延伸到實際程式碼
它不是只能給概念，也能配合 AI Coding Assistant 產生前端程式碼、元件設計與樣式規則。對工程師來說，這比單純看設計靈感網站更直接。
使用時要注意什麼？
1. 它不是魔法，仍然需要你提供明確需求
你給的需求越清楚，產出的設計越準。
建議至少提供：
產業類型
目標客戶
網站目的
喜歡或不喜歡的風格
是否要深色模式
是否需要手機優先
使用的技術棧
是否要套用到 WordPress
是否偏向銷售、品牌、教學或後台管理
2. 不要只說「幫我做漂亮一點」
比較好的說法是：
請幫我把這個 WordPress 首頁改成更像 B2B SaaS 的專業風格。
目標客戶是企業主管。
請避免卡通感與過度漸層。
主色希望是深藍與白色，CTA 使用亮色。
請提供 Hero、功能、案例、價格與 FAQ 區塊。 這樣 AI 才會知道「漂亮」的方向是什麼。
3. 最後仍要人工檢查
AI 產出的設計很適合當第一版，但正式上線前仍然建議檢查：
手機版是否正常
文字是否符合品牌語氣
色彩對比是否足夠
按鈕是否明顯
表單是否容易填寫
SEO 標題是否正確
WordPress 主題是否相容
外掛是否造成樣式衝突
by Rain Chu 6 月 14, 2026 | Agent , AI , Hermes , OpenClaw , Prompt
當我們開始用 AI 寫網站、做 Landing Page、產生前端介面時，常常會遇到一個問題
畫面看起來很快就完成了，但總覺得「哪裡怪怪的」。
按鈕很像、卡片很多、漸層很浮誇、字級沒有層次、留白不夠精準，甚至每個 AI 產生的網站都像是同一套模板改出來的。這種「可以用，但不高級」的設計感，就是許多 AI 前端作品容易落入的平庸陷阱。
而 Impeccable 官方網站 想解決的，正是這個問題。
什麼是 Impeccable？
Impeccable 是一套專為 AI Coding Agent 設計的前端設計輔助工具，它不是單純幫你產生漂亮畫面的 AI 設計工具，而是提供一套「設計語彙」與「設計指令」，讓你可以更精準地指揮 AI 改善網站畫面。
簡單說，Impeccable 讓 AI 不只是會寫程式，也更懂設計。
它可以協助 AI 理解網站中的層級、對比、留白、色彩、字體、動畫、產品脈絡與品牌調性，讓 AI 產生的前端畫面不再只是堆滿卡片、套上漸層、加一點陰影，而是更接近真正設計師會思考的介面。
你可以把 Impeccable 想像成：
一套給 AI 前端工程師使用的設計總監指令集。
為什麼 AI 做出來的網站常常很平庸？
現在很多人會用 AI 幫忙做網站，例如請 Claude Code、Cursor、Codex CLI 或 Gemini CLI 產生頁面。AI 很擅長快速完成版型，但如果沒有足夠清楚的設計方向，它很容易產生幾種常見問題：
每個區塊都用卡片包起來，看起來很模板化
喜歡使用過度常見的紫色漸層、玻璃擬態、發光陰影
字體大小與層級不夠精準，主標、副標、內文沒有明確節奏
留白太平均，缺乏視覺重點
按鈕、表單、導覽列看起來功能正確，但沒有品牌感
Landing Page 和後台 Dashboard 使用同一種設計邏輯
作品看起來像 AI 產物，而不是成熟產品
Impeccable 的價值就在於，它不是只叫 AI「設計得漂亮一點」，而是提供更具體的設計方向，例如讓畫面更有層次、更安靜、更大膽、更精煉、更符合產品情境。
Impeccable 的核心特色
1. 提供 AI 可理解的設計語言
Impeccable 的官方介紹中提到，它補上了 AI Agent 缺少的設計語彙，這代表你可以用更接近設計師的方式指揮 AI，例如改善排版、調整顏色、強化視覺層次、降低過度設計、整理產品脈絡。
這對不熟設計術語的人很有幫助，因為你不需要長篇大論解釋「我要更高級、更有質感、更像品牌網站」，而是可以透過 Impeccable 的指令，把設計意圖轉成 AI 比較能執行的動作。
2. 支援多種 AI Coding 工具
Impeccable 可以搭配多種主流 AI Coding 工具使用，例如 Cursor、Claude Code、GitHub Copilot、Gemini CLI、Codex CLI 等。
這代表它不是只服務單一平台，而是比較像一套可以帶進不同開發流程的設計輔助層。對於已經習慣用 AI 寫前端的開發者來說，Impeccable 可以直接加入現有工作流程，不需要重新學一套完整設計軟體。
3. 透過指令改善網站設計
Impeccable 提供多個設計指令，讓你可以針對不同設計任務下達命令。例如：
/impeccable init
/impeccable shape
/impeccable critique
/impeccable audit
/impeccable polish
/impeccable bolder
/impeccable quieter
/impeccable distill
這些指令的好處是，你可以更像在跟設計師溝通，而不是一直對 AI 說：「再漂亮一點」、「再高級一點」、「不要這麼普通」。
4. 幫你減少 AI 生成網站的套路感
很多 AI 產生的網站會有明顯套路，例如紫色漸層、大量圓角卡片、發光邊框、過度一致的版面節奏。Impeccable 內建反套路的設計檢查，可以幫助你找出這些容易讓網站看起來廉價、模板化或過度 AI 感的元素。
這對品牌網站、形象頁、SaaS Landing Page、產品頁、作品集網站尤其重要。因為這些頁面的重點不只是功能完成，而是要讓使用者在第一眼感覺到專業、信任與差異化。
5. 保留你的設計系統，不是硬套新風格
Impeccable 的另一個優點是，它不是粗暴地把你的網站改成另一種風格，而是會盡量尊重既有的設計系統，例如顏色、字體、元件、間距、按鈕樣式與品牌規則。
這對已經有產品雛形或既有網站的人很重要。你不一定想要整個重做，而是希望 AI 幫你把現有介面整理得更成熟、更一致、更像一個真正的產品。
Impeccable 適合誰使用？
Impeccable 特別適合以下幾種人：
1. 用 AI 寫前端的開發者
如果你常用 Cursor、Claude Code、Codex CLI、GitHub Copilot 來產生 React、Next.js、Astro、Tailwind CSS 或其他前端頁面，Impeccable 可以幫你補上 AI 在設計判斷上的不足。
2. 想快速做出高質感 Landing Page 的創業者
很多創業者會用 AI 快速做 MVP，但 Landing Page 如果太普通，會影響使用者信任感，Impeccable 可以幫助你把「能用的頁面」推進到「比較有品牌感的頁面」。
3. 會寫程式但不擅長設計的人
你可能知道功能怎麼做，但不知道為什麼畫面不夠好看。Impeccable 可以用指令化的方式協助你檢查排版、層級、色彩與互動細節。
4. 想降低 AI 生成感的網站製作者
如果你的網站看起來太像 AI 產物，Impeccable 可以幫你找出常見的 AI 設計套路，讓畫面更有辨識度。
如何安裝 Impeccable？
你可以到 GitHub 下載與查看 Impeccable 專案：
Impeccable GitHub 下載頁
官方建議可以在專案根目錄執行：
npx impeccable skills install
接著在你的 AI Coding 工具中執行：
如果之後要更新，可以執行：
npx impeccable skills update
官方網站也提供更多說明與範例：
Impeccable 官方網站
使用 Impeccable 的工作流程建議
如果你正在做一個網站或前端產品，可以用以下流程開始：
第一步，先用 AI 產生基本頁面結構。
第二步，執行 /impeccable init。
第三步，用 /impeccable shape 先整理畫面架構。
第四步，用 /impeccable critique 檢查設計問題。
第五步，用 /impeccable polish 做上線前修飾。
第六步，必要時使用 /impeccable audit。
對 WordPress 網站製作者有什麼幫助？
雖然 Impeccable 本身比較偏向 AI Coding Agent 與前端開發流程，但對 WordPress 網站製作者也很有參考價值。
如果你使用 WordPress 搭配自訂佈景主題、區塊編輯器、Elementor、Bricks、Breakdance 或自製前端元件，你可以先在本機或開發環境中，用 AI 建立前端區塊，再透過 Impeccable 改善設計品質。
例如：
首頁 Hero 區塊不夠有記憶點
服務介紹區塊太像模板
價格表太普通
Call to Action 不夠明確
部落格列表頁缺乏層次
後台管理介面太陽春
品牌網站缺乏高級感
這些都可以透過 Impeccable 的設計指令進行調整，再整合回 WordPress 佈景主題或頁面模板中。
結論：Impeccable 讓 AI 網站設計從「能用」走向「有質感」
AI 讓網站製作變快，但速度不代表品質。真正影響使用者感受的，往往是那些細節：字體層級、留白、對比、色彩、互動節奏、品牌一致性，以及畫面是否有明確的設計意圖。
Impeccable 的重點不是取代設計師，而是讓 AI 更容易理解設計師的語言，也讓開發者可以用更精準的方式指揮 AI 做出不平庸的網站。
如果你正在用 AI 製作網站，卻覺得畫面總是差一點質感，那麼 Impeccable 很值得加入你的前端工作流程。
官方網站：https://impeccable.style/
GitHub 下載：https://github.com/pbakaus/impeccable
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
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
👉 你可以做到：
抓網站資料
做 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
背後：
🔥 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
VIDEO
近期留言