Coolkid mascot CoolkidLab Build in Public. Level up together.
首頁新手教學免費工具AI 新聞GitHub 精選服務關於 Coolkid

新手教學 · 進階玩法

讓 Claude 自己開網頁操作:我每天在用的方法

閱讀
摘要

短答給趕時間的人:Claude 除了「讀」網頁(貼網址就好),還能「操作」網頁:自己開瀏覽器、點按鈕、填欄位、捲頁面、截圖回報。三種接法由淺入深:官方 Chrome 擴充(用你平常的瀏覽器)、Claude Code 自己的瀏覽器(乾淨隔離的分頁)、MCP 瀏覽器工具(自由度最高)。我每天用最多的場景是網站驗收:改完網站叫它自己開頁面檢查、截圖給我看,人只看結果。

我大量用這功能的起點,是被自己的網站檢查流程煩到。

每次改完版面,要自己開瀏覽器、看桌機版、看手機版、切深色模式、確認沒跑版。

一輪十分鐘,一天改五次就是五十分鐘。

後來把這整段外包:「改完自己開頁面檢查,深色淺色各截一張圖回報」。從此我只看截圖。

這篇講讀跟操作差在哪、三種接法怎麼選,還有我的安全邊界。

「讀網頁」跟「操作網頁」差在哪?

先把這兩件事分清楚。

「讀網頁」實際上是在做什麼?你貼網址,內容被抓回來讀,這是「看」,大部分 AI 都會。

操作網頁是開一個真的瀏覽器,像人一樣點按鈕、填表單、捲動、等頁面載入、截圖,這是「動手」。

差別在能做的事:讀只能處理「內容」,操作能處理「流程」。

登入後才看得到的頁面、要點三層選單才出現的設定、填完表單才知道的結果,都要靠操作。

白話判斷:你的需求用「看」就能解決,貼網址就好;需求裡有「然後點…然後填…」,才需要操作。

三種接法,新手從最現成的開始

接法白話定位適合誰
官方 Chrome 擴充AI 進駐你平常的瀏覽器,登入狀態都在想最快開始、在自己常用網站上用
Claude Code 內建瀏覽器它自己開乾淨的分頁,跟你的瀏覽器隔離做網站的人:驗收、測試自己的頁面
MCP 瀏覽器工具接一個瀏覽器工具給它,自由度最高已經懂 MCP、要客製流程的人

要選哪一種?其實不難。

一般人從官方 Chrome 擴充開始,裝完你的瀏覽器就多一個 AI 同事。

有在做網站的人,用 自己那個瀏覽器更好用,它在隔離的分頁裡動,不會弄亂你自己開的東西。

那條路自由度最高,但先看過 MCP 那篇再來。

我每天在用的三個場景是什麼?

場景一:網站驗收自動化(用最兇)。

改完網站,一句「自己開頁面檢查,手機版和深色模式各截一張回報」就好。

然後就會自己開瀏覽器、調視窗大小、切主題、截圖。

我從每輪十分鐘的手動檢查,變成只看截圖點頭。做網站的人光這招就值回票價。

場景二:對照著看別人的頁面。

研究同類網站的結構(標題怎麼下、段落怎麼排),讓瀏覽器工具開頁面整理成表格,比自己開十個分頁逐一看快得多。

場景三:表單和流程測試。

自己網站的訂閱表單、按鈕連結,逐一點過填過,回報哪個壞了。上線前的固定儀式。

安全邊界:讀跟看隨便,送出去的自己按

操作的是真的網頁,所以邊界要先講好:哪些可以放手,哪些不行?

我的原則一句話:「讀跟看」的動作隨便做,「會送出去」的動作我自己按。

送出表單、購買、發布、刪除,都算會送出去。

官方的設計也是這個方向:敏感動作會停下來要你確認,不會自己衝。

另外還有兩條實務建議。重要帳號(銀行、金流後台)別讓 AI 自由跑,要用也是你看著螢幕用。

第一次玩先拿自己的網站或公開頁面練手,熟了邊界感再擴大範圍。

工具很強,但方向盤在你手上才叫自動化,鬆手那叫放生。

