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

參考資料

Voicebox 是什麼?本地 AI 語音工作室與 Agent 發聲工具

Voicebox 是什麼?本地 AI 語音工作室與 Agent 發聲工具

Voicebox 最吸引我的地方,是它不是只做 TTS,也不是只做 Whisper 聽寫,而是把語音輸入、語音輸出、聲音克隆、故事編輯器、REST API 和 MCP server 放在同一個本地優先的工具裡。這讓 AI Agent 不只會回文字,也能用你指定的音色說話。

如果說過去的語音工具常常分成兩邊,ElevenLabs 偏輸出,WisprFlow 偏輸入,那 Voicebox 想做的是完整 voice I/O stack。更重要的是,它預設把模型、聲音資料和錄音留在本機,這對語音克隆和工作資料來說很關鍵。

先講結論

Voicebox 是 Jamie Pine 開源的 AI voice studio,官方定位是 local-first。它可以做文字轉語音、聲音克隆、全域快捷鍵聽寫、Whisper 轉錄、故事多軌編輯,還能透過 REST API 和 MCP server 讓 Claude Code、Cursor、Cline 這類 MCP-aware agent 發聲。

我會把它放在「本地語音 AI 底座」這一類,之前整理過 audio.cpp 本地語音 AI WebUIHugging Face speech-to-speech 本地語音 Agent,Voicebox 則更偏向桌面應用和創作者工具,並且把 Agent 整合做得很直接。

Voicebox 本地語音輸入輸出與 MCP Agent 整合流程圖
Voicebox 把聽寫、轉錄、配音和 Agent 語音輸出放在同一個本地工具裡。

Voicebox 在補語音 AI 的哪一塊

很多語音工具只有單點能力。TTS 工具能把文字變聲音,但不一定能做聽寫。STT 工具能轉錄,但不一定能配音。聲音克隆工具效果強,但常常依賴雲端 API。Voicebox 的取向比較完整:輸入端用 Whisper,輸出端有多個 TTS 引擎,中間還有本地 Qwen3 LLM 做潤飾、角色語氣和 persona。

這種整合方式很適合兩種人:

第一種是內容創作者,想做旁白、podcast、故事對話、角色音色。

第二種是 AI Agent 使用者,想讓 Claude Code、Cursor 或自己的工具在完成任務後,用指定聲音提醒你,而不是只丟一段文字。

7 個 TTS 引擎和 23 種語言

官方 README 列出 7 個 TTS 引擎:Qwen3-TTS、Qwen CustomVoice、LuxTTS、Chatterbox Multilingual、Chatterbox Turbo、HumeAI TADA 和 Kokoro。它們的定位不同,有的適合多語言克隆,有的適合 CPU 快速推理,有的適合加入情緒標籤和語氣控制。

能力Voicebox 的做法適合用途
高品質 TTSQwen3-TTS、Chatterbox、HumeAI TADA 等引擎旁白、教學、產品介紹
聲音克隆用參考音訊做 zero-shot cloning個人聲音、角色聲音、品牌聲線
快速預設音色Kokoro 和 Qwen CustomVoice 提供 50+ 音色快速試稿、多角色對話
語音輸入全域快捷鍵加 Whisper STT聽寫、轉錄、工作筆記

如果你對開源 TTS 的音色設計有興趣,可以搭配看 Qwen3-TTS 的音色設計整理dots.tts 聲音復刻架構。Voicebox 比較像把這些能力打包成桌面工作台,而不是單一模型 demo。

聲音克隆和預設音色的差別

聲音克隆適合你有一段參考音訊,想生成相似聲線。預設音色適合你只是要快速找一個可用聲音,不想準備樣本。Voicebox 同時支援兩種路線,這點很實用。創作者可以先用預設音色打草稿,確定文本節奏後,再換成克隆音色做正式版本。

但聲音克隆也有界線。它很適合克隆你自己擁有權利的聲音,或明確授權的角色聲音。不要拿來模仿名人、同事或客戶聲音做未授權內容。語音模型越容易使用,倫理和授權越要先想清楚。

Whisper 聽寫補上輸入端

