AGENT SKILL 一日工作坊 · 階梯 8

讓 AI 直接
開你的瀏覽器辦事

這一段是今天視覺衝擊最強的環節。你親眼看著瀏覽器自己打開、自己點、自己抓資料。但真正有價值的，不是「看一次」，而是把這個操作腳本化，下次一句話就重跑。

⏱ 約 22 分鐘 8 頁 · 由連接到應用 免裝 Playwright MCP
這一階的精神：把一次性的手動操作，固化成一句話就能重複的能力。瀏覽器是工具，腳本化才是目的。

學習目標

這 22 分鐘，你帶走一個真實能力

今天的目標

讓 AI 真的開一個瀏覽器，自動到網頁上做事、抓資料、截圖。不是概念，是你親手跑一次。

  • 開啟指定網址
  • 讀取頁面標題與內容
  • 截圖回傳

你帶走什麼

理解「AI 能操作瀏覽器」這件事，以及一個能抓網頁資料的可重跑腳本。

  • 親眼看瀏覽器自動執行
  • 一句話觸發同樣操作的腳本
  • 應用到 SEO 競品分析
這一段是視覺衝擊最強的環節。操作完的腳本化，才是你真正的收穫，讓同樣的操作一句話就能重跑。

講師帶做 · 10 分鐘

今天不另外裝 Playwright MCP，用手邊工具自帶的就好

路線 A
Claude 桌面 App

用內建的「Claude in Chrome」功能，連上你的 Chrome。Claude 就能直接操作瀏覽器分頁，不需要額外設定。

路線 B
codex

codex 也有自帶的瀏覽器控制能力，做法類似。授權一次之後，後續操作方式相同。

少一道安裝，少一個卡關點。你手邊的工具已經夠了，今天就直接用它。

底層原理 + 核心精神

AI 怎麼遙控 Chrome，還有開完要做什麼

CDP 是什麼

Chrome DevTools Protocol，一套讓程式遙控 Chrome 的標準接口。Chrome 開了一個給程式用的「遠端控制入口」，AI 透過這個入口點按鈕、讀內容、截圖。你完全不用懂它怎麼運作，知道「有這個東西，AI 才能開瀏覽器」就夠了。

這段的核心精神

操作完，叫它把剛剛走過的步驟存成可重跑的腳本。瀏覽器操作最有價值的地方，不是「看 AI 點一次」，是下次同樣的事，一句話就重跑，不用再手動點一遍。

記住這句話：「你學會的不是開一次瀏覽器，是把這個操作變成一句話就能重跑的能力。」這正是今天從頭到尾一脈相承的精神。

全員動手 · 10 分鐘

第一條指令：開瀏覽器、抓標題、截圖

# 對 Claude Code 或 codex 說這句話 開瀏覽器，到 https://example.com， 把頁面上最大的標題抓給我，然後截一張圖。
1 瀏覽器視窗自動打開
2 導航到指定網址、讀取頁面內容
3 抓回最大標題文字、截圖回傳
→ 跑完後，叫它：「把剛剛這套步驟存成腳本或 skill」

關鍵動作

跑完之後，存成腳本，下次一句話重跑

沒有腳本化

每次需要抓頁面，都要重新說一遍指令、等它執行、確認結果。是一次性的手動動作。

  • 每次從頭說指令
  • 重複等待執行
  • 無法交接給他人

有了腳本

下次同樣的場景，貼一句話：「跑 fetch-title.js」。它自動打開瀏覽器、抓標題、截圖、回傳。你一秒都不用等。

  • 一句話重跑整套流程
  • 可交給他人直接使用
  • 能排進排程自動執行
對 AI 說這句話：「把剛剛這套步驟存成一個可重跑的腳本（或 skill），讓我下次一句話就能執行同樣的操作。」

SEO 實戰應用 · 15 分鐘

抓競品頁面結構，一分鐘出分析摘要

# 基本版：單一競品分析 開瀏覽器，到這個競品文章網址（貼上）， 幫我抓出：頁面標題、所有 H2 小標、 文章字數、有沒有 FAQ 區塊。 整理成一份競品分析摘要。
進階版（技術端選做）：先用 serper 拿「關鍵字」前三名的網址，再用瀏覽器逐一打開、各自抓 H2 結構，比較哪些主題不能漏。
（不要直接讓瀏覽器去 Google 搜尋頁，容易卡驗證碼；用 serper 拿 URL 更穩）

卡關排查 + 混合班分層

卡住了？三個常見原因，一一排掉

瀏覽器沒連上

確認 Claude 桌面 App 的 Chrome 連線已開、或 codex 的瀏覽器權限已給。第一次用會跳授權視窗，記得按「允許」。

現場 WiFi 壓力大

第一次初始化可能需要下載瀏覽器元件，現場 WiFi 壓力大時請學員分批跑，或由講師示範一次全班看。

網站擋自動化

換一個友善的網站示範（如 example.com 或靜態頁面），不要卡在有反爬蟲機制的網站。

混合班分層：行銷端跑通「開瀏覽器→抓標題→截圖」就達標。技術端做競品 H2 結構比較、SERP 前三名分析。
Agent Skill 工作坊 · 階梯 8 · 瀏覽器自動化