Claude 能「讀」網頁也能「操作」網頁:開真的瀏覽器點按鈕、填表單、捲動、截圖。判斷法:需求用看就能解決→貼網址;需求有「然後點…然後填…」→要操作。三種接法:官方 Chrome 擴充(最現成,用你平常的瀏覽器)、Claude Code 內建瀏覽器(隔離分頁,做網站驗收最好用)、MCP 瀏覽器工具(自由度最高,先懂 MCP)。我每天的用法:驗收自動化(改完網站叫它自己檢查+截圖回報,省掉每輪十分鐘手動檢查)、對照別人頁面結構、表單流程測試。安全邊界一句話:讀跟看隨便,「會送出去」的動作自己按;重要帳號不放手。

名詞解釋

MCP(Model Context Protocol)
讓 AI 工具安全連接外部服務(瀏覽器、行事曆、資料庫)的通用接口標準,由 Anthropic 推出。
爬蟲(crawler)
自動瀏覽網頁、把內容抓回去的程式。Google 靠爬蟲收錄網頁,AI 公司靠爬蟲收集資料。
機器人(bot)
自動執行特定任務的程式,例如 LINE 機器人自動回訊息、發文機器人每天定時發貼文。
Claude Code
Anthropic 推出的 AI 寫程式工具,裝在自己電腦的終端機裡,能直接讀寫你的檔案、跑指令,把你用中文描述的需求做成真的網站或工具。

全站名詞表 · 166 條 →

不想錯過 Lab 的新文章?
訂閱後有新文章上線,就寄信通知你,
點有興趣的進來看就好。

填 email 就完成訂閱(信由 Substack 代寄)、隨時取消、不轉賣 email。

如果內容對你有用就太好了
隨喜斗內

Buy Me a Coffee at ko-fi.com
NEXT CHAPTER ▸ Claude Code MCP 是什麼?一行指令裝好工具

常見問題FAQ

Claude 可以幫我操作網頁嗎?

可以,而且不只是讀:它能開一個真的瀏覽器,點按鈕、填表單、捲頁面、截圖回報。入門最快的是官方 Chrome 擴充(AI 進駐你平常的瀏覽器);做網站的人用 Claude Code 內建瀏覽器更順(隔離分頁,適合驗收自己的頁面);進階可走 MCP 瀏覽器工具。

讓 AI 操作網頁,跟直接貼網址給它差在哪?

貼網址是「看」:它抓內容回來讀,處理的是資訊。操作是「動手」:像人一樣走流程,登入後才看得到的頁面、點了選單才出現的設定、填完表單才知道的結果,只有操作做得到。判斷法:需求描述裡出現「然後點、然後填」,就是操作的守備範圍。

會不會亂點,把我的帳號搞出事?

設計上「會送出去」的敏感動作(購買、送出表單、發布)會停下來要你確認,不會自己衝。但實務上還是建議:重要帳號(銀行、金流)別讓它自由跑;第一次先拿自己的網站或公開頁面練手。我的原則:讀跟看隨便它,送出去的動作我自己按。

改完網站叫 AI 自己檢查,實際上怎麼下指令?

我每天在用的原句類似:「改完了,自己開頁面檢查排版有沒有跑掉,手機版和深色模式各截一張圖回報」。它會開瀏覽器、調成手機尺寸、切深色模式、逐一截圖,你只看圖。把「檢查」這個動詞外包掉,是做網站的人用這功能最划算的一招。

看完這篇之前先確認:

適合你
  • 想讓 AI 直接幫你看網頁、點按鈕、填表單
  • 改完網站每次都要自己手動檢查,檢查到煩
  • 聽過「AI 操作瀏覽器」但不知道從哪一種開始
不適合
  • 要大量抓資料的爬蟲需求 (那是另一個量級的題目)
  • 想全自動操作網銀/購物結帳 (敏感動作本來就該人來按)
  • 找「貼網址讓 AI 讀文章」的方法 (那個直接貼就行,不用本篇)

← 回新手教學 · 看「進階玩法」這個主題

⚠ 本站所有內容僅供教育與研究用途,不構成投資建議,不保證任何獲利。投資有風險,使用者須自行判斷並承擔結果。
TAO 道 · Hikari Zen YouTube ↗
音樂透過 YouTube 播放
♪ TAO 道 · Hikari Zen — Japanese Zen Music(YouTube)