Voicebox 的另一半是輸入。它用 OpenAI Whisper 做 speech-to-text,支援全域 dictation hotkey、push-to-talk 和 toggle mode。macOS 上可以把轉錄結果直接貼到目前焦點文字欄位,這會讓它接近一個本地版語音輸入法。

Whisper 對長音訊和技術內容一直很適合。如果你常做訪談、會議紀錄、口述筆記,Voicebox 把 captures、replay、re-transcribe、refine 放在同一個介面裡,會比單純命令列轉錄更順。這裡也可以延伸看之前整理的 Whisper 開源語音轉文字

MCP 讓 Agent 真的開口說話

Voicebox 最有意思的一點,是內建 MCP server,官方 README 寫到它提供 `voicebox.speak`、`voicebox.transcribe`、`voicebox.list_captures`、`voicebox.list_profiles` 四個工具,這代表 MCP-aware agent 可以呼叫 Voicebox,把文字變成指定音色播放出來,也可以讀取 captures 和 voice profiles。

這不只是好玩。Agent 的語音輸出可以拿來做任務完成提醒、錯誤警告、長任務回報、pair programming 對話。你甚至可以把不同 agent 綁定不同聲音,例如 Claude Code 用一個音色,Cursor 用另一個音色,聽聲音就知道是哪個工具在回報。

{
  "tool": "voicebox.speak",
  "arguments": {
    "text": "任務完成,測試已通過",
    "profile": "Morgan"
  }
}

如果你已經在玩 Playwright CLI 讓 Codex 操作瀏覽器,Voicebox 可以補上另一個感官通道。Agent 不只可以操作網頁,也能在完成後直接用語音提醒你。

Stories editor 適合做多角色內容

Voicebox 也有 Stories editor,可以做 conversation、podcast、narrative 這類多段落、多角色內容。這對部落格轉 podcast、教學腳本、角色對話、短劇旁白都很有用。比起一次產生一整段音訊,多軌 timeline 更適合慢慢調整角色、節奏和轉場。

如果你平常會把文章轉成短影片或語音內容,Voicebox 可以放在內容工作流後段。先由 Agent 整理稿件,再用 Voicebox 做角色分配和配音,最後再進剪輯工具。

安裝與使用入口

Voicebox 官方網站是 voicebox.sh,GitHub repo 是 jamiepine/voicebox。官方 README 提供 macOS Apple Silicon、macOS Intel 和 Windows 下載入口,也有開發者本地建置方式。

我會怎麼用

我不會只把 Voicebox 當成免費配音工具:

更有價值的用法,是把它接進 AI Agent 工作流,平常寫文章、整理筆記、跑 Codex、跑 Claude Code,最後都可以由 Voicebox 轉成語音摘要。長任務完成時不用一直盯螢幕,讓 Agent 開口提醒就好。

第二個用法是做內容實驗,先用預設音色快速產出版本,再用克隆音色做正式版。

第三個用法是本地聽寫,把口述想法直接丟進任何 app,再交給 Agent 整理。這會比只靠鍵盤更接近自然工作流。

我的判斷

Voicebox 不是單一模型展示,而是把語音 AI 變成桌面工作台。它的亮點不是某個 TTS 引擎本身,而是整合:本地隱私、TTS、STT、故事編輯、聲音 profile、REST API、MCP server。

如果你只需要偶爾產一段聲音,線上 TTS 服務可能更快。但如果你想要長期建立自己的聲音素材庫、做本地聽寫、讓 Agent 用聲音回報任務,Voicebox 會是值得試的工具。

延伸資源

FAQ

Voicebox 是什麼?

Voicebox 是開源的本地優先 AI 語音工作室,可以做 TTS、聲音克隆、Whisper 聽寫轉錄、故事編輯和 MCP Agent 語音輸出。

Voicebox 可以離線使用嗎?

官方定位是 local-first,模型、聲音資料和 captures 會留在本機。實際能否完全離線,取決於你是否已下載需要的模型和使用的引擎。

Voicebox 支援哪些 TTS 引擎?

官方列出 Qwen3-TTS、Qwen CustomVoice、LuxTTS、Chatterbox Multilingual、Chatterbox Turbo、HumeAI TADA 和 Kokoro。

