Select Page
Open Design 與 HTML 簡報實戰:用 Codex 做出互動式網頁簡報

Open Design 與 HTML 簡報實戰:用 Codex 做出互動式網頁簡報

傳統簡報的限制不只在動畫比較少,而是內容、視覺與互動通常被綁在同一個封閉檔案裡,改用 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 操作瀏覽器

最穩定的五段式工作流程

  1. 蒐集參考:挑一到三個真正符合目標的網站、品牌頁或既有簡報
  2. 拆成規則:整理配色、字體、字級、網格、留白、圖片比例、元件與動效
  3. 帶入內容:提供主題、章節、資料表、圖片與必要連結
  4. 加入能力:用 ECharts、Spline 與 GSAP 補上圖表、3D 與動畫
  5. 驗證與封裝:測試桌面與手機版,再把成熟規則做成 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 DesignOpen Design
使用方式Anthropic 託管的設計工作區本機桌面程式、Agent、MCP 或自行部署
Agent以 Claude 與 Claude Code 為核心可接 Codex、Claude Code、Cursor、OpenCode、Qwen 等
檔案控制畫布內建立後可匯出或交接直接產生專案內可執行檔案
設計系統可匯入程式庫與設計檔使用可攜式 DESIGN.md 與 SKILL.md
授權與費用Beta 功能包含在 Claude Pro、Max、Team、EnterpriseApache-2.0 開源,模型或 Agent 成本依所接服務而定

Claude Design 適合想要託管畫布、直接編輯與快速交接 Claude Code 的使用者,Open Design 則更適合重視本機檔案、可更換 Agent、可自行修改 Skill,以及希望沿用 Codex 工作方式的人。

Open Design 安裝與 Codex 用法

  1. Open Design 下載頁 安裝 macOS、Windows 或 Linux 版本
  2. 桌面版建議登入後直接開始,官方下載頁標示不必另外設定 API Key
  3. 若要接 Codex,先到 Open Design 的 Settings,再進入 MCP server,複製 Codex 專用設定
  4. 若終端機的 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 EChartsecharts.apache.org長條圖、折線圖、地圖、關係圖與資料看板先從官方 Examples 找接近的範例,再把程式碼與資料表一起交給 Codex
Splinespline.design產品、空間、3D 模型與互動展示建立或 Remix 場景,從 Export 取得公開網址或嵌入碼,再放進 HTML
GSAPgsap.com滾動敘事、拖曳、吸附、時間軸、文字與 SVG 動畫先描述互動狀態與觸發條件,再讓 Codex 用 timeline 組織動畫

ECharts 不只負責把資料畫出來,還能讓篩選條件與簡報節奏同步。Spline 適合讓產品從靜態圖片變成可旋轉的物件。GSAP 則負責讓捲動、拖曳與狀態轉換具有一致節奏。三者一起使用時,先確認內容目標,再決定是否真的需要特效,避免互動比訊息更搶眼。

六個 HTML 與設計 Skill

Skill專案網址主要能力
frontend-slideszarazhangrui/frontend-slides建立單檔 HTML 簡報,提供視覺方向預覽,也能把 PPT 內容轉成網頁簡報
huashu-designalchaincyf/huashu-design建立高擬真原型、幻燈片、動畫與資訊圖,也能匯出 MP4
guizang-ppt-skillop7418/guizang-ppt-skill以電子雜誌或瑞士風建立 HTML Deck、配圖與多平台封面
html-ppt-skilllewislulu/html-ppt-skill提供多主題、多版型、動畫與講者模式的 HTML PPT Studio
taste-skillLeonxlnx/taste-skill調整版面、字體、動態與密度,減少前端成品的 AI 模板感
ui-ux-pro-max-skillnextlevelbuilder/ui-ux-pro-max-skill提供 UI 風格、配色、字體、圖表與 UX 規則,可支援 Codex

安裝指令整理

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 為準。

設計靈感網站完整清單

