告別重複勞動！CLI + Skill 搭建瀏覽器 AI 自動化框架
整理版優先睇
Playwright CLI + Skill 取代 MCP：瀏覽器自動化漸進式優化，Token 成本逐步降到零
呢篇文章係由一位技術開發者分享，佢面對每日重複嘅瀏覽器操作（抓數據、發文、測試），想用AI全自動化解決，而且唔想燒Token。佢嘅方案係用微軟開源嘅Playwright CLI做瀏覽器自動化底座，配合Skill（AI Agent說明文檔），取代傳統嘅MCP方案。整體結論係：呢個組合可以大幅降低Token消耗，而且可以逐步將流程固化成腳本，最終做到零Token成本。
核心思路係「按需加載」——Playwright CLI只返回網頁摘要，詳細結構同截圖存本地，AI按需要先讀取，比起MCP嘅「全量推送」省好多Token。跟住係漸進式優化三步曲：第一步，畀AI一個任務，等佢自己摸索完成，唔怕出錯；第二步，將經驗提煉成Skill，下次做相同任務Token消耗降低約10倍；第三步，如果流程完全固定，就寫成腳本，以後直接跑，零Token成本。
文章用三個實戰案例展示——自動抓取電商評論（從41%上下文消耗降到5%）、自動發文到X平台、自動化測試Web應用。呢套方案唔單止節省Token，仲節省時間，一次投入長期受益。作者認為CLI+Skill取代MCP係大趨勢。
- 結論：CLI+Skill方案比MCP節省Token約4倍，且可漸進式優化到零成本。
- 方法：Playwright CLI只返回摘要，詳細資訊存本地按需加載；Skill沉澱經驗。
- 差異：MCP全量推送 VS Playwright CLI按需加載，Token消耗差距顯著。
- 啟發：從「AI幫你做」到「腳本替你做」，逐步降低對AI的依賴，實現自動化終局。
- 可行動點：安裝Node.js、Playwright CLI，接入AI Agent，先讓AI跑一次任務，再沉澱Skill。
結構示例
#
1. 新建項目文件夾，進入目錄#
2. 安裝 Playwright CLI 的 Skillnpx playwright-cli install-skill#
3. Skill 會安裝到 .claude/ 目錄下#
4. 啓動 Claude Code，問它"你有哪些 Skills？"#
5. 如果能列出 Playwright CLI 技能，就配置成功了環境準備同核心概念
開始之前要裝三樣嘢：Node.js、Playwright CLI同Chrome瀏覽器。裝好之後用命令 <code>playwright-cli navigate https://www.google.com --headed</code> 測試，--headed 代表有頭模式，睇到瀏覽器畫面；唔加就用無頭模式，背景運行慳資源。
仲有兩個重要參數：--headed同--persistent。--persistent 會保存Cookie同登錄狀態到磁盤，下次自動登錄，唔使重新輸入密碼。
接入AI Agent同實戰示範
Playwright CLI只係命令行工具，AI Agent唔識用，所以要搭配Skill（說明文檔）教佢點用。接入Claude Code：新建項目，執行 <code>npx playwright-cli install-skill</code>，Skill會裝到.claude目錄，啟動Claude Code問「你有哪些Skills？」睇到Playwright CLI就成功。接入Codex：將文件夾名改成.codex，輸入skills命令確認。
實戰案例一：自動抓取電商評論。第一步，畀AI任務用Playwright CLI打開商品頁，抓100條評論保存CSV。第一次AI摸索完成用咗41%上下文。第二步，叫AI將成個過程提煉成Skill。第三步，清理上下文再跑一次，消耗降到5%，效率提升約10倍。第四步，如果流程固定，叫AI寫成腳本（例如PowerShell），之後直接跑，零Token零成本。
更多實戰：發文同自動測試
實戰案例二：自動發佈文章到X平台。痛點係Markdown貼落X格式錯亂，圖片變相機圖標，要逐個刪除再貼。自動化方案：叫AI寫Python腳本下載圖片、統一編號，再用Playwright CLI打開X，貼HTML內容，自動刪除相機圖標並換成真實圖片。成個流程保存成Skill，以後畀篇文章就叫AI用Skill發佈。
實戰案例三：自動化測試Web應用。叫AI睇項目代碼，編寫測試用例，再用Playwright CLI按照步驟自動執行（註冊→登錄→創建→上傳→驗證）。搭配OpenCron定時任務，一改出Bug AI就發現通知你，省大量人手。
完整流程總結
- 1 第一步：安裝Node.js + Playwright CLI + Chrome瀏覽器。
- 2 第二步：選擇AI Agent工具（Claude Code或Codex），安裝Playwright CLI嘅Skill。
- 3 第三步：畀AI一個複雜任務，等佢自己摸索執行完成。
- 4 第四步：叫AI將執行經驗提煉成Skill，以後唔再踩同一啲坑。
- 5 第五步：重複相同任務，Token消耗降低約10倍。
- 6 第六步（可選）：完全固定嘅流程就寫成腳本，Token消耗降到零。
前言
你有冇試過咁嘅經歷——每日重複做同樣嘅嘢：拎數據、出文章、跑測試，明明都係機械操作，但係就霸咗大量時間？
如果我話你知，呢啲嘢可以俾 AI 全自動完成，甚至唔使俾一分錢嘅 Token，你信唔信？
呢套方案嘅核心思路好簡單：用 Playwright CLI 做瀏覽器自動化底座，用 Skill 做經驗沉澱，配合 Claude Code 或 Codex 呢類 AI Agent 框架。第一次俾 AI 自己摸索住完成任務，然後將過程總結成 Skill，下次再做同樣嘅事，Token 消耗直接降低 10 倍。如果係完全固定嘅流程，仲可以再進一步——俾 AI 將流程寫成腳本，以後直接行腳本，零 Token、零成本。
根據微軟官方基準測試，Playwright CLI 比起傳統嘅 Playwright MCP 方案，Token 消耗減少約 4 倍。
呢篇文章會一步步帶你行曬成個流程，由安裝到實戰，睇完就識得用。
一、環境準備
開始之前，需要裝三樣嘢：
裝好之後，跑一條命令測試下：
playwright-cli navigate https://www.google.com --headed呢條命令會自動開 Chrome，訪問 Google 首頁。--headed 表示用「有頭瀏覽器」——你睇到瀏覽器視窗。如果唔加呢個參數，Playwright 預設用無頭模式，瀏覽器喺背景靜默運行，慳記憶體但睇唔到界面。
二、Playwright CLI 點解比 MCP 更慳 Token？
呢個係核心問題，值得單獨講清楚。
MCP 嘅做法： 將成個網頁嘅 DOM 結構、截圖呢啲內容全部塞入 AI 嘅上下文。網頁越複雜，上下文越大，Token 消耗越高。
Playwright CLI 嘅做法： 只係回一個簡潔嘅網頁摘要，然後將詳細嘅網頁結構保存做本地檔案。AI 如果需要更多資訊，先至讀嗰個檔案；如果唔需要，就唔讀。
截圖都係一樣——Playwright CLI 將截圖保存到本地磁碟，AI 按需要決定係咪讀取，唔似 MCP 咁直接將圖片塞入上下文。
一句講曬：MCP 係「全量推送」，Playwright CLI 係「按需加載」。 呢個就係慳 Token 嘅秘密。
三、兩個重要參數
例如帶上 --persistent 訪問 Google，如果你之前登入過，打開嘅就係已登入狀態。
四、接入 AI Agent 框架
Playwright CLI 只係一個命令行工具，AI Agent 並唔知點樣用佢。所以我哋需要俾 AI 搭 Skill（說明文件），話俾佢知呢啲命令嘅用法。
CLI 做技術底座，Skill 做說明文件。 兩者配合使用，就可以取代傳統嘅 MCP 方式。
4.1 接入 Claude Code
# 1. 新建項目文件夾，進入目錄
# 2. 安裝 Playwright CLI 的 Skill
npx playwright-cli install-skill
# 3. Skill 會安裝到 .claude/ 目錄下
# 4. 啓動 Claude Code，問它"你有哪些 Skills？"
# 5. 如果能列出 Playwright CLI 技能，就配置成功了4.2 接入 Codex
接入 Codex 都好簡單——只需要將存放 Skill 嘅文件夾名由 .claude 改成 .codex 就得。
喺 Codex 入面輸入 skills 命令，見到 Playwright CLI 就即係配置完成。
五、實戰案例一：抓取電商評論
呢個係一個由零開始嘅完整流程示範。
第一步：俾 AI 自己摸索
俾 AI 一個任務：用 Playwright CLI 打開某商品頁面，抓取前 100 條評論，保存做 CSV 檔案。
第一次行嘅時候，AI 會磕磕絆絆——試唔同方案、遇到錯誤、自己排查。最終完成任務，但係用咗 41% 嘅上下文視窗，Token 消耗唔細。
第二步：將經驗保存做 Skill
任務完成後，輸入提示詞：
創建一個新嘅 Skill，將啱啱打開網站、睇評論、保存評論嘅成個過程，仲有遇到嘅問題，都提煉出來保存到 Skill 裏面。之後我只要叫你保存評論，你就可以叫用 Skill 完成任務。
AI 會將可重用嘅經驗固化做一個 Skill 檔案，放到項目目錄下。
第三步：再行一次同樣嘅任務
清理上下文，用相同嘅任務再測試一次。
今次有咗 Skill 嘅指導，AI 充分吸收咗之前嘅經驗，冇多餘動作，冇錯誤。
結果對比：
第四步（進階）：固化做腳本
抓評論其實係一個完全固定嘅流程，唔需要 AI 用腦。咁我可以更進一步——俾 AI 將成個過程寫成一個腳本。
你將啱啱所有嘅 Playwright CLI 命令滙總成一個腳本，執行腳本就可以獲取商品嘅前 100 條評論並保存到 CSV 檔案裏面。注意每一步都要有合理嘅延時同等待，確保任務成功。腳本寫完你先測試一輪。
AI 生成咗一個 PowerShell 腳本（Windows 環境），將每一步都固定落來：打開商品頁面 → 確認 URL → 㩒「查看全部評價」 → 執行 JS 獲取評論 → 保存做 CSV。
以後直接行呢個腳本，零 Token、零成本，仲可以得到相同嘅效果。
六、實戰案例二：自動發佈文章到 X
一個常見痛點：將 Markdown 文章發到 X 平台，步驟非常繁瑣。
問題喺邊？
• Markdown 格式直接貼到 X 會格式錯亂 • 轉成 HTML 可以貼，但係圖片會變成一個細相機圖示 • 只能手動一張張刪走圖示，再一張張貼返圖片
自動化方案：
第一步： 俾 AI 寫一個 Python 腳本，將文章入面嘅圖片下載到本地，統一編號，再用 Pandoc 轉換成 HTML 格式（每張圖獨立段落）。
第二步： 俾 AI 用 Playwright CLI 打開 X 平台，創建新文章，將 HTML 貼入去，然後自動揾曬所有細相機圖示嘅位置，逐個刪除並換成真實圖片。
第三步： 將成個流程保存做 Skill。以後只要俾 AI 一篇文章，話佢知「用 Skill 自動發佈」，就可以全自動完成。
七、實戰案例三：自動化測試 Web 應用
呢套方案仲有一個重要應用——對自己開發嘅 Web 應用進行自動化測試。
流程都好簡單：
1. 俾 AI 閲讀項目程式碼，瞭解功能同主體流程 2. 俾 AI 編寫中文測試文件（第一步做咩、第二步做咩……） 3. 俾 AI 用 Playwright CLI 打開瀏覽器，按照測試用例自動執行
例如一個簡歷美化嘅 Web 應用，AI 會自動完成：註冊 → 登入 → 創建簡歷 → 上載 → 驗證主體流程。
仲可以配合定時任務框架（例如 OpenCron），俾 AI 定期自動跑測試。一旦改出咗 Bug，AI 就可以第一時間發現並通知你，慳返大量人工測試成本。
八、完整流程總結
呢套瀏覽器自動化嘅完整流程，分六步：
第一步：安裝 Node.js + Playwright CLI + Chrome 瀏覽器
第二步：選擇 AI Agent 工具（Claude Code 或 Codex），安裝 Playwright CLI 的 Skill
第三步：給 AI 一個複雜任務，讓它自己摸索並執行完成
第四步：讓 AI 把執行經驗提煉總結成 Skill，踩過的坑不要再踩
第五步：重複相同的任務 → Token 消耗降低約 10 倍
第六步（可選）：如果是完全固定的流程，讓 AI 寫成腳本 → Token 消耗降為零
九、核心概念速查
寫在最後
呢套方案嘅精髓唔在於某個具體工具，而在於呢個漸進式優化嘅思路：
1. 先俾 AI 自己行通 — 就算磕磕絆絆，都先將任務完成 2. 再將經驗沉澱成 Skill — 踩過嘅坑唔好再踩，Token 消耗降 10 倍 3. 最後固化做腳本 — 完全自動化，零 Token 運行
由「AI 幫你做」到「腳本替你做」，呢個先係瀏覽器自動化嘅終局。
而 Playwright CLI + Skill 嘅組合，比起傳統 MCP 方案，喺 Token 消耗上有 4 倍嘅優勢。隨住 CLI 生態嘅成熟，呢種「CLI + Skill 取代 MCP」嘅趨勢會越來越明顯。
如果你有大量重複性嘅瀏覽器操作，不妨試下呢套流程——一次投入，長期受益。
前言
你有沒有過這樣的經歷——每天重複做同樣的事情：抓數據、發文章、跑測試，明明都是機械操作，卻佔掉大量時間？
如果我告訴你，這些事情可以讓 AI 全自動完成，甚至不花一分錢的 Token，你信不信？
這套方案的核心思路很簡單：用 Playwright CLI 做瀏覽器自動化底座，用 Skill 做經驗沉澱，搭配 Claude Code 或 Codex 這類 AI Agent 框架。第一次讓 AI 自己摸索着完成任務，然後把過程總結成 Skill，下次再做同樣的事情，Token 消耗直接降低 10 倍。如果是完全固定的流程，還能再進一步——讓 AI 把流程寫成腳本，以後直接跑腳本，零 Token、零成本。
根據微軟官方基準測試，Playwright CLI 比傳統的 Playwright MCP 方案，Token 消耗減少約 4 倍。
這篇文章手把手帶你走一遍完整流程，從安裝到實戰，看完就能上手。
一、環境準備
開始之前，需要裝三樣東西：
裝好之後，跑一條命令測試一下：
playwright-cli navigate https://www.google.com --headed這條命令會自動打開 Chrome，訪問 Google 首頁。--headed 表示使用"有頭瀏覽器"——你能看到瀏覽器窗口。如果不加這個參數，Playwright 默認用無頭模式，瀏覽器在後台靜默運行，省內存但看不到界面。
二、Playwright CLI 為什麼比 MCP 更省 Token？
這是一個核心問題，值得單獨說清楚。
MCP 的做法： 把整個網頁的 DOM 結構、截圖等內容全部塞進 AI 的上下文。網頁越複雜，上下文越大，Token 消耗越高。
Playwright CLI 的做法： 只返回一個簡潔的網頁摘要，然後把詳細的網頁結構保存成一個本地文件。AI 如果需要更多信息，再去讀那個文件；如果不需要，就不讀。
截圖也是一樣——Playwright CLI 把截圖保存到本地磁盤，AI 按需決定是否讀取，而不是像 MCP 那樣直接把圖片塞進上下文。
一句話總結：MCP 是"全量推送"，Playwright CLI 是"按需加載"。 這就是省 Token 的秘密。
三、兩個重要參數
比如帶上 --persistent 訪問 Google，如果你之前登錄過，打開的就是已登錄狀態。
四、接入 AI Agent 框架
Playwright CLI 只是一個命令行工具，AI Agent 並不知道怎麼用它。所以我們需要給 AI 搭配 Skill（說明文檔），告訴它這些命令的用法。
CLI 做技術底座，Skill 做說明文檔。 兩者搭配使用，就能取代傳統的 MCP 方式。
4.1 接入 Claude Code
# 1. 新建項目文件夾，進入目錄
# 2. 安裝 Playwright CLI 的 Skill
npx playwright-cli install-skill
# 3. Skill 會安裝到 .claude/ 目錄下
# 4. 啓動 Claude Code，問它"你有哪些 Skills？"
# 5. 如果能列出 Playwright CLI 技能，就配置成功了4.2 接入 Codex
接入 Codex 也很簡單——只需要把存放 Skill 的文件夾名從 .claude 改成 .codex 就行了。
在 Codex 裏輸入 skills 命令，能看到 Playwright CLI 就說明配置完成。
五、實戰案例一：抓取電商評論
這是一個從零開始的完整流程演示。
第一步：讓 AI 自己摸索
給 AI 一個任務：用 Playwright CLI 打開某商品頁面，抓取前 100 條評論，保存成 CSV 文件。
第一次跑的時候，AI 會磕磕絆絆——嘗試各種方案、遇到報錯、自己排查。最終完成任務，但用掉了 41% 的上下文窗口，Token 消耗不小。
第二步：把經驗保存成 Skill
任務完成後，輸入提示詞：
創建一個新的 Skill，把剛才打開網站、查看評論、保存評論的全過程，還有遇到的坑，都提煉出來保存到 Skill 裏面。後面我只要讓你保存評論，你就能調用 Skill 完成任務。
AI 會把可複用的經驗固化成一個 Skill 文件，放到項目目錄下。
第三步：再跑一次同樣的任務
清理上下文，用相同的任務再測一次。
這次有了 Skill 的指導，AI 充分吸取了之前的經驗，沒有多餘動作，沒有報錯。
結果對比：
第四步（進階）：固化成腳本
抓評論其實是一個完全固定的流程，不需要 AI 動腦子。那我們可以更進一步——讓 AI 把整個過程寫成一個腳本。
你把剛才所有的 Playwright CLI 命令彙總成一個腳本，執行腳本就能獲取商品的前 100 條評論並保存到 CSV 文件裏面。注意每一步都要有合理的延時和等待，確保任務成功。腳本寫完你先測試一輪。
AI 生成了一個 PowerShell 腳本（Windows 環境），把每一步都固定下來：打開商品頁面 → 確認 URL → 點擊"查看全部評價" → 執行 JS 獲取評論 → 保存成 CSV。
以後直接跑這個腳本，零 Token、零成本，還能得到相同的效果。
六、實戰案例二：自動發佈文章到 X
一個常見痛點：把 Markdown 文章發到 X 平台，步驟非常繁瑣。
問題在哪？
• Markdown 格式直接粘貼到 X 會格式錯亂 • 轉成 HTML 可以粘貼，但圖片會變成一個小相機圖標 • 只能手動一張張刪掉圖標，再一張張粘貼圖片回去
自動化方案：
第一步： 讓 AI 寫一個 Python 腳本，把文章中的圖片下載到本地，統一編號，再用 Pandoc 轉換成 HTML 格式（每張圖獨立段落）。
第二步： 讓 AI 用 Playwright CLI 打開 X 平台，創建新文章，把 HTML 粘貼進去，然後自動找到所有小相機圖標的位置，逐個刪除並替換成真實圖片。
第三步： 把整個流程保存成 Skill。以後只要給 AI 一篇文章，告訴它"用 Skill 自動發佈"，就能全自動完成。
七、實戰案例三：自動化測試 Web 應用
這套方案還有一個重要應用——對自己開發的 Web 應用進行自動化測試。
流程也很簡單：
1. 讓 AI 閲讀項目代碼，瞭解功能和主體流程 2. 讓 AI 編寫中文測試文檔（第一步做什麼、第二步做什麼……） 3. 讓 AI 用 Playwright CLI 打開瀏覽器，按照測試用例自動執行
比如一個簡歷美化的 Web 應用，AI 會自動完成：註冊 → 登錄 → 創建簡歷 → 上傳 → 驗證主體流程。
還可以搭配定時任務框架（比如 OpenCron），讓 AI 定期自動跑測試。一旦改出了 Bug，AI 就能第一時間發現並通知你，省掉大量人工測試成本。
八、完整流程總結
這套瀏覽器自動化的完整流程，分六步：
第一步：安裝 Node.js + Playwright CLI + Chrome 瀏覽器
第二步：選擇 AI Agent 工具（Claude Code 或 Codex），安裝 Playwright CLI 的 Skill
第三步：給 AI 一個複雜任務，讓它自己摸索並執行完成
第四步：讓 AI 把執行經驗提煉總結成 Skill，踩過的坑不要再踩
第五步：重複相同的任務 → Token 消耗降低約 10 倍
第六步（可選）：如果是完全固定的流程，讓 AI 寫成腳本 → Token 消耗降為零九、核心概念速查
寫在最後
這套方案的精髓不在於某個具體工具，而在於這個漸進式優化的思路：
1. 先讓 AI 自己跑通 — 哪怕磕磕絆絆，先把任務完成 2. 再把經驗沉澱成 Skill — 踩過的坑不要再踩，Token 消耗降 10 倍 3. 最後固化成腳本 — 完全自動化，零 Token 運行
從"AI 幫你做"到"腳本替你做"，這才是瀏覽器自動化的終局。
而 Playwright CLI + Skill 的組合，比起傳統 MCP 方案，在 Token 消耗上有 4 倍的優勢。隨着 CLI 生態的成熟，這種"CLI + Skill 取代 MCP"的趨勢會越來越明顯。
如果你有大量重複性的瀏覽器操作，不妨試試這套流程——一次投入，長期受益。