Voicebox 可以接 Claude Code 或 Cursor 嗎?

可以。Voicebox 內建 MCP server,MCP-aware agent 可以使用 `voicebox.speak`、`voicebox.transcribe`、`voicebox.list_captures` 和 `voicebox.list_profiles`。

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 更穩定地處理報告、簡報和表格。

Playwright CLI 是什麼?讓 Codex 用 CLI 操作瀏覽器

Playwright CLI 是什麼?讓 Codex 用 CLI 操作瀏覽器

Playwright CLI 這個方向很值得注意,因為它把瀏覽器自動化從「大型工具協議」拉回成 coding agent 很擅長使用的 CLI 指令,對 Codex、Claude Code、GitHub Copilot 這類工具來說,差別不只是能不能操作網頁,而是能不能用更少上下文、更少 token、更穩定地完成重複任務。

以前要讓 Agent 操作瀏覽器,常見做法是 MCP、Chrome extension、CDP debug port,或直接寫 Playwright 程式。這些方法各有好處,但也都有代價,Playwright CLI 的取向很清楚:把常見瀏覽器操作包成簡短命令,搭配 skill 讓 Agent 知道怎麼用。

先講結論

Playwright CLI 是 Microsoft 推出的 Playwright 命令列工具,我們以前常常用他的程式庫,也有用過他的 MCP ,現在官方 README 直接寫它是 Playwright CLI with SKILLS,它可以 open、goto、click、type、snapshot、find、screenshot、console、requests、trace、video,也有 `show` dashboard 可以觀察背景裡的 browser sessions。

我會把它定位成 AI coding agent 的瀏覽器手腳,MCP 比較像完整工具層,Playwright CLI 則像可被 Agent 快速呼叫的瀏覽器 shell。大型專案裡,Agent 一邊改程式、一邊跑 UI、一邊截圖驗證,CLI 路線通常更省上下文。

為什麼 CLI 比 MCP 更省

官方 README 對這點講得很清楚,CLI 加 skill 的好處,是不需要把大型 tool schema 和冗長 accessibility tree 塞進模型上下文。Agent 只要呼叫目的明確的命令,再讀回 snapshot 或輸出檔,就能完成下一步。

這也解釋了為什麼有人把原本基於 Chrome Dev MCP 的 skill 改成 Playwright Python 或 CLI 流程後,速度可以明顯變快。核心不是 Playwright 比 MCP 神奇,而是把探索階段標準化成腳本後,就不需要每次都消耗大量 token 重新推理。

Playwright CLI 和 MCP 在 coding agent 工作流中的差異圖
CLI 加 skill 適合高頻、可標準化的瀏覽器任務。MCP 仍適合需要長時間持續狀態與豐富頁面 introspection 的探索型工作。

它能做什麼

Playwright CLI 的命令很完整,已經不是只打開網頁和截圖而已。核心操作包含 `open`、`goto`、`type`、`click`、`fill`、`drag`、`hover`、`select`、`upload`、`check`、`snapshot`、`find`、`eval`。也有 console、network requests、trace、video 和 locator 生成。

這讓它不只是測試工具,也可以變成瀏覽器自動化框架。舉例來說,Agent 可以先 `open` 網頁,再用 `snapshot` 取得頁面狀態,用 `find` 找文字或元素,用 `click` 和 `fill` 操作表單,最後 `screenshot` 留存結果。這種流程很適合寫進 skill,之後重複執行。

自動發文、自動測試、社群互動

Playwright CLI 最容易落地的場景,是把每天都要重複打開瀏覽器完成的事,變成可檢查、可重跑、可留紀錄的工作流。它可以用在自動發文,例如登入 WordPress、填標題、貼上 Gutenberg HTML、上傳圖片、儲存草稿。這不一定要取代 API,而是當某些後台沒有好用 API 時,讓 Agent 仍然能用瀏覽器完成同一件事。

第二個場景是自動測試。Agent 可以開啟本機開發站、測登入流程、點選主要按鈕、檢查表單錯誤、看 console、抓 network requests、最後截圖留存。這種流程很適合接在 Codex 修改程式之後,讓它不是只改完程式就停下來,而是自己打開畫面驗證一次。