網站網址適合找什麼
Awwwardsawwwards.com網頁設計、創意互動與動效案例
SiteInspiresiteinspire.com精選網站與極簡品牌官網
Lapa Ninjalapa.ninjaLanding Page、完整頁面截圖與版式
Land-bookland-book.com網站、Landing Page 與作品集
Godlygodly.website目前會轉址到 Recent Design
Behancebehance.net品牌、平面、網頁、簡報與 3D 作品
Dribbbledribbble.comUI、圖示、插畫與視覺元件
Mobbinmobbin.com真實 App、網頁 UI 與產品流程
Pinterestpinterest.com情緒板、排版、配色與字體靈感
Muzlimuz.li設計趨勢、UI 與創意內容聚合
Recent Designrecent.design網頁、UI 互動與視覺風格
Fonts In Usefontsinuse.com真實字體搭配與排版案例
Typewolftypewolf.com網頁字體、字體組合與排版
站酷 ZCOOLzcool.com.cn品牌、平面、海報、插畫與作品集
優設 UISDCuisdc.com設計趨勢、方法、案例與素材
優設導航hao.uisdc.com設計工具、字體、配色與圖庫導航
UI 中國ui.cnUI、互動、產品設計與作品展示
花瓣網huaban.com圖片靈感、海報、版式與情緒板
TOPYStopys.cn品牌創意、廣告、文化與視覺案例
古田路 9 號gtn9.com品牌、包裝、平面與視覺案例
設計癖shejipi.com產品設計、工業設計與創意資訊

使用靈感網站時,不要只丟首頁網址給 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。

參考資料

Flint Chart 是什麼?讓 AI Agent 用語意規格可靠產生圖表

