by Rain Chu 8 月 29, 2026 | AI , claude , codex , OpenAI , 圖型處理 , 影片製作 , 繪圖
AI 做動畫已經不只是叫模型生一段畫面。更實用的方向，是把動畫規則、鏡頭語言、渲染流程和品質檢查包成 Skill，讓 Codex、Claude Code 或其他 coding agent 知道該怎麼完成一支片。
這次整理的七個 AI 動畫 Skills，剛好涵蓋七種常見需求，從網頁動效、Logo 開場、數據動畫，到產品廣告、手繪故事和動態設計原則都有。它們不是同一類工具，也不需要全部安裝。先看自己要做什麼，再選對 Skill，會比堆一大包能力有效得多。
先講結論，短片該選哪一個
如果目標是快速做社群短片，我會先選 HyperFrames，它讓 Agent 用 HTML、CSS 和 JavaScript 描述畫面，再輸出成影片，對 Codex 很直覺，若內容以數字、圖表或年度回顧為主，Remotion 會更適合。產品網站想做成有電影感的廣告，可以直接看 video-shotcraft。
Logo 動畫 選 Pixel2Motion，中文故事轉手繪 日記選 story-to-handdrawn-video。GSAP AI Skills 負責把網頁互動 做得更有彈性和節奏，LottieFiles motion-design-skill 則像一位動態設計導演 ，幫 Agent 先把時機、緩動和編排想清楚。
Skill 最適合的任務 主要輸出 我會怎麼選 HyperFrames 網頁式動畫、短影音、產品解說 HTML 影片工程 想用 Codex 快速做片先選它 GSAP AI Skills 網頁互動、滾動動畫、UI 動效 可執行的前端動畫 網站看起來太硬時使用 Pixel2Motion Logo reveal、品牌開場 SVG、HTML、GIF 或影片預覽 手上只有點陣 Logo 時使用 Remotion Agent Skills 數據、圖表、字幕、批次影片 React 影片工程 需要精準時間軸與可重複生成時使用 video-shotcraft 產品宣傳片、網站功能廣告 電影感 Remotion 成片 有真實產品畫面時最有價值 story-to-handdrawn-video 中文故事、手繪日記動畫 直式手繪無聲影片 敘事型短片可以直接套流程 motion-design-skill 節奏、緩動、動態設計審查 設計規則與改進建議 搭配其他 Skill 一起用
Skill 和動畫工具有什麼不同
GSAP、Remotion 和 HyperFrames 是能真正執行動畫或渲染影片的工具，Skill 則是給 AI Agent 的工作說明，裡面會放最佳做法、檔案結構、動效規則、操作命令、常見失敗和驗收方式，它不會讓模型突然變成動畫師，但可以減少 Agent 亂猜 API、亂排時間軸和做出模板感畫面的機會。
如果你還不熟悉這種能力包，可以先看我整理的自訂 Skill 完整教學 ，它的重點不是多一個聊天指令，而是把可重複的製作方法交給 Agent。
1. HyperFrames，把網頁變成可渲染的影片
HeyGen HyperFrames 的核心很簡單，先用 HTML 寫畫面，再把瀏覽器中的動畫確定性地渲染成影片，Agent 可以處理分鏡、CSS、GSAP、素材、字幕、音訊和輸出，因此很適合做產品解說、社群短片、動態圖表與網站展示。
它和傳統剪輯軟體的差別，是畫面本身可以被程式控制，只要資料結構固定，同一套模板就能換內容重新輸出，想深入理解它的架構，可以接著看HyperFrames 用 HTML 寫影片 。
npx hyperframes init my-video --example blank
cd my-video
npx hyperframes preview
npx hyperframes render2. GSAP AI Skills，讓網頁動效不再只是淡入淡出
GSAP AI Skills 是官方提供給 coding agent 的動畫知識包，涵蓋核心時間軸、Tween、ScrollTrigger、Flip、MorphSVG 和常見清理方式。它適合處理會浮、會彈、會跟著捲動改變的網站互動。
GSAP 的價值不是特效多，而是時間軸和控制能力成熟。Agent 知道怎麼設定 easing、stagger、觸發條件和資源清理後，做出來的動畫會比隨手拼 CSS transition 穩定很多。
npx skills add greensock/gsap-skills3. Pixel2Motion，一張 Logo 變成品牌動態開場
Pixel2Motion 會先把 PNG、JPG 或截圖中的 Logo 重建成平滑 SVG，再設計 motion、logo reveal 和 HTML 動態展示，它不是單純把圖片放大縮小，而是先處理向量結構，再對圖形部件安排動作。
這個流程很適合品牌開場、App 啟動畫面和社群短片片頭，官方專案也加入幾何比對、動作幀截圖和最終畫面檢查，讓 Agent 不只產出會動的檔案，也留下可審查的證據。
npx skills add nolangz/pixel2motion4. Remotion Agent Skills，用 React 做精準影片
Remotion Agent Skills 把 Remotion 的動畫、字幕、音訊、3D、圖表、渲染與元件設計規則交給 Agent。Remotion 本身以 React 組成影片，每一幀都能由程式和資料決定，因此很適合年度回顧、排行榜、圖表動畫、批次內容和字幕短片。
它的學習成本比單純 HTML 高，但大型專案會更好維護。之前整理的Codex 動態圖表和短影片工作流 ，就很適合拿 Remotion 處理需要精準幀數與資料驅動的部分。
npx skills add remotion-dev/skills
npx create-video@latest5. video-shotcraft，把產品畫面剪成電影感廣告
video-shotcraft 是一套以 Remotion 為基礎的產品影片製作 Skill。它提供超過一百張鏡頭配方卡、可預覽的動作樣式、2.5D 運鏡、節奏卡點、音效和可直接替換內容的完整模板。
最實際的用法，是把網站或桌面產品的真實畫面交給 Agent，再指定想使用的鏡頭卡。它會處理素材採集、分鏡、運鏡、轉場、聲音和品質檢查。相比只生成幾張氣氛圖，這條路更能把真正的產品功能講清楚。
npx skills add Vincentwei1021/video-shotcraft6. story-to-handdrawn-video，中文故事轉手繪日記動畫
story-to-handdrawn-video 能把中文故事或排序好的圖片，轉成直式手繪日記動畫，它會安排手寫文字、黑白線稿、彩色插圖與翻頁轉場，輸出可再加入旁白的 H.264 畫面。
這個 Skill 適合個人故事、知識小品、品牌創辦歷程和情緒型內容。它的風格很明確，不適合硬套在科技產品展示，但用在敘事題材時能快速建立一致的視覺語言。
git clone https://github.com/gnipbao/story-to-handdrawn-video.git
cd story-to-handdrawn-video
npm install7. motion-design-skill，先教 Agent 什麼叫手感
LottieFiles motion-design-skill 不綁定特定動畫框架。它教的是 timing、easing、choreography、情緒意圖和改寫成 UI 動效的經典動畫原則。CSS、GSAP、Framer Motion、Lottie 都能使用這套思考方式。
很多 AI 動畫技術上能跑，卻沒有重量、停頓和節奏，原因通常不是少一個套件，而是 Agent 沒先決定動作要傳達什麼。這個 Skill 最適合當成第二層能力，搭配 HyperFrames、GSAP 或 Remotion 一起使用。
npx skills add LottieFiles/motion-design-skill可以直接貼給 Codex 的繁體中文提示詞
不要只寫「幫我做一支動畫」。先把目的、尺寸、時長、素材、節奏和驗收條件講清楚。下面這份可以直接改主題使用。
請使用適合的動畫 Skill，製作一支 15 秒直式短片，比例 9:16。
目的
用最短時間介紹我的產品如何把文字整理成可搜尋的知識庫。
素材
使用專案中的真實產品截圖與品牌色，不要使用無關的 AI 圖片。
結構
0 到 3 秒呈現使用者找不到資料的痛點
3 到 8 秒展示匯入、整理與搜尋流程
8 到 12 秒用數字動畫顯示節省的時間
12 到 15 秒顯示產品名稱與行動文字
動效
畫面轉場要乾淨
數字使用平滑遞增
卡片進場要有重量感與短暫停頓
不要讓所有元素同時移動
限制
不要藍紫科技風
不要粒子背景
不要讓文字互相遮擋
不要使用未授權素材
驗收
先做 5 秒風格原型
確認手機畫面可讀後再完成全片
最後檢查每一幀是否有文字裁切、元素重疊和空白畫面我的建議組合
社群短片選 HyperFrames，加 motion-design-skill 控制節奏
網站互動選 GSAP AI Skills，加 motion-design-skill 做動態審查
數據影片選 Remotion Agent Skills
產品廣告選 video-shotcraft，再用真實頁面截圖
品牌片頭選 Pixel2Motion
故事內容選 story-to-handdrawn-video，再補旁白、字幕和音效
更完整的製作管線可以參考OpenMontage 本地 AI 影片工作流 。它把研究、腳本、素材、渲染和驗收串起來，而這七個 Skill 比較像其中的專業工位。先把一個工位用熟，再擴大成自動化流水線，成功率會高很多。
FAQ
完全不會寫程式也能用嗎？
可以從提示詞開始，但仍要看得懂 Agent 建立了哪些檔案、如何預覽和輸出。HyperFrames 與 video-shotcraft 對成品導向較友善，Remotion 更適合願意維護 React 專案的人。
只想做短片，最推薦哪一個 Skill？
一般社群短片先選 HyperFrames。數據類短片選 Remotion。產品宣傳片選 video-shotcraft。風格容易僵硬時，再加 motion-design-skill 幫 Agent 調整節奏。
安裝很多 Skill 會不會讓 Agent 更強？
不一定。能力太多會增加選擇和上下文成本。每次任務只啟用一個主要製作 Skill，再搭配一個設計或品質檢查 Skill，通常會比較穩定。
by Rain Chu 8 月 25, 2026 | 3D , AI , claude
用 Claude Code 或 Codex 產生 Remotion 專案並不難，真正困難的是讓動畫從「可以播放」進步到「看起來像專業設計」，只下一句提示詞，AI 通常能把元件放進時間軸，卻很難同時掌握分鏡、節奏、視覺層級、轉場與品牌質感。
比較可靠的方法，是先把 Remotion 的 Agent Skill 安裝到開發代理，接著把需求拆成分鏡、時間、版面與動態規則，先完成短片段，再逐幀檢查並反覆修正。本文會從安裝開始，整理一套 Claude Code 與 Codex 都能使用的流程，也會說明 GSAP、D3.js、Lottie、Three.js、Canvas 與 Blender 各自適合處理什麼工作。
Remotion 是什麼
Remotion 是一套以 React 撰寫影片的框架。畫面被拆成 Composition，每個 Composition 會定義尺寸、幀率與總幀數，元件再依目前幀數計算位置、透明度、縮放與其他狀態。最後可以在 Studio 預覽，也能透過命令列輸出影片。
這種逐幀且可重現的設計很適合 AI 代理。代理可以讀取程式碼、修改元件、調整時間點，再重新輸出指定幀進行比對。它也適合大量產生不同文案、數據或尺寸的影片，而不是每次都回到剪輯軟體手動修改。
為什麼一句提示詞通常做不好
空白專案只提供了一堆可以組合的零件，沒有現成的鏡頭語言、元件規則與品質標準，當需求只有「做一支有質感的 SaaS 動畫」，代理還要自行猜測品牌顏色、字級、轉場、每一幕的長度，以及什麼才算有質感，結果自然容易變成普通投影片。
沒有分鏡，所以所有資訊同時出現
沒有明確時間點，所以動畫速度忽快忽慢
沒有動態規則，所以每個元素使用不同節奏
沒有參考幀，所以代理只能猜測版面與層級
沒有驗收步驟，所以第一版直接被當成完成品
Agent Skill 的價值，就是先把 Remotion 的正確用法、常見陷阱與輸出流程交給代理，這和建立 Claude Code 自訂 Skill 的概念相同，先提供可重複使用的方法，再讓代理處理當次任務。
Claude Code 與 Codex 都能使用 Remotion Skill
Remotion 官方的 Agent Skills 文件 已列出 Claude Code 與 Codex 等開發代理。先確認電腦已安裝 Node.js，再建立空白專案並加入 Skill。
npx create-video@latest --yes --blank my-video
cd my-video
npm i
npx remotion skills add
npm run dev如果希望把官方 Skill 安裝成全域能力，可以執行下面的指令。
npx -y skills@latest add remotion-dev/skills -g -y官方能力不只包含基本規範，也有建立作品、字幕、地圖、SaaS 產品動畫、互動播放器、媒體處理、版本升級與輸出等分工
這表示 Codex 並不是只能修改既有 Remotion 程式，也能從規格開始建立專案並完成輸出。
可直接使用的繁體中文提示詞
提示詞不要只描述主題，也要同時定義格式、時間軸、視覺系統、動態語言與驗收方式．
下面這份範本可以直接貼給 Claude Code 或 Codex，再替換中括號內的內容。
請先讀取目前可用的 Remotion Skill 與專案規範，再建立一個可直接輸出的 Remotion Composition。
影片主題
[要傳達的產品或故事]
輸出格式
1920 x 1080
30 fps
總長 20 秒
Composition ID 使用 ProductLaunch
視覺方向
使用深灰、米白、青色與珊瑚紅
畫面安靜、精準、有產品發表會質感
禁止套用通用科技藍紫漸層
文字必須保留安全邊界並在手機縮圖中可讀
分鏡
0 到 3 秒顯示品牌名稱與一句核心價值
3 到 8 秒展示產品介面與主要操作
8 到 14 秒用三個步驟說明工作流程
14 到 18 秒顯示成果數據
18 到 20 秒收尾並顯示行動文字
動態規則
所有動畫都要由 useCurrentFrame、interpolate 或 spring 驅動
每次只讓一個主要資訊成為視覺焦點
入場使用淡入、位移與輕微縮放
不要使用無法由幀數重現的 CSS transition
不要使用 Math.random、目前日期或即時網路狀態
工作方式
先建立 5 秒的第一幕作為品質樣本
輸出第 0、30、60、90、120 與 149 幀供我檢查
確認沒有文字溢出、遮擋、跳動與空白畫面後，再完成全部分鏡
最後列出 Composition ID、預覽方式與輸出指令這個範本刻意要求先做 5 秒樣本。若第一幕的字體、間距與動態節奏不對，先修正視覺系統會比做完 20 秒後重來省下更多時間。
若想深入理解 Codex 產生動態內容的提示架構，可以延伸閱讀Codex 做動態圖表和短影片的工作流程 。
模仿參考動畫時要先拆解畫面
把整段參考素材轉成大量截圖，再一次交給代理，通常只能得到顏色和版面大致相近的結果。，集畫面缺少元素對應、時間關係與動態方向，代理不容易判斷一個物件是移動、被遮罩，還是切換成另一個元件。
每 0.5 到 1 秒擷取一張代表幀
標記每個鏡頭的開始時間與結束時間
列出背景、主體、文字、裝飾與遮罩等圖層
描述物件從哪裡進入、移動到哪裡、使用何種緩動
先重建最具代表性的 3 到 5 秒
輸出相同時間點的幀並排比較
軌跡動畫也可以用一張乾淨的路徑草圖輔助。把路徑、起點、終點與移動方向畫清楚，再要求代理將路徑轉成 SVG 或座標資料，通常比只用文字描述「繞一圈再飛出去」更準確。參考作品應作為鏡頭與節奏研究，不要直接複製商標、字體、插圖或其他受保護素材。
Remotion 與各種動畫工具怎麼選
工具 擅長內容 適合情境 Remotion 原生能力 React 元件、分鏡、字幕、影片組合 產品介紹、教學短片、批次影片 GSAP 時間軸、緩動、複雜介面動態 SaaS 首頁、產品發表、投影片式轉場 D3.js 資料轉換、SVG、客製圖表 統計變化、架構圖、地圖與路徑 Lottie JSON 向量動畫 圖示、付款流程、節慶與微動畫 Three.js 即時 3D 場景與模型 低多邊形場景、設備與空間示意 Fabric.js 與 p5.js Canvas 繪圖與自訂視覺 白板、手繪、幾何圖形與實驗動畫 Blender 建模、材質、燈光與高品質 3D 產品模型、車輛、角色與複雜鏡頭
Remotion 加 GSAP
GSAP 的 Timeline 很適合管理多段 Tween，也方便安排重疊、標籤與緩動。它能讓產品頁面以投影片般的節奏逐幕展開。不過 Remotion 最終仍要對每一幀得到固定結果，因此整合時應由目前幀數控制 GSAP 的進度，避免依賴瀏覽器實際經過的時間。
Remotion 加 D3.js
D3.js 是自由度很高的資料視覺化工具，關於人口統計變化、系統架構、交通路線與歷史路徑都很適合先由 D3 計算比例尺、座標與 SVG，再由 Remotion 控制每一段資料何時出現，資料來源應保存在專案內或在輸出前完成下載，避免輸出時受到外部 API 波動影響。
Remotion 加 Lottie
Lottie 適合圖示、付款成功、條碼掃描與簡短節慶動畫，官方套件需要安裝 @remotion/lottie 與 lottie-web。部分 Lottie expression 無法保證逐幀一致，正式輸出前應特別檢查是否閃爍。
npm i @remotion/lottie lottie-webRemotion 加 Three.js
Three.js 適合在 React Three Fiber 中載入 3D 模型，再用 Remotion 的目前幀數控制相機、模型與燈光，官方提供 @remotion/three 進行整合，低多邊形產品展示、工廠流程或地圖空間化很合適，複雜建模與擬真材質則應交給 Blender。
npm i three @react-three/fiber @remotion/three @types/threeBlender 與 MCP 的正確分工
Blender 可以完成建模、材質、燈光、相機與骨架動畫，透過合適的 MCP 連接器，Claude Code 或 Codex 可以呼叫 Blender 執行部分操作，但這不代表代理已具備專業 3D 美術判斷，最有效率的分工，是由 Blender 建立複雜 3D 資產與鏡頭，再輸出透明影片或圖片序列，最後交給 Remotion 疊加文字、圖表、字幕與音訊。
MCP 連接器屬於第三方整合時，要先檢查原始碼、權限範圍與維護狀態。不要讓來源不明的工具取得整台電腦或敏感專案的存取權。
如何輸出透明字卡與動畫覆蓋層
透明背景不能只把 CSS 背景設成透明，輸出格式也必須保留 Alpha 通道，若要放進 Final Cut Pro、Premiere 或 DaVinci Resolve，Remotion 官方建議使用支援 Alpha 的 ProRes 4444 或 4444 XQ，影格格式選 PNG，像素格式使用 yuva444p10le。
npx remotion render ProductLaunch out/overlay.mov --image-format=png --pixel-format=yuva444p10le --codec=prores --prores-profile=4444網頁若需要透明影片，可以輸出 VP8 或 VP9 的 WebM，搭配 PNG 影格與 yuva420p，瀏覽器支援並不一致，正式網站最好同時準備不透明的備用版本。
從需求到成品的完整工作流程
寫清楚目的 先決定受眾、平台、時長與希望觀眾記住的唯一重點拆分分鏡 每幕只安排一個主要訊息，標出開始與結束時間定義視覺系統 固定顏色、字體、間距、圓角、陰影與安全邊界安裝 Skill 讓代理先讀取 Remotion 的官方規範與相關能力先做短樣本 用 3 到 5 秒確認設計方向，不要直接生成整支作品檢查代表幀 至少檢查開頭、中段、轉場前後與結尾加入專用工具 依需求選 GSAP、D3、Lottie、Three.js 或 Blender加入音訊 最後才對齊旁白、音效與背景音樂輸出與複查 完整播放成品，也要檢查文字是否溢出與畫面是否閃爍
預覽完成後，可以先列出 Composition，再輸出指定作品。
npx remotion compositions
npx remotion render ProductLaunch out/video.mp4Remotion 與用 HTML 寫影片的 HyperFrames 都把畫面轉成代理可修改的程式碼。Remotion 更接近 React 生態與逐幀影片管線，HyperFrames 則適合直接以 HTML 組合動態內容。選擇重點不是哪一套比較新，而是哪一套更符合現有技術與交付格式。
一定要用 Remotion 嗎
不一定。若只是把現成網頁動畫輸出成一次性的短片，可以用 GSAP 或 D3 建立網頁，透過 Playwright 等瀏覽器工具逐幀截圖，再交給 FFmpeg 合成，這條路徑簡單直接，也能保留原本的前端互動程式。
Remotion 的優勢在於 Composition、時間軸、媒體同步、參數化、Studio 預覽與標準輸出流程，當作品包含多個分鏡、字幕、音訊、不同尺寸，或需要批次套用資料時，這些能力會明顯降低維護成本，單次實驗可以選瀏覽器截圖加 FFmpeg，長期內容管線則更適合 Remotion。
常見問題
Codex 可以取代 Claude Code 完成這套流程嗎
可以，Remotion 官方 Agent Skills 文件已把 Codex 列為適用代理，差異主要來自代理讀取到的 Skill、專案上下文、提示詞完整度與驗收流程，而不是只能使用某一個品牌的開發工具。
為什麼參考圖很多，結果還是不像
大量截圖不等於完整動態規格，需要補上每個圖層的名稱、時間區間、位移方向、遮罩關係與緩動方式，先重建一個短鏡頭，再逐幀對照，會比一次交付整段素材更有效。
什麼工具最適合動態圖表
D3.js 適合需要客製比例尺、座標、路徑與 SVG 的資料視覺化，一般長條圖或折線圖不必為了技術感增加過多特效，先確保數據正確、標籤可讀與變化有清楚的時間順序。
透明影片輸出後為什麼變成黑底
通常是編碼器、像素格式或影格格式沒有保留 Alpha，剪輯軟體可用 ProRes 4444 搭配 PNG 與 yuva444p10le，網頁則可測試 VP8 或 VP9 WebM 搭配 yuva420p。
結論
Claude Code、Codex 與 Remotion 的組合確實能做出高品質動畫，但品質不是來自一句神奇提示詞。真正有效的做法，是先讓代理掌握 Skill，再把需求寫成可驗收的分鏡與逐幀規則，最後依內容選擇 GSAP、D3、Lottie、Three.js、Canvas 或 Blender。
把第一版當成可以修改的動畫原型，而不是最終成品，先完成短樣本、檢查代表幀、修正視覺系統，再擴充完整時間軸，AI 才會從快速生成工具變成穩定的動態設計工作夥伴。
延伸資料
by Rain Chu 7 月 28, 2026 | AI , PPT
傳統簡報的限制不只在動畫比較少，而是內容、視覺與互動通常被綁在同一個封閉檔案裡，改用 HTML 後，圖表可以依資料更新，產品可以用 3D 呈現，卡片能拖曳與吸附，按鈕也能真的回應操作。更重要的是，Codex 可以讀懂 HTML、CSS 與 JavaScript，直接修改、測試並反覆改善。
真正有效的方法不是叫 AI 一次做完，而是先把參考案例拆成設計規則，再把內容交給規則處理。這個做法能把「好看」從模糊感覺變成可重複使用的系統，也更適合品牌簡報、產品發表、作品集與資料看板。
HTML 簡報為什麼比 PPT 更適合 AI Agent
內容可程式化 ：文字、圖片與資料都能從檔案或 API 載入互動更完整 ：可加入篩選、拖曳、滾動、吸附、主題切換與即時圖表容易驗證 ：Codex 可搭配瀏覽器測試畫面尺寸、按鈕、動畫與手機版容易複用 ：風格規則可整理成 DESIGN.md，工作流程可封裝成 SKILL.md交付彈性高 ：可直接開啟 HTML，也能再輸出 PDF、圖片、PPTX 或 MP4
如果你已經在使用 Codex，可以把瀏覽器驗證接進製作流程。相關做法可參考站內的 Playwright CLI 是什麼？讓 Codex 用 CLI 操作瀏覽器 。
最穩定的五段式工作流程
蒐集參考 ：挑一到三個真正符合目標的網站、品牌頁或既有簡報拆成規則 ：整理配色、字體、字級、網格、留白、圖片比例、元件與動效帶入內容 ：提供主題、章節、資料表、圖片與必要連結加入能力 ：用 ECharts、Spline 與 GSAP 補上圖表、3D 與動畫驗證與封裝 ：測試桌面與手機版，再把成熟規則做成 Skill
一次直出的頁面常會出現字級、卡片與配色彼此不協調的問題。兩段式做法先產生設計規格，再產生實際頁面，能讓 AI 在每一輪修改時都有共同標準。若你希望更進一步改善 AI 常見的模板感，可以搭配 用 Impeccable 改善 AI 網站設計 。
Open Design 是什麼
Open Design 是開源、local-first 的 AI 設計工作區，原始碼放在 nexu-io/open-design 。它不是另一個封閉模型，而是把 Codex、Claude Code、Cursor、Gemini CLI、OpenCode、Qwen 等既有 Coding Agent 接進一套視覺設計流程。
它能建立原型、Landing Page、Dashboard、簡報、設計系統與 HTML 動態內容，輸出會落在自己的專案資料夾中。核心流程是 Brief、Template、Visual direction、Artifact、Memory，也就是從需求、模板、視覺方向一路走到可執行成品與可重用記憶。
為什麼可視為 Claude Design 的替代方案
比較項目 Claude Design Open Design 使用方式 Anthropic 託管的設計工作區 本機桌面程式、Agent、MCP 或自行部署 Agent 以 Claude 與 Claude Code 為核心 可接 Codex、Claude Code、Cursor、OpenCode、Qwen 等 檔案控制 畫布內建立後可匯出或交接 直接產生專案內可執行檔案 設計系統 可匯入程式庫與設計檔 使用可攜式 DESIGN.md 與 SKILL.md 授權與費用 Beta 功能包含在 Claude Pro、Max、Team、Enterprise Apache-2.0 開源，模型或 Agent 成本依所接服務而定
Claude Design 適合想要託管畫布、直接編輯與快速交接 Claude Code 的使用者，Open Design 則更適合重視本機檔案、可更換 Agent、可自行修改 Skill，以及希望沿用 Codex 工作方式的人。
Open Design 安裝與 Codex 用法
到 Open Design 下載頁 安裝 macOS、Windows 或 Linux 版本
桌面版建議登入後直接開始，官方下載頁標示不必另外設定 API Key
若要接 Codex，先到 Open Design 的 Settings，再進入 MCP server，複製 Codex 專用設定
若終端機的 od 指令確定指向 Open Design，也可以使用下方命令
git clone https://github.com/nexu-io/open-design
cd open-design
pnpm install macOS 內建另一個同名 od 指令，因此桌面版使用者以 Settings 裡提供的完整路徑設定最穩。完成後可以直接對 Codex 說：
請使用 open-design，依照我提供的品牌資料與參考網站，先建立 DESIGN.md，再產生一份 16 比 9 的互動式 HTML 產品簡報。請保留可編輯文字、響應式版面與鍵盤翻頁，完成後用瀏覽器檢查每一頁。可直接使用的繁體中文提示詞
以下內容已把可辨識的簡體中文提示改成繁體中文，並保留原本任務結構。方括號內的文字請換成自己的資料。
提示詞一：直接參考網站製作產品頁
請參考這個網站 [參考網址] 的設計風格，再根據我提供的資料，重製一個 [品牌與產品名稱] 的產品展示頁面。請保留品牌辨識度、響應式版面與可操作的互動效果。提示詞二：把參考素材拆成設計規則
你是一位專業的前端網站設計師。請幫我拆解並整理這個 [網站或圖片] 的設計風格，包括配色、字體、字級、留白、網格、圖片比例、卡片樣式與動畫方式。請提煉成一套明確、可執行的設計規則，並整理成 Markdown 格式的規則文件。提示詞三：使用規則產生 HTML
請根據 [我提供的內容]，套用剛才整理完成的設計規則，製作一個互動性高的 HTML 網頁。請保留一致的配色、字體、網格、留白、圖片比例、卡片與動畫節奏，並確保桌面與手機版都能正常使用。提示詞四：用 ECharts 建立動態 GDP 排名
請載入 ECharts，幫我製作一個中國 2000 至 2025 年各省份年度 GDP 的動態長條圖。資料放在附件試算表中。請把下方範例程式碼換成附件資料，保持原有視覺樣式，最後用 HTML 呈現。畫面要精美、可互動，並提供播放、暫停、速度與年份控制。
[貼上從 ECharts 範例頁取得的程式碼]提示詞五：用 GSAP 改造作品集
這一段是依實際操作需求補全的繁體中文版本，適合直接交給 Codex：
請把我上傳的作品集改造成互動式 HTML 網頁，並使用 GSAP 實作卡片無限循環輪播。需要支援滑鼠與觸控拖曳、平滑吸附、拖曳時的動態回饋，以及上一個與下一個按鈕。請加入一鍵切換主題色功能，保留每張作品卡片的連結，並檢查手機版操作。提示詞六：把成熟版型封裝成 Skill
請根據這套已經驗證過的 HTML 設計風格，幫我封裝成一個可重複使用的 Skill。它需要記錄頁面的整體視覺風格、配色、字體、留白、元件樣式、圖表規範與動效原則，同時整理出封面頁、資料頁、功能拆解頁、案例頁與總結頁等常用頁面模板。
之後我只需要輸入主題、內容大綱、圖片與資料，任何相容的 AI Agent 就能自動套用這套規則，產生風格一致、可編輯、適合簡報展示的 HTML 頁面。
輸出 HTML 前，請自動檢查字體、顏色、間距、圖表樣式與頁面節奏是否統一。第一次建立自訂 Skill，可以先閱讀站內的 用 skill-creator 建立 Skill ，再把設計規則、資產與驗證流程拆成獨立檔案。
提示詞七：加入像 PPT 的可視化編輯功能
請在現有 HTML 中加入一套簡單的可視化編輯功能，支援直接點擊文字修改內容、拖曳元素調整位置、上傳圖片替換素材，並透過側邊欄統一修改字體、顏色、字級與動畫。
同時加入頁面複製、元件刪除、復原、重做與匯出 HTML 功能。編輯時顯示控制框，播放時自動隱藏。整體操作盡量接近傳統 PPT，不要破壞原有設計與動畫。提示詞八：補上主題色切換
請在既有編輯側欄加入主題色設定。提供四組預設色票與一個自訂色彩選擇器。修改後要同步更新頁面背景、卡片、按鈕、圖表與重點文字，同時維持足夠對比。請保留原有內容、互動與動畫。三個能大幅提升 HTML 簡報的前端工具
工具 官方網址 適合用途 建議用法 Apache ECharts echarts.apache.org 長條圖、折線圖、地圖、關係圖與資料看板 先從官方 Examples 找接近的範例，再把程式碼與資料表一起交給 Codex Spline spline.design 產品、空間、3D 模型與互動展示 建立或 Remix 場景，從 Export 取得公開網址或嵌入碼，再放進 HTML GSAP gsap.com 滾動敘事、拖曳、吸附、時間軸、文字與 SVG 動畫 先描述互動狀態與觸發條件，再讓 Codex 用 timeline 組織動畫
ECharts 不只負責把資料畫出來，還能讓篩選條件與簡報節奏同步。Spline 適合讓產品從靜態圖片變成可旋轉的物件。GSAP 則負責讓捲動、拖曳與狀態轉換具有一致節奏。三者一起使用時，先確認內容目標，再決定是否真的需要特效，避免互動比訊息更搶眼。
六個 HTML 與設計 Skill
安裝指令整理
npx skills add https://github.com/alchaincyf/huashu-design
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill
npx skills add https://github.com/lewislulu/html-ppt-skill
npx skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend UIUX Pro Max 目前建議安裝 ui-ux-pro-max-cli，再用 uipro init --ai codex 加入專案。更完整的 WordPress 使用方式可看 UIUX Pro Max 教學 。
npm install -g ui-ux-pro-max-cli
uipro init --ai codex frontend-slides 的 Claude Code Marketplace 指令與一般 Agent 不同。Codex 最簡單的方式是提供 GitHub 網址，要求它讀取 SKILL.md 與必要參考檔，再安裝到自己的 Skill 目錄。每個專案都可能更新，正式安裝前仍應以 GitHub README 為準。
設計靈感網站完整清單
使用靈感網站時，不要只丟首頁網址給 AI。最好指定一個實際案例，說清楚要借用的是資訊層級、網格、留白、字體或動畫，並列出不能照抄的品牌元素。需要從文字或圖片快速建立 UI，也可以延伸閱讀 Google Stitch 教學 。
最後的品質檢查
每頁是否只有一個主要訊息
字體是否已載入，中文與英文是否都有替代字型
圖表標籤、單位與資料來源是否清楚
動畫是否支援停止，是否干擾閱讀
滑鼠、鍵盤與觸控是否都能操作
桌面、平板與手機是否沒有溢出或遮擋
編輯模式與播放模式是否能明確切換
外部程式庫失效時是否有基本內容可看
輸出檔案是否保留來源與授權資訊
HTML 簡報的價值不是把 PPT 換成另一種檔案格式，而是把設計規則、資料、互動與驗證串成一條可重複執行的流程。先讓 Codex 理解規則，再讓它寫頁面，最後用瀏覽器檢查。當這套方法成熟後，再封裝成 Skill，下一份報告就不必重新教一次。
常見問題
Open Design 可以直接配合 Codex 嗎
可以。Open Design 官方列出 Codex 支援，桌面版可在 Settings 的 MCP server 取得 Codex 設定。產出仍會保留在本機專案目錄。
Open Design 完全免費嗎
Open Design 原始碼採 Apache-2.0。桌面下載頁提供登入後使用的官方模型路由，自行部署或 BYOK 模式則可能產生所接模型與 Agent 的費用。
HTML 簡報可以再輸出成 PPTX 嗎
部分 Skill 與 Open Design 提供 PPTX 或相關匯出能力，但複雜互動、3D 與 GSAP 動畫通常無法完整保留。需要保留互動時，建議直接交付 HTML。
最適合先安裝哪一個 Skill
要做一般網頁簡報可先看 frontend-slides。要快速選主題、版型與動畫可用 html-ppt-skill。要建立品牌化設計流程可研究 huashu-design。畫面總有模板感時，再加入 taste-skill 或 UIUX Pro Max。
參考資料
by Rain Chu 7 月 28, 2026 | AI , skills , Tool , 圖型處理
AI Agent 很會理解「月份、營收、百分比變化」代表什麼，卻不一定能穩定處理座標軸、刻度、色階、標籤間距與版面配置，直接要求模型輸出完整 Vega-Lite 或 ECharts 規格，常見結果不是設定冗長，就是參數彼此衝突，甚至渲染後只得到空白畫布。
Flint Chart 的做法，是讓 AI 只負責描述資料的意義與圖表意圖，再由確定性的編譯器完成幾何與渲染細節 ，這不只是圖表工具的改良，也是一種值得用在 AI Agent 系統的架構。模型產生小型、可驗證的中介格式，程式再負責執行可重現的工作。
如果你正在用 Codex 製作視覺內容，可以先參考站內的Codex 動態圖表與短影音工作流程 ，Flint 則更專注在資料圖表的語意、驗證與多後端輸出。
Flint Chart 是什麼
Flint 是微軟研究院與中國人民大學 IDEAS Lab 合作開發的開源視覺化中介語言，它不是另一套直接把圖畫到畫布上的函式庫，而是位在 AI Agent 與 Vega-Lite、Apache ECharts、Chart.js、Plotly、Excel 之間的語意層。
AI Agent 判斷欄位代表月份、價格、利潤、國家、排名或百分比變化Flint 規格 保存資料、語意型別、圖表種類與欄位映射Flint 編譯器 推導日期解析、聚合、刻度、色彩、標籤與版面繪圖後端 接收原生規格並渲染互動圖表、PNG、SVG 或 Excel 原生圖表
截至 2026 年 7 月 28 日，官方 GitHub 顯示 JavaScript 與 TypeScript 函式庫已能輸出 Vega-Lite、ECharts、Chart.js、Plotly 與 Office.js 使用的 Excel 原生圖表。7 月 11 日的 iThome 報導只列出前三種，是因為後續 0.4.0 版才加入 38 種 Plotly 圖表與 18 種可編輯 Excel 範本。
為什麼 AI 直接產生圖表容易失敗
製作圖表其實包含兩種不同工作。第一種是理解語意，例如 revenue 是金額，month 是年月，growth 是百分比變化。第二種是安排幾何，例如軸的範圍、刻度密度、文字旋轉、圖例位置與色彩映射。
語言模型擅長第一種工作，第二種工作卻牽涉許多互相依賴的數值與規則。Flint 把兩者拆開後，AI 不必一次猜完所有低階設定。規格也從難以檢查的大段設定，縮成可閱讀、可修改、可在渲染前驗證的小型 JSON。
模型負責意義，編譯器負責數學。真正的價值不是少寫幾行，而是讓每一步都能被驗證與重現。
Flint 規格的三個核心部分
一份 Flint 輸入主要由資料、semantic_types 與 chart_spec 組成。下面用季度營收長條圖示範最小結構。
{
"data": {
"values": [
{ "quarter": "Q1", "revenue": 1200 },
{ "quarter": "Q2", "revenue": 1450 },
{ "quarter": "Q3", "revenue": 980 },
{ "quarter": "Q4", "revenue": 1800 }
]
},
"semantic_types": {
"quarter": "Quarter",
"revenue": "Price"
},
"chart_spec": {
"chartType": "Bar Chart",
"encodings": {
"x": { "field": "quarter" },
"y": { "field": "revenue" }
},
"baseSize": { "width": 480, "height": 320 }
}
}
data 可以直接放入列資料，也能在本機 MCP 模式下引用 JSON、CSV 或 TSV 檔案。semantic_types 告訴編譯器每個欄位的實際意義。chart_spec 則決定圖表種類，以及欄位要放在 x、y、color、size、shape、column、row、group 或 detail 等通道。
語意型別可以重複使用。探索同一份資料時，多半只要更換 chart_spec。例如把 Quantity 改成 PercentageChange，編譯器就能改用適合正負變化的發散色階、百分比格式與對應的軸設定。這比每次都讓模型重新生成完整圖表設定更穩定。
在 Codex 安裝 Flint MCP
本機版本需要 Node.js 18 以上。Codex 可以用一行命令加入 stdio MCP 伺服器。
codex mcp add flint -- npx -y flint-chart-mcp接著確認伺服器是否已經出現在清單。
codex mcp list如果資料不需要從本機檔案讀取，可以關閉檔案引用。這個設定要求代理把資料列直接放進 data.values，能縮小不受信任工作流程的檔案存取範圍。
codex mcp add flint-safe -- npx -y flint-chart-mcp --disable-file-reference官方也提供遠端 MCP 端點，適合只能連接 HTTP MCP 的客戶端。處理私有資料時，仍建議優先選擇本機 stdio 版本。
codex mcp add flint-remote --url https://flint.data-formulator.ai/mcp第一次使用的提示詞
安裝後不要只下「幫我畫圖」。把資料來源、語意、圖表目的、驗證方式與輸出格式一起交代，結果會更可靠。
請載入 flint://agent-skill，並呼叫 list_chart_types 檢查 vegalite 後端是否可用。讀取目前資料夾的 sales.csv，把 month 判定為 YearMonth，revenue 判定為 Price，growth 判定為 PercentageChange。先用 validate_chart 驗證，再建立每月營收折線圖，並用顏色標示成長率。若支援 MCP Apps 就使用 create_chart_view，否則用 render_chart 輸出 SVG。最後列出所有警告與被截斷的資料。
Flint MCP 提供五個主要工具。create_chart_view 適合互動調整，validate_chart 用來檢查規格與警告，render_chart 產生 PNG 或 SVG，compile_chart 回傳後端原生 JSON，list_chart_types 則用來確認可用的圖表與通道。
這套做法和讓 Codex 用 Playwright CLI 操作瀏覽器 有相同精神。模型不必自己模擬每個底層步驟，而是呼叫邊界清楚、結果可檢查的工具。
在 JavaScript 與 TypeScript 專案使用
若你正在開發產品，而不是只在對話中產生圖表，可以直接安裝函式庫。
npm install flint-chartimport { assembleVegaLite } from "flint-chart"
const input = {
data: { values: myData },
semantic_types: {
weight: "Quantity",
mpg: "Quantity",
origin: "Country"
},
chart_spec: {
chartType: "Scatter Plot",
encodings: {
x: { field: "weight" },
y: { field: "mpg" },
color: { field: "origin" }
},
baseSize: { width: 400, height: 300 }
}
}
const spec = assembleVegaLite(input) 相同輸入可以交給 assembleECharts、assembleChartjs、assemblePlotly 或 assembleExcel。後端若不支援指定圖表，組裝器會在渲染前拋出錯誤，因此產品端應先查詢範本支援狀態，再把錯誤與警告顯示給使用者。
Excel 原生圖表特別適合需要後續人工編輯的報表工作。如果工作流程還包含 Word、PowerPoint 或試算表處理，可以延伸閱讀OfficeCLI 與 AI Agent 的 Office 自動化教學 。
Flint、Vega-Lite、Mermaid 與一般 Chart MCP 的差異
工具 主要用途 AI 要處理的細節 適合情境 Flint 語意中介格式與編譯 資料意義、圖表意圖與欄位映射 需要可靠生成、多後端與可驗證規格 Vega-Lite 統計視覺化文法 較完整的編碼、比例尺與版面設定 需要精細控制與成熟生態 Mermaid 流程圖與軟體圖解 節點、關係與圖形語法 架構圖、流程圖與文件 一般 Chart MCP 把特定繪圖服務包成工具 視工具設計而定 已有固定渲染服務或單一後端
Flint 並不是 Vega-Lite 的替代品，因為它可以直接編譯成 Vega-Lite 規格。它處理的是更前面的一層，讓模型先表達「這些資料是什麼」，再由編譯器決定「如何正確畫出來」。
目前限制與使用前要知道的事
仍是研究專案 官方論文尚未正式公開，產品決策不能只靠宣傳數字Python 套件尚未發布 目前只有原始碼預覽，正式套件仍以 JavaScript 與 TypeScript 為主後端支援並不完全相同 同一圖表不一定能在所有後端輸出，MCP 指南目前列出的編譯後端仍以 Vega-Lite、ECharts 與 Chart.js 為主Flint 不負責完整資料整理 聚合、過濾、關聯、樞紐與衍生欄位最好先在上游完成自動版面可能截斷資料 離散項目超過空間預算時會套用保留策略，整合端必須顯示 _warnings本機渲染仍要管理權限 預設會讀取代理指定的本機檔案，不受信任的環境應啟用 –disable-file-reference
iThome 整理的測試顯示，Flint 在 GPT-5.1、GPT-5-mini 與 GPT-4.1 三組 LLM 評分中，都優於直接產生完整 Vega-Lite 規格的 DirectVL。不過官方仍標示研究論文即將公開，因此比較結果適合視為早期證據，不能取代自己的資料集與視覺驗收。
真正值得帶走的是代理系統的分工方式
Flint 最值得學習的不只是圖表規格，而是代理系統的分工。讓模型輸出小型、結構化、可以先驗證的意圖，再讓確定性程式負責計算、渲染與錯誤處理。這個模式也能延伸到 UI 元件、文件排版、測試流程與自動化操作。
但「成功回傳 JSON」不等於任務完成。視覺工作必須真的渲染，再檢查畫布是否空白、文字是否重疊、顏色是否誤導、資料是否被截斷。AI Agent 的可靠性，來自可驗證的中介格式與最後一哩的實際驗收，而不是更長的提示詞。
常見問題
Flint 可以取代 ECharts 或 Vega-Lite 嗎
不會。Flint 是位在 AI 與繪圖函式庫之間的中介語言，最後仍會輸出 ECharts、Vega-Lite 等後端可使用的原生規格。
Flint MCP 會把資料上傳到外部服務嗎
本機 stdio 版本會在主機上執行，內嵌資料與本機檔案不會送到遠端渲染服務。若改用官方 HTTP 端點，資料會透過遠端連線處理，因此敏感資料仍應優先採用本機版本。
Codex 看不到互動圖表怎麼辦
create_chart_view 需要客戶端支援 MCP Apps。若目前介面不支援，可以要求 Flint 使用 render_chart 輸出 SVG 或 PNG，再直接檢查成品。
Flint 適合什麼工作
它適合需要大量產生資料圖表、希望規格可被人工修改、需要切換不同後端，或不能接受偶發空白與錯誤圖表的 Agent 工作流程。若只是一次性的簡單圖表，現有大型模型或熟悉的圖表函式庫可能已經足夠。
參考資料
by Rain Chu 7 月 24, 2026 | 未分類
Ego Lite 是可以讓 Codex、Claude Code 或其他 Agent 能在保留登入狀態的瀏覽器裡工作，同時不搶走你的分頁、滑鼠與注意力。它把 Chromium 瀏覽器、獨立工作空間 Space，以及 ego-browser Skill 組合在一起，讓人與 Agent 可以在同一套瀏覽器資料上並行處理不同任務。
如果你曾經用過 Playwright CLI 讓 Codex 操作瀏覽器 ，Ego Lite 可以視為另一條更偏向日常使用的路線。Playwright 擅長測試與可重現的自動化，Ego Lite 則把重點放在沿用真實登入狀態、讓多個 Agent 任務分開執行，以及把成功流程逐步固化成可重複使用的 Skill。
Ego Lite 是什麼
Ego Lite 是一款以 Chromium 為核心的 Agent Browser。它可以匯入 Chrome 的分頁、書籤、密碼、Cookie、登入工作階段、擴充功能與瀏覽器 Profile，外觀與一般 Chrome 接近，但多了一層專門給 Agent 使用的 Space。
每個 Space 都是獨立工作空間。你可以繼續處理自己的分頁，Codex 在另一個 Space 填表單、整理資料或下載檔案，另一個 Agent 還能同時開第三個 Space 執行其他任務。這些工作不需要共用同一個前景分頁，也不會輪流搶滑鼠焦點 。
Ego Lite 以同一套瀏覽器資料連接使用者與 Agent，再用 Space 隔離不同任務 真正的差異是登入狀態與工作空間
瀏覽器自動化最麻煩的地方，常常不是按鈕怎麼點，而是登入、雙因素驗證、SSO、Cookie、擴充功能與多個 Profile 怎麼延續。傳統自動化工具通常另外啟動一個乾淨的瀏覽器環境，這很適合測試，卻不一定適合處理每天都要登入的後台、社群平台或內部系統。
Ego Lite 把自己定位成你每天可以直接使用的瀏覽器。完成初次匯入後，Agent 可以在自己的 Space 沿用既有登入狀態。這也是它比單純命令列包裝更有意思的地方，因為 Agent 操作的是一個有真實使用脈絡的瀏覽器，而不是臨時建立的空白執行環境。
比較項目 Ego Lite Playwright 或 Puppeteer 一般 Agent Browser CLI 產品形態 可日常使用的 Chromium 瀏覽器加 Skill 程式庫與測試框架 操作瀏覽器的命令列工具 登入狀態 可匯入 Chrome 資料並在 Space 使用 通常自行建立或管理 Profile 多半操作另一個瀏覽器環境 人與 Agent 並行 不同 Space 同時工作 需要自行設計多 Context 或多實例 依工具實作而定 適合情境 登入後台、資料整理、日常重複工作 自動測試、精確流程、持續整合 快速交給 Agent 操作網頁
這不是誰取代誰的問題。需要穩定測試、嚴謹選擇器與 CI 流程時，Playwright 仍然很合理。需要 Agent 直接處理既有登入網站，而且你還要繼續使用瀏覽器時，Ego Lite 的設計更貼近日常工作。另一篇 用 Chrome 與 OpenCLI 控制瀏覽器 ，也能幫你比較不同整合方式。
Ego Browser Skill 如何減少 Token 與反覆試錯
很多瀏覽器 Agent 採用一個動作一次工具呼叫的節奏。先讀頁面，再點一下，重新讀頁面，再填一個欄位。每次來回都要把狀態交給模型判斷，步驟一多，時間與 Token 就跟著增加。
ego-browser 讓 Agent 直接組合一段 JavaScript，把可預測的觀察、點擊、輸入、等待與驗證放在同一次執行裡。它提供接近 Playwright 的 page、locator 與 browser 介面，也加入 taskSpaces、語意 Snapshot 和瀏覽器內請求能力。Agent 不必在每個小動作後停下來重新思考，複雜流程因此有機會用更少回合完成。
官網目前宣稱，特定複雜自動化測試相較 agent-browser 最多可快 3.45 倍，GitHub README 則仍保留最多 2.5 倍的描述。這兩個數字可能來自不同版本或測試組合，適合視為官方基準測試，不應直接套用到所有網站。真正值得觀察的是你自己的任務完成率、重試次數、總 Token 與人工接手次數。
Ego Lite 完整安裝方式
Ego Lite 目前以 macOS 為主要支援平台，Windows 與 Linux 仍在規劃中。最簡單的方法是到官網下載 Mac 版 ，開啟應用程式後完成初次設定。你也可以先把 Skill 加入 Codex 或其他 Agent。
請幫我設定 Ego Lite
專案網址是 https://github.com/citrolabs/ego-lite
請閱讀 skills/ego-browser/references/install.md
依照步驟安裝應用程式與 ego-browser Skill
需要我手動完成匯入或授權時先停下來告訴我初次啟動時，Ego Lite 會詢問是否匯入 Chrome 資料。匯入登入工作階段很方便，也代表 Agent 可能接觸已登入網站。建議只匯入工作所需的 Profile，不要把個人金融、公司管理後台與一般瀏覽資料全部混在同一個高權限環境。
完成應用程式內的 onboarding 後，可以確認命令是否已加入環境。
若找不到命令，常見原因是 ~/.local/bin 尚未加入 PATH。
export PATH="$HOME/.local/bin:$PATH"
command -v ego-browser 最後用最小測試確認執行環境。
printf "console.log('ego-browser ready')\n" | ego-browser nodejs 如何在 Codex 正確下 Prompt
一個好指令至少要包含網站、目標、資料範圍、輸出格式、驗證條件與需要停下來確認的高風險動作。不要只寫「幫我整理這個網站」，因為 Agent 不知道要看幾頁、保留哪些欄位，也不知道什麼情況才算完成。
/ego-browser
開啟我已登入的商品後台
依最新時間排序評論
收集前 100 筆評論的日期、評分、內容與商品規格
移除重複資料後輸出 CSV
完成前檢查總筆數與欄位是否齊全
不要送出表單、修改商品或發布任何內容需要多個來源時，可以明確要求使用不同 Space 並行執行，再把結果合併。例如規劃旅程時，一個 Space 查交通，一個 Space 查天氣，另一個 Space 整理景點與營業時間。最後再要求 Agent 檢查日期是否一致，避免不同網站的資料互相衝突。
/ego-browser
建立三個 Space 並行規劃台北到台南的三日行程
Space 1 查可訂購的高鐵班次與價格
Space 2 查三天逐時天氣
Space 3 查景點營業時間與休館日
最後合併成每日行程表
每個交通與景點資訊都保留來源網址
遇到付款、訂位或登入驗證時停下來交給我三種實際適合的工作
把商品評論整理成 CSV
Agent 可以進入已登入的電商頁面，開啟完整評論、調整排序、向下捲動或翻頁，再把指定欄位輸出成 CSV，第一次完成後，還可以把穩定步驟改成接收商品網址的腳本。之後直接執行腳本，就不必每次都讓模型重新理解同一套操作。
跨網站規劃行程
交通、天氣、地圖與旅遊攻略可以放到不同 Space 同時處理。這類工作真正困難的是登入狀態、日期對齊與多來源整合，剛好能發揮 Space 與既有 Cookie 的優勢。
結合地圖與求職網站篩選職缺
如果目標是找離住家最近的職缺，Agent 可以先從多個求職網站整理職稱、公司與地址，再交給地圖服務估算距離，最後輸出成 CSV，這比只用關鍵字搜尋更接近真正的決策流程，但地址、通勤時間與職缺是否仍有效，都要在結果中保留可追查來源。
從一次成功操作變成可重複 Skill
Ego Lite 最有價值的用法，不是每次都叫 Agent 從頭探索頁面，而是先讓它完成一次，再把成功路徑整理成 Skill 或腳本。探索階段需要模型判斷頁面與處理例外，穩定階段則把固定動作改成程式，僅在網站改版或驗證失敗時再回到 Agent。
先用自然語言描述結果與安全邊界
讓 Agent 完成一次並驗證輸出
整理穩定的頁面定位、等待條件與輸出欄位
將流程固化成 Skill 或可接收參數的腳本
為登入失效、欄位缺漏與網站改版保留明確錯誤訊息
當固定腳本能直接完成任務時，重複執行確實可以把模型 Token 壓到很低，甚至讓執行階段不再呼叫模型。不過這不是所有任務都能達成的零成本承諾。頁面變動、需要理解文字、遇到驗證碼或必須做判斷時，仍然需要 Agent 或人工介入。這個思路也適合延伸到 用 OfficeCLI 把文件工作交給 AI Agent ，把重複的辦公流程逐步變成可驗證的工具。
登入狀態越方便，權限管理越重要
Ego Lite 官方表示瀏覽紀錄、Cookie、密碼與頁面資料都保留在本機，設定時只記錄是否選擇 Chrome 匯入。即使資料不會主動上傳，Agent 仍然可能在你的授權下讀到頁面內容或執行操作，所以安全重點仍是最小權限與明確停止條件。
工作與私人帳號使用不同 Profile
發布、付款、刪除與權限變更必須人工確認
Prompt 清楚列出禁止操作
先用少量資料測試，再放大範圍
輸出要包含來源、筆數與驗證結果
結論
Ego Lite 的核心價值，是把真實瀏覽器狀態、Agent 專用 Space 與可重複 Skill 接在一起。它很適合需要登入、多網站整合、長流程與重複執行的工作，也能讓 Codex 在背景處理任務時，你仍然保有自己的瀏覽器與滑鼠。
最好的導入方式，是先挑一個低風險、每週都會重複的工作。讓 Agent 完成一次，確認輸出可靠，再把流程固化。真正節省的不是某一次點擊，而是把日後的重複思考與試錯一起移除。
常見問題
Ego Lite 可以讓 Codex 操作已登入網站嗎
可以。完成瀏覽器資料匯入與 onboarding 後，Codex 可透過 ego-browser Skill 在獨立 Space 使用既有登入狀態。高風險操作仍建議保留人工確認。
Ego Lite 與 Playwright 有什麼不同
Playwright 是瀏覽器自動化與測試框架，Ego Lite 是可以日常使用的 Chromium 瀏覽器，再透過 Skill 讓外部 Agent 操作。兩者可依測試或日常工作需求選擇。
Ego Lite 是否免費
官方目前標示 Ego Lite 免費且不需要訂閱。Agent 使用的模型是否產生費用，仍取決於 Codex、Claude Code 或其他模型服務的方案。
目前支援哪些作業系統
官方目前提供 macOS 版本，Windows 與 Linux 仍在 roadmap。下載前應以官網最新狀態為準。
瀏覽資料會上傳到 Ego Lite 嗎
官方表示書籤、瀏覽紀錄、Cookie、密碼與頁面資料保留在本機。不過 Agent 取得操作權限後仍可能接觸頁面內容，應以獨立 Profile 和最小權限降低風險。
官方資源
近期留言