第三個場景是社群互動。以 Facebook 為例,它可以幫你打開指定頁面、整理新貼文、判斷哪些內容和你關心的主題相關,再把候選清單列出來讓你確認。確認後再執行點讚、收藏或回覆,會比完全自動亂點安全很多,也比較不容易違反平台規範。

我會把這類流程設計成「Agent 先整理,人再批准,Agent 再執行」。自動發文可以先存草稿,自動測試可以直接跑,自動社群互動則最好保留人工確認。這樣 Playwright CLI 才不是單純的瀏覽器代點工具,而是把人的判斷和 Agent 的執行力接在一起。

安裝方式

官方安裝方式很直接,Node.js 需要 18 以上。

npm install -g @playwright/cli@latest
playwright-cli --help

如果要讓 Claude Code、GitHub Copilot 等工具讀到本機 skill,可以執行。

playwright-cli install --skills

最小 demo 可以這樣跑。

playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli screenshot

但 codex 他不會也一起安裝,記得將 ~/.claude/skills/playwright-cli 手動複製一份到 ~/.codex/skills/playwright-cli

Session 是實用關鍵

Playwright CLI 預設會在記憶體裡保留 browser profile,也就是說,同一個 session 裡 cookies 和 storage state 可以跨 CLI calls 保留,但瀏覽器關掉後會消失。如果需要跨重啟保留登入狀態,可以加 `–persistent`。

這對日常 Web 工具很有用。很多雲端服務沒有 API,或 API 權限很麻煩,但網頁端功能完整。只要能穩定接管已登入的 browser session,Agent 就能把一段 GUI 操作變成 CLI 流程,再逐步沉澱成可重複腳本。

playwright-cli -s=work open https://example.com --persistent
PLAYWRIGHT_CLI_SESSION=work claude .

Dashboard 讓你能接管 Agent 的手

`playwright-cli show` 是我很喜歡的一個設計。它會開啟 visual dashboard,讓你看到所有 running browser sessions,有 grid view 和 session detail,當 Agent 在背景操作時,你可以觀察它走到哪裡,也可以接管滑鼠鍵盤介入。

這比完全黑箱的自動化舒服很多,尤其是登入、二階段驗證、付款頁、複雜後台這類任務,最好不要讓 Agent 完全盲跑。Dashboard 讓人和 Agent 可以輪流掌控同一個 browser session。

跟 Chrome extension、CDP、Browser MCP 怎麼選

這幾條路線我會這樣分。Chrome extension 適合直接接你的日常瀏覽器,登入態和擴充功能都在,但穩定性和權限邊界要看實作。CDP debug port 很直接,也常被大型模型理解,但安全邊界要自己管。Browser MCP 適合需要豐富頁面 introspection 的任務,但上下文成本可能比較高。

Playwright CLI 的定位則是把常見動作變成可觀察、可重複、可腳本化的命令。它不一定取代所有方案,但很適合放在 Codex 作為 AI 代理 的日常工作流裡,需要更高階的瀏覽器自動化,也可以對照 Stagehand 的 AI 瀏覽器自動化

真正的價值是把 GUI 操作沉澱成 Skill

一次性的瀏覽器操作不稀奇。真正有價值的是,Agent 第一次探索成功後,把流程改寫成 CLI 或 Python 腳本,下次就不用再讓模型從頭看畫面。這也是留言裡很有用的一個實測方向:原本要跑很久又吃 token 的流程,改成標準化腳本後,可以變成十幾秒完成。

這和 讓 Agent 自己搜尋和安裝 skills 的方向可以接起來。Skill 不只是教學文件,而是把成功流程變成下一次可以直接使用的能力。

我會怎麼導入

第一步先拿一個低風險網站測 `open`、`snapshot`、`find`、`click`、`screenshot`。不要一開始就碰重要帳號。第二步把常用流程拆成固定腳本,例如登入後查狀態、下載報表、填表單、截圖回報。第三步才把流程寫成專案 skill,讓 Codex 或 Claude Code 在需要時自動呼叫。