Flint Chart 是什麼?讓 AI Agent 用語意規格可靠產生圖表

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-chart
import { 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 工作流程。若只是一次性的簡單圖表,現有大型模型或熟悉的圖表函式庫可能已經足夠。

參考資料

Ego Lite 是什麼?讓 Codex 自動操作已登入瀏覽器

Ego Lite 是什麼?讓 Codex 自動操作已登入瀏覽器

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 讓使用者、Chromium 瀏覽器與 Codex 在不同 Space 並行工作的架構圖
Ego Lite 以同一套瀏覽器資料連接使用者與 Agent,再用 Space 隔離不同任務

真正的差異是登入狀態與工作空間

瀏覽器自動化最麻煩的地方,常常不是按鈕怎麼點,而是登入、雙因素驗證、SSO、Cookie、擴充功能與多個 Profile 怎麼延續。傳統自動化工具通常另外啟動一個乾淨的瀏覽器環境,這很適合測試,卻不一定適合處理每天都要登入的後台、社群平台或內部系統。

Ego Lite 把自己定位成你每天可以直接使用的瀏覽器。完成初次匯入後,Agent 可以在自己的 Space 沿用既有登入狀態。這也是它比單純命令列包裝更有意思的地方,因為 Agent 操作的是一個有真實使用脈絡的瀏覽器,而不是臨時建立的空白執行環境。

比較項目Ego LitePlaywright 或 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 的 pagelocatorbrowser 介面,也加入 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 後,可以確認命令是否已加入環境。

command -v ego-browser

若找不到命令,常見原因是 ~/.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 和最小權限降低風險。

官方資源

Claude Code 如何接 Cloudflare GLM 5.2?完整命令與避坑整理

Claude Code 如何接 Cloudflare GLM 5.2?完整命令與避坑整理

Cloudflare Workers AI 拿來接 Claude Code 的做法很簡單:Cloudflare 跑模型,LiteLLM 在本機當轉接橋,Claude Code 只需要改 Anthropic 相關環境變數,就能把請求送到本機 proxy。

這篇整理的是一個比較務實的路線。它不是要你把所有模型成本都消失,而是讓你知道免費額度在哪裡、帳單風險在哪裡、命令怎麼下、哪些設定一定要看清楚。

先講結論

Cloudflare Workers AI 有免費額度,官方價格頁寫明 Free plan 每天有 10,000 Neurons,GLM 5.2 目前也在 Cloudflare Workers AI 模型列表裡,可以透過 Cloudflare API 呼叫。這代表你可以把 Claude Code 的模型入口改成本機 LiteLLM proxy,再由 LiteLLM 轉送到 Cloudflare 的 @cf/zai-org/glm-5.2。

但「免費」不是「無限」,Cloudflare 的計費單位是 Neurons,免費額度用完後會受到方案限制,更重要的是,Cloudflare AI Gateway 也能接外部模型,如果你把 OpenAI 或 Anthropic 這類外部模型接進去,那就不再是 Cloudflare Workers AI 的免費模型邏輯,帳單會回到外部供應商那邊。

Claude Code 透過 LiteLLM proxy 接 Cloudflare Workers AI GLM 5.2 的架構圖
Claude Code 只改成本機 Anthropic 入口,真正的模型請求由 LiteLLM 轉到 Cloudflare Workers AI。

這個架構在解什麼問題

Claude Code 很好用,但長時間寫程式、重構、跑測試、修錯時,模型成本會變得很有感。若只是一些低風險任務,例如產生腳手架、改小工具、做簡單 demo、先跑一輪想法,Cloudflare Workers AI 的免費額度可以拿來當低成本緩衝層。

這和 用 Claude Code 搭配 LM Studio 與 Ollama 的思路很像,只是這次不是跑本地模型,而是把免費雲端額度接進本機開發流程。若你的工作流已經在用 Claude Code、Codex 和 skill 組合工作流,這種 proxy 入口會很有彈性。

完整操作命令

下面命令以 macOS 或 Linux 為主。你需要先有 Cloudflare 帳號,並在 Cloudflare dashboard 取得 Account ID 和 API Token。API Token 建議只給 Workers AI 需要的最小權限,不要用過度寬鬆的全域 token。

0. 安裝 Claude Code

npm install -g @anthropic-ai/claude-code

1. 用 curl 單測 GLM 5.2

先確認 Cloudflare 端可以呼叫模型。把 `你的ACCOUNT_ID` 和 `你的API_TOKEN` 換成自己的值。

curl https://api.cloudflare.com/client/v4/accounts/你的ACCOUNT_ID/ai/run/@cf/zai-org/glm-5.2 \
  -H "Authorization: Bearer 你的API_TOKEN" \
  -d '{"messages":[{"role":"user","content":"用一句話介紹你自己"}]}'

2. 安裝 uv

LiteLLM proxy 用 uvx 跑,可以固定 Python 3.12,避開較新 Python 版本造成的編譯問題。

curl -LsSf https://astral.sh/uv/install.sh | sh

3. 驗證 LiteLLM 能跑

uvx --python 3.12 --from 'litellm[proxy]' litellm --version

4. 建立 cf-config.yaml

建立 `cf-config.yaml`。`你的ACCOUNT_ID` 有兩處要換。`cf-glm-5.2` 給 Claude Code 主要模型用,`cf-small` 給較輕量任務用。

model_list:
  - model_name: cf-glm-5.2
    litellm_params:
      model: openai/@cf/zai-org/glm-5.2
      api_base: https://api.cloudflare.com/client/v4/accounts/你的ACCOUNT_ID/ai/v1
      api_key: os.environ/CLOUDFLARE_API_TOKEN
  - model_name: cf-small
    litellm_params:
      model: openai/@cf/meta/llama-3.1-8b-instruct-fp8
      api_base: https://api.cloudflare.com/client/v4/accounts/你的ACCOUNT_ID/ai/v1
      api_key: os.environ/CLOUDFLARE_API_TOKEN

litellm_settings:
  use_chat_completions_url_for_anthropic_messages: true

5. 啟動 LiteLLM 翻譯橋

這個終端視窗要保持開啟。Claude Code 之後會連到 `localhost:4000`。

export CLOUDFLARE_API_TOKEN=你的token
uvx --python 3.12 --from 'litellm[proxy]' litellm --config cf-config.yaml --port 4000

6. 新開視窗測 proxy

curl http://localhost:4000/v1/models -H 'Authorization: Bearer sk-1234'

7. 把 Claude Code 指到本機 proxy

export ANTHROPIC_BASE_URL=http://localhost:4000
export ANTHROPIC_AUTH_TOKEN=sk-1234
export ANTHROPIC_MODEL=cf-glm-5.2
export ANTHROPIC_DEFAULT_HAIKU_MODEL=cf-small

接著啟動 Claude Code,若跳出自訂 API 設定就選是。進入後用 `/status` 確認 Base URL 指向 `localhost:4000`。

claude

8. 把設定寫進 shell profile

如果你確定要長期使用,可以把上面四行 `ANTHROPIC_` export 加到 `~/.zshrc` 或 `~/.bashrc`。我會建議先手動跑幾次確認沒有問題,再寫進 profile。

Windows PowerShell 寫法

PowerShell 不用 `export`,改用 `$env:`。

$env:ANTHROPIC_BASE_URL="http://localhost:4000"
$env:ANTHROPIC_AUTH_TOKEN="sk-1234"
$env:ANTHROPIC_MODEL="cf-glm-5.2"
$env:ANTHROPIC_DEFAULT_HAIKU_MODEL="cf-small"

若要永久保存,放進 PowerShell 的 `$PROFILE`。Windows 跑 AI Agent 時,環境隔離也很重要,可以延伸看 Windows 跑 AI Agent 為什麼要用 WSL

保命提醒:不要把外部模型當免費額度

最容易出事的地方,是把 Cloudflare Workers AI、Cloudflare AI Gateway、OpenAI、Anthropic 混在一起。這篇的低成本前提,是 Cloudflare config 裡的模型走 `@cf/` 開頭,例如 `@cf/zai-org/glm-5.2`。這類模型用的是 Cloudflare Workers AI 額度。

如果你把 Gateway 接到 GPT 或 Claude,那些請求可能會回到 OpenAI 或 Anthropic 的帳單。Cloudflare 只是通道,不代表外部模型突然免費。真正要保命,就是把模型名稱、api_base、API key 來源逐一檢查,並在 Cloudflare 後台看用量。

官方價格頁目前寫得很明確:Free plan 每天 10,000 Neurons,Paid plan 也有每天 10,000 Neurons 免費額度,超出後依 Neurons 計費。免費方案超出額度通常是操作失敗,不是自動無限跑。這點比「無限免費」四個字重要太多。

省額度的三個做法

第一,任務分層。小任務用 `cf-small`,複雜推理再用 `cf-glm-5.2`。第二,讓 Agent 先輸出計畫再執行,避免一次丟太長上下文。第三,把重複流程寫成腳本或 skill,減少模型反覆讀同一批資料。

這也是我一直看好的方向:不要只追求模型本身,而是把模型接到穩定工具鏈。像 Playwright CLI 讓 Codex 操作瀏覽器,或 讓 Agent 自己搜尋和使用 skills,本質上都是把昂貴推理留給真正需要判斷的地方。

我會怎麼用

我不會把這套當成主力模型的完全替代品,而是當成低成本實驗層。適合拿來跑 demo、試 prompt、生成小工具、做簡單 code review、補文件、處理一次性腳本。真正重要的架構決策、複雜除錯、長上下文專案,還是要保留更強模型或本地大模型選項。

如果你已經在用 Codex 和 ChatGPT Work 這類 AI 代理工作流,這套 Cloudflare Workers AI + LiteLLM 的做法可以當成另一個模型入口。它的價值不是讓你省到零,而是讓你有更多成本可控的實驗空間。

延伸資源

FAQ

Cloudflare Workers AI 接 Claude Code 真的免費嗎?

不是無限免費。Cloudflare Workers AI 有每日免費 Neurons 額度,超出後會依方案限制或計費。要把它當成低成本額度,不要當成沒有上限的模型。

為什麼需要 LiteLLM?

LiteLLM 在本機當 proxy,把 Claude Code 發出的 Anthropic 入口請求轉成 Cloudflare Workers AI 可接受的 OpenAI 相容請求。

最容易踩到哪個帳單風險?

最容易把 Cloudflare AI Gateway 接到外部 GPT 或 Claude,卻以為仍在用 Cloudflare 免費 @cf 模型。設定時要確認模型名稱是 `@cf/` 開頭,並檢查 API key 來源。

這套適合取代主力 Claude 嗎?

不建議直接取代。它比較適合低成本實驗、簡單任務、小工具和批次工作。複雜架構、長上下文和高風險任務,仍應保留更強模型。

OfficeCLI 是什麼?讓 AI Agent 操作 Word、Excel、PowerPoint

OfficeCLI 是什麼?讓 AI Agent 操作 Word、Excel、PowerPoint

OfficeCLI 把 Word、Excel、PowerPoint 這三種常見文件,變成 AI Agent 可以穩定讀取、修改、驗證和預覽的工程接口。

以前要讓 AI 幫你處理 Office 文件,常見做法是丟給 Python 套件,例如 python-docx、openpyxl、python-pptx。這些工具很有用,但每種格式各自一套 API,版面問題也很難用純文字確認。OfficeCLI 的方向則比較像給 Agent 一支專門的文件手臂,用 CLI 和 JSON 把文件操作標準化。

先講結論

OfficeCLI 是 iOfficeAI 開源的 Office 文件命令列工具,主打給 AI Agent 使用。它可以建立、讀取、修改和驗證 docx、xlsx、pptx,不需要安裝 Microsoft Office,也不需要額外 runtime,官方定位是 single binary。

我會把它放在 Playwright CLI 同一類思路裡,Playwright CLI 是讓 Agent 操作瀏覽器,OfficeCLI 則是讓 Agent 操作文件,兩者共同點都是把原本依賴 GUI 或複雜 library 的任務,改成可重複、可檢查、可寫進 skill 的 CLI 工作流。

OfficeCLI 讓 AI Agent 讀取修改驗證和修正 Office 文件的流程圖
OfficeCLI 的價值在於讓 Agent 形成讀取、修改、驗證、修正的文件處理閉環。

為什麼 Agent 需要 OfficeCLI

文件不是只有文字,Word 有段落、樣式、頁首頁尾、註腳、目錄和追蹤修訂。

Excel 有公式、表格、樞紐分析、條件格式和資料驗證。P

owerPoint 有投影片、形狀、圖表、圖片、動畫和轉場。這些東西如果只轉成純文字,Agent 很容易看漏版面和結構。

OfficeCLI 的關鍵設計,是把文件轉成 Agent 能理解的結構化輸出,也能渲染成 HTML 或 PNG,這讓 Agent 不只知道文件裡有什麼文字,也能檢查排版結果。對需要交付正式報告、簡報、表格的人來說,這個 render → look → fix 的迴圈非常重要。

一行指令取代很多樣板程式碼

傳統 Python 套件通常要先 import library、建立物件、找到段落或投影片、設定屬性,最後再存檔,OfficeCLI 把這些操作變成像 shell command 一樣的命令。例如建立簡報、加入投影片、設定文字、讀取 outline、輸出 JSON,都可以用命令完成。

officecli create deck.pptx
officecli add deck.pptx / --type slide --prop title="Q4 Report"
officecli view deck.pptx outline
officecli get deck.pptx /slide[1] --json

這種形式對 Codex、Claude Code、Cursor、GitHub Copilot 這類 coding agent 很友善。Agent 不需要在不同文件格式之間背很多 Python API,只要知道 OfficeCLI 的命令和路徑規則,就能用一致方式操作三種 Office 文件。

OfficeCLI 能做哪些事

OfficeCLI 的命令不只 create 和 view。官方文件列出的核心能力包含 get、query、set、add、remove、move、swap、validate、batch、dump、merge、watch、mcp、raw 和 raw-set。這代表它不只是產生文件,也能讀取現有文件、定位元素、修改內容、驗證問題、批次處理和啟動 MCP server。

格式可做的事適合場景
Word段落、樣式、表格、圖片、註腳、目錄、追蹤修訂報告、自動合約、專案文件、審稿流程
Excel儲存格、公式、表格、排序、條件格式、圖表、樞紐分析月報、資料清理、預算表、營運儀表板
PowerPoint投影片、形狀、圖片、表格、圖表、動畫、轉場簡報初稿、銷售 deck、課程投影片、專案提案

如果你的工作已經在用 MarkItDown 把 Office 文件轉成 AI 可讀 Markdown,OfficeCLI 可以補上另一半。MarkItDown 偏向讀取和轉換,OfficeCLI 更偏向讀寫修改和驗證。

最重要的是可視化回饋

Agent 產生文件最常見的問題,是內容看起來對,但交付檔打開後版面歪掉。OfficeCLI 的 built-in rendering engine 可以把 docx、xlsx、pptx 渲染成 HTML 或 PNG,再讓 Agent 檢查畫面。這對簡報和報告特別有用,因為很多錯誤不是純文字能看出來的。

例如 Agent 做完簡報後,可以先用 `officecli view deck.pptx html` 或 `officecli watch deck.pptx` 看預覽,再用 `officecli view deck.pptx issues –json` 找問題。這會讓文件生成變成工程流程,而不是一次性產出後靠人工開檔檢查。

安裝方式

OfficeCLI 官方提供多種安裝路線。AI Agent 可以先讀 skill file,讓 Agent 自己理解如何安裝和使用。一般開發者也可以直接跑安裝腳本,或透過 npm 安裝。

curl -fsSL https://officecli.ai/SKILL.md
curl -fsSL https://raw.githubusercontent.com/iOfficeAI/OfficeCLI/main/install.sh | bash
npm install -g @officecli/officecli

Windows 則可以用 PowerShell 安裝。它的核心好處是 single binary,文件處理不必依賴本機有沒有安裝 Office。這對伺服器、CI、Docker 或 Agent 執行環境很重要。

跟 Python 套件和 LibreOffice 怎麼選

python-docx、openpyxl、python-pptx 還是很實用,尤其是你已經有固定資料結構和成熟程式碼時,LibreOffice headless 也適合某些批次轉檔需求,OfficeCLI 的優勢,是它把三種 Office 文件收斂成同一套 CLI、JSON 和路徑模型,對 Agent 來說比較容易自我修正。

我會這樣選。如果只是固定模板套資料,Python 套件仍然簡單。如果要讓 Agent 自己讀一份未知文件、理解結構、修改局部、檢查品質,再回頭修正,OfficeCLI 會更接近 AI-native 的工作方式。如果團隊正在做 Codex 與 AI 代理工作流,這種工具就很值得放進標準工具箱。

可以怎麼接到 Codex

最務實的做法,是先把 OfficeCLI 當成專案工具使用。讓 Codex 讀文件、產生命令、執行修改,再用 validate 和 issues 做回饋。等流程穩定後,再寫成 skill。這和 讓 Agent 自己發現和使用 skills 的方向很一致。

舉例來說,可以做一個「每週報告 skill」。輸入資料來源後,Agent 先產生 Excel 摘要,再把重點轉成 PowerPoint,最後輸出 Word 報告。OfficeCLI 負責文件讀寫與驗證,Codex 負責資料整理、判斷和修正。若還需要把團隊知識一起查進來,也可以搭配 OpenWiki 這類 Agent 共用知識庫

我的判斷

OfficeCLI 的真正價值,是把 Office 文件從「人打開 GUI 慢慢改」變成「Agent 可以讀、改、看、驗證、再修正」的循環。它不一定取代所有 Python library,但很適合補上 AI Agent 在文件處理裡最缺的一塊:穩定操作接口加可視化回饋。

如果你的工作常常要做報表、合約、簡報、月報、批次文件修改,這類工具會越來越重要。未來的文件自動化不只是產生文字,而是讓 Agent 能理解文件結構,知道自己改了哪裡,也能在交付前先檢查成果。

延伸資源

FAQ

OfficeCLI 是什麼?

OfficeCLI 是給 AI Agent 和開發者使用的 Office 文件 CLI,可以建立、讀取、修改和驗證 Word、Excel、PowerPoint 文件。

OfficeCLI 需要安裝 Microsoft Office 嗎?

不需要。官方主打 single binary,不依賴本機 Office 安裝,適合伺服器、CI 和 Agent 執行環境。

OfficeCLI 和 python-docx、openpyxl 差在哪裡?

Python 套件適合固定程式流程。OfficeCLI 更適合 AI Agent,因為它提供一致的 CLI、JSON 輸出、路徑式元素定位、文件驗證和 HTML 或 PNG 預覽。

Codex 可以用 OfficeCLI 嗎?

可以。Codex 可以透過終端執行 OfficeCLI 命令。若把常用流程寫成 skill,就能讓 Codex 更穩定地處理報告、簡報和表格。