如果是團隊環境,我會把 session 名稱固定,例如 `qa-app`、`admin-staging`、`docs-preview`。這樣 Agent 不會混用瀏覽器狀態,也比較容易透過 dashboard 觀察。這和 多 Agent 協作工作流 也很搭。

我的判斷

Playwright CLI 的重點不是多一個瀏覽器控制工具,而是把 Agent 做 GUI automation 的方式變得更工程化。先探索,再標準化,再變成 skill。這條路線會比讓模型每次重看整個頁面更可靠,也更省。

如果你平常會讓 Codex 幫你跑網頁測試、填後台、截圖、查 console、看 network request,Playwright CLI 很值得放進工具箱。MCP 仍有價值,但 CLI 加 skill 會是很多高頻任務更輕的解法。

延伸資源

FAQ

Playwright CLI 和 Playwright MCP 差在哪裡?

Playwright CLI 偏向簡短命令和 skill 工作流,適合高頻 coding agent 任務。Playwright MCP 更適合需要持續狀態、豐富頁面 introspection 和長時間探索的任務。

Playwright CLI 可以保留登入狀態嗎?

可以。同一個 session 內 cookies 和 storage state 會保留。如果要跨瀏覽器重啟保存,可以用 `–persistent`。

Codex 可以使用 Playwright CLI 嗎?

可以。Playwright CLI 是命令列工具,Codex 可以透過終端指令使用它。若搭配 skill,Agent 更容易知道該怎麼拆解瀏覽器操作流程。

什麼任務最適合用 Playwright CLI?

最適合可重複、可腳本化的網頁任務,例如表單操作、UI 測試、截圖驗證、console 檢查、network request 檢查和後台例行操作。

OpenWork 是什麼?OpenCode 桌面工作台與本地 Agent 入門

OpenWork 是什麼?OpenCode 桌面工作台與本地 Agent 入門

OpenCode 和 OpenWork 這組工具,真正值得看的地方不是「又一個 Claude Code 替代品」而已,而是它把 AI Agent 從純命令列往桌面工作台推了一步, OpenCode 負責 agentic coding 的核心能力,OpenWork 則把工作目錄、Session、Skill、Plugin、MCP、權限確認和遠端 worker 包成比較容易操作的圖形介面。

這條路線剛好踩在很多人的痛點上:Claude Code 好用,但成本、封閉性和模型選擇會卡住;Codex 很適合開發工作,但一般辦公流程、跨工具流程、團隊共享設定,還需要另一層產品化介面, OpenWork 的企圖就是把 opencode 這套底層能力包成「可以給團隊重複使用的 Agent 工作流」。

如果你之前已經在看 OpenCode 如何使用本地端模型,這篇可以當成下一步:不只讓模型接進來,而是把 skills、plugins、MCP 和權限流程一起整理成可操作的工作台。

OpenWork 是 opencode 的桌面層,不是另一個單純聊天 App

OpenWork 官方把自己定位成 Claude Cowork 和 Codex 的開源替代方案,它是一個 local-first 的桌面 app,背後 powered by opencode 你可以在本機跑 host mode,也可以用 client mode 連到既有 OpenCode server, 之後透過 UI 管理 session、看 streaming event、處理 permission request、管理 templates、安裝 skills 和 plugins。

這個定位很重要。OpenWork 不是要取代 OpenCode,而是把 OpenCode 原本比較偏開發者的 CLI 體驗,變成更像工作台的產品。OpenCode 擅長讀檔、改檔、跑工具、處理任務;OpenWork 則負責讓這些能力變得可視化、可審核、可分享。

這也是我覺得它和 用 AI 組一家公司那篇可以放在一起看:真正有價值的不是單一模型多會回答,而是能不能把一套工作流程產品化,讓人、Agent、工具和權限一起運作。

OpenCode 和 OpenWork 的分工

這兩者的分工:

項目OpenCodeOpenWork
核心角色AI coding agent 與 CLI/Server 核心桌面工作台與協作介面
使用者體驗偏工程師、命令列、設定檔偏圖形介面、session、權限與模板
擴充方式plugins、agents、SDK、生態資源skills manager、plugins、MCP、templates
適合場景開發、專案自動化、終端機工作流把 Agent 流程包成團隊可重複使用的工作台

OpenWork README 裡有一句很關鍵:它是 ejectable 意思是就算 UI 還沒包到某個能力,只要底層 OpenCode 能做,理論上還是可以回到底層去做。這是開源工具很重要的特性,因為你不會被單一 UI 的產品進度完全卡死。

安裝與模式:先分清楚桌面 App、Host mode、Client mode

OpenWork 有幾種使用方式。最直覺的是下載桌面 app;如果你想自己 build,就要準備 Node.js、pnpm、Bun、Rust/Tauri、OpenCode CLI 官方 source build 流程大致是:

git clone https://github.com/different-ai/openwork
cd openwork
git checkout dev
pnpm install --frozen-lockfile
pnpm dev
如果只想跑 CLI host,也可以用 OpenWork Orchestrator:

npm install -g openwork-orchestrator
openwork start --workspace /path/to/workspace --approval auto

這裡要注意一件事:OpenWork 的 Host mode 會在本機跑 host stack,預設綁在 127.0.0.1 Client mode 則是連到既有的 OpenCode server,如果你看到 ready 是灰色、New task 不能按,第一個方向不是懷疑模型,而是檢查工作目錄、host stack、OpenCode server、provider key 或本地模型連線是否真的準備好。

Skills、Plugins、MCP:OpenWork 真正有用的地方

OpenWork 的 Skills manager 可以列出 `.opencode/skills`,也能把本地 skill folder 匯入到 `.opencode/skills/<skill-name>` 這個方向很像 Claude Code / Codex 的 skills 概念:把常用工作流程寫成可重複使用的操作說明,讓 Agent 每次做事不用從零開始猜。

如果你站上看過 用 skill-creator 建立 Skill,OpenWork 這裡的邏輯也很接近:與其每次都寫一長串 prompt,不如把工作流程變成可安裝、可分享、可版本化的能力。

Plugin 則是 OpenCode 的原生擴充方式。OpenWork 會讀寫 `opencode.json`,Project scope 在工作目錄的 `opencode.json`,Global scope 通常在 `~/.config/opencode/opencode.json`。

awesome-opencode 這個 repo 則像是生態目錄,整理了 plugins、themes、agents、projects 和 resources 它不是核心工具,但很適合用來觀察 opencode 生態正在長出哪些周邊能力。

Build Mode 和 Plan Mode:不要一開始就讓 Agent 放手改

OpenCode 這類 agentic tool 最容易出問題的地方,是使用者還沒搞清楚任務邊界,就直接讓 Agent 進入執行狀態。比較穩的做法是先用 Plan Mode 讓它讀資料、拆任務、確認工具與風險,再進 Build Mode 讓它動手。

我會把它想成兩層:

  • Plan Mode:先觀察、讀檔、列步驟、找不確定性、提出執行順序。
  • Build Mode:開始改檔、跑命令、安裝依賴、呼叫工具、產出結果。

這和 Claude Code Workflow 裡的做法一致:先讓 Agent 把路線講清楚,再授權它動手。

AI Agent 的效率不是靠更衝,而是靠每一步都能回頭檢查。

本地模型與 Ollama:重點在 provider 設定,不是只裝好模型

很多人以為「Ollama 已經能跑模型」就等於 OpenWork 會自動看到它,但中間還差 provider 設定、base URL、模型名稱,以及 OpenCode / OpenWork 讀取設定檔的位置。

原則上,你要確認三件事:

  1. Ollama server 已經在跑,常見位置是 `http://localhost:11434`,遠端機器則要確定防火牆與 bind address。
  2. OpenCode 的 provider 設定有指到 Ollama 或 OpenAI-compatible endpoint。
  3. OpenWork 使用的 workspace / dev-mode / global config,和你實際編輯的設定檔是同一份。

這部分可以搭配 Ollama 遠端連線教學LM Studio 與 Ollama 的零 API 成本環境一起看 OpenWork 不是魔法入口,它還是要靠底層 provider 設定把模型接起來。

Token 成本:免費模型不等於無限使用

免費通常代表某段時間、某個額度、某個服務條款下不用付費,不代表可以無限燒,也不代表 latency、rate limit、上下文長度和品質都沒有代價。

OpenCode / OpenWork 這種工具特別容易消耗 token,因為 Agent 會讀檔、反覆規劃、呼叫工具、看輸出、再修正你讓它處理一個大型 workspace,成本不是只有最後回答那幾百字,而是整個工作循環。

所以比較實際的策略是:

  • 簡單查詢與短任務用便宜或本地模型。
  • 高風險修改、跨檔案重構、複雜判斷再用強模型。
  • 能寫成 skill / template 的流程就固化,減少每次重新解釋。
  • 先 Plan 後 Build,避免 Agent 一路試錯燒成本。

Windows 使用者要先注意的幾個坑

Windows 問題不少,這也很符合這類 Tauri / Node / CLI 混合工具的現況。

OpenWork README 也有提到,Windows access 有一部分是透過 paid support plan;source build 則會牽涉 Node、pnpm、Bun、Rust、Tauri 和 OpenCode CLI。這不是一般雙擊安裝就結束的輕工具。

  • Ready 灰色:先檢查 host stack 是否啟動、workspace 是否選對、provider 是否可用。
  • New task 灰色:通常表示前置狀態未完成,例如沒有有效 session、工作目錄或 worker 尚未 ready。
  • nul 檔案問題:Windows 下 `nul` 是特殊裝置名,如果工具誤產生同名檔,刪除會很麻煩。這種問題要優先回報 issue,並避免在重要目錄直接測不穩定版本。
  • `.config` 目錄看起來不對:要確認你看的到底是 OpenCode global config、workspace config,還是 dev-mode 隔離狀態。

這裡我會建議用比較保守的方式測:先開一個乾淨測試資料夾,不要直接指到重要專案;先確認 session、provider、permission、簡單讀寫任務都正常,再把 OpenWork 放進真正的工作流程。

OpenWork 適合誰?

OpenWork 現階段比較適合三種人。

  • 第一種是想把 OpenCode 圖形化的人。你已經接受 agentic coding,但希望有 session、permission、skills、plugins 的視覺工作台。
  • 第二種是想把 Agent 工作流交給團隊的人。Templates、skills、remote sharing 這些能力,重點都是讓流程可以重複與分享。
  • 第三種是正在比較 Claude Code、Codex、OpenCode 生態的人。OpenWork 讓 opencode 不只停留在 CLI,而是開始往產品化入口走。

但如果你現在只想要一個穩定、少設定、打開就能工作的辦公 AI,OpenWork 可能還會讓你覺得太工程化。它的價值在於可控與可擴充,不在於完全隱藏複雜度。

資源整理

截至我整理資料時,OpenWork GitHub repo 約 1.6 萬 stars,awesome-opencode 約 8 千多 stars 這代表生態正在被快速關注,但也代表文件、Windows 體驗、plugin 相容性和錯誤處理還會持續變動。用它之前要有「早期開源工具」的心理預期。

OpenWork 把 OpenCode 從工具變成工作台

OpenCode 已經回答了「AI Agent 能不能在 terminal 裡幫我做事」;OpenWork 想回答的是下一題:「這套能力能不能被包成一個可視化、可分享、可審核的工作台?」

現階段最好的用法,是先用 OpenCode 跑穩本地模型、provider、skills 和 plugins,再用 OpenWork 管理 session、權限、template 與團隊共享流程。

OpenWork 的重點不是多一個聊天視窗,而是讓 opencode 的 Agent 能力開始變成「可交付的工作流程」。這會是 2026 年 AI 工具很重要的一條線。

FAQ

OpenWork 是什麼?

OpenWork 是 powered by opencode 的開源桌面工作台,讓使用者在本機或遠端 server 上管理 AI Agent session、skills、plugins、MCP、templates 與權限確認。

OpenWork 和 OpenCode 有什麼差別?

OpenCode 是底層 AI coding agent 與 CLI/Server 核心;OpenWork 是圖形化桌面層,負責把 session、權限、skills、plugins、templates 與工作目錄變得更容易操作。