[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-tap-browser-automation-programs-zh":3,"article-related-tap-browser-automation-programs-zh":28,"series-ai-agent-0a600e43-b461-40f8-851e-0442cf567d84":87},{"id":4,"slug":5,"title":6,"content":7,"summary":8,"source":9,"source_url":10,"author":11,"image_url":12,"cover_image":12,"category":13,"language":14,"translated_content":11,"related_article_id":15,"keywords":16,"key_takeaways":11,"views":25,"created_at":26,"published_at":27,"topic_cluster_id":11},"0a600e43-b461-40f8-851e-0442cf567d84","tap-browser-automation-programs-zh","Tap 把瀏覽器操作變成程式","\u003Cp>瀏覽器自動化最煩的點。就是每次都要付 AI 費。\u003Ca href=\"https:\u002F\u002Fdev.to\u002Fleonting1010\u002Fprograms-beat-prompts-how-tap-turns-ai-into-a-compiler-for-browser-automation-oab\" target=\"_blank\" rel=\"noopener\">Tap\u003C\u002Fa> 想換個玩法。先讓模型把流程看懂一次。再把動作寫成程式，之後直接重播。\u003C\u002Fp>\u003Cp>這件事很實際。很多團隊一天會跑 50 次、100 次。每次都叫 LLM 想一遍，錢跟延遲都很難看。Tap 的思路是把 AI 放在前面，把執行放到後面。講白了，就是把「聊天」改成「編譯」。\u003C\u002Fp>\u003Cp>Tap 不是單純的瀏覽器外掛。它是一套 protocol 加工具鏈。它會看 DOM、網路請求、accessibility tree，然後產生 \u003Ccode>.tap.js\u003C\u002Fcode>。第一次靠模型，之後靠 JavaScript。這種設計很像把瀏覽器操作做成可重用的資產。\u003C\u002Fp>\u003Ch2>Tap 到底在做什麼\u003C\u002Fh2>\u003Cp>Tap 的核心概念很直白。先讓 AI 找出步驟，再把步驟固定下來。這樣一來，模型不必每次都從零推理。它只負責「發明流程」，不是「每次執行」。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1775182721891-gcta.png\" alt=\"Tap 把瀏覽器操作變成程式\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>這種做法對開發者很友善。因為你拿到的是程式，不是一次性的對話紀錄。程式可以看、可以版控、可以測試。出問題時，也比較好查。\u003C\u002Fp>\u003Cp>Tap 的流程通常分三段。F\u003Ca href=\"\u002Fnews\u002Fcursor-3-parallel-agents-design-mode-zh\">or\u003C\u002Fa>ge 階段讓模型觀察頁面並寫出程式。Verify 階段會拿不同輸入去測。Run 階段就直接重播，不再呼叫模型。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Forge：\u003C\u002Fstrong>模型讀頁面，產生 Tap 程式。\u003C\u002Fli>\u003Cli>\u003Cstrong>Verify：\u003C\u002Fstrong>用不同輸入測腳本穩不穩。\u003C\u002Fli>\u003Cli>\u003Cstrong>Run：\u003C\u002Fstrong>直接執行，不再付 AI 成本。\u003C\u002Fli>\u003Cli>\u003Cstrong>重點：\u003C\u002Fstrong>第一次花錢，之後省錢。\u003C\u002Fli>\u003C\u002Ful>\u003Cp>作者給的經濟例子也很直接。第一次可能要花約 0.50 美元。之後每次重跑是 0 美元。這不是理想圖。這是很現實的成本結構。\u003C\u002Fp>\u003Cp>我覺得這裡最有意思的地方，不是省多少而已。是它把「模型推理」和「工作執行」拆開了。這樣你才知道哪裡慢，哪裡壞，哪裡要修。\u003C\u002Fp>\u003Ch2>為什麼這種模型有意思\u003C\u002Fh2>\u003Cp>多數 browser ag\u003Ca href=\"\u002Fnews\u002Fopenai-anthropic-eye-historic-ipos-zh\">en\u003C\u002Fa>t 都像聊天機器人。你丟任務給它，它一邊看頁面一邊想。這沒錯，但每次都要重新思考。對重複工作來說，這種模式很浪費。\u003C\u002Fp>\u003Cp>Tap 的想法比較像編譯器。模型先把自然語言和頁面狀態，翻成可執行腳本。之後就是一般程式執行。這很適合每日抓榜單、填表單、查庫存、巡檢後台。\u003C\u002Fp>\u003Cp>Tap 作者提到，它有 8 個核心操作，外加 17 個內建操作。數字不算誇張，但夠用了。重點是 runtime 只要實作 8 個方法，就能吃到後面那堆能力。這種抽象很工程。\u003C\u002Fp>\u003Cblockquote>“Programs should be used to express the details that humans have already figured out.” — Peter Norvig, \u003Ca href=\"https:\u002F\u002Fnorvig.com\u002F21-days.html\" target=\"_blank\" rel=\"noopener\">Teach Yourself Programming in Ten Years\u003C\u002Fa>\u003C\u002Fblockquote>\u003Cp>這句話很適合 Tap。人已經把流程摸熟了。那就別每次都叫模型重新想。把細節交給程式，才是比較穩的做法。\u003C\u002Fp>\u003Cp>這也解釋了為什麼 Tap 比純 agent 更適合 production。當腳本壞掉時，你看的是程式和頁面狀態。不是再丟一次 prompt，然後祈禱模型換個走法。\u003C\u002Fp>\u003Ch2>跟 Playwright 比，差在哪\u003C\u002Fh2>\u003Cp>最直接的對照組是 \u003Ca href=\"https:\u002F\u002Fplaywright.dev\" target=\"_blank\" rel=\"noopener\">Playwright\u003C\u002Fa>。它本來就是很多團隊的標準工具。穩、完整、文件多。Tap 沒想取代它。Tap 比較像把 AI 的那一段搬到前面。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1775182720318-mavd.png\" alt=\"Tap 把瀏覽器操作變成程式\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>Tap 可以跑在 \u003Ca href=\"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fextensions\" target=\"_blank\" rel=\"noopener\">Chrome Extension\u003C\u002Fa>、\u003Ca href=\"https:\u002F\u002Fplaywright.dev\" target=\"_blank\" rel=\"noopener\">Playwright\u003C\u002Fa>，也能走 macOS 的原生 accessibility API。這點很重要。因為同一份生成腳本，可以落在不同 runtime。\u003C\u002Fp>\u003Cp>另外還有 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FLeonTing1010\u002Ftap-skills\" target=\"_blank\" rel=\"noopener\">tap-skills\u003C\u002Fa>。作者說裡面有 119 個 community skills，涵蓋 55 個網站。這種技能庫很像現成模板。對實務很有幫助。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Playwright：\u003C\u002Fstrong>人寫腳本，控制力高。\u003C\u002Fli>\u003Cli>\u003Cstrong>Tap：\u003C\u002Fstrong>AI 先寫腳本，之後重播。\u003C\u002Fli>\u003Cli>\u003Cstrong>tap-skills：\u003C\u002Fstrong>119 個技能，55 個網站。\u003C\u002Fli>\u003Cli>\u003Cstrong>Tap 優勢：\u003C\u002Fstrong>重跑時不用再叫模型。\u003C\u002Fli>\u003C\u002Ful>\u003Cp>如果你的工作流一天跑 100 次，差異就很明顯。P\u003Ca href=\"\u002Fnews\u002Fclaude-code-leak-vidar-malware-github-zh\">la\u003C\u002Fa>ywright 省的是人力。Tap 省的是人力和推理費。當任務穩定時，這筆帳會越來越漂亮。\u003C\u002Fp>\u003Cp>但也別想太美。網站版型一改，生成腳本還是會壞。這不是魔法。它只是把不必要的 AI 呼叫拿掉，沒有把網頁變成永遠不變。\u003C\u002Fp>\u003Ch2>實際上誰會用到\u003C\u002Fh2>\u003Cp>Tap 最適合重複性高的工作。像內部儀表板、客服後台、排行榜、商品頁巡檢，還有每天固定抓資料的流程。這些場景很吃穩定和成本。\u003C\u002Fp>\u003Cp>它也適合團隊裡已經有 Playwright 經驗的人。因為 Tap 產生的東西最後還是可執行程式。你不用接受一個黑盒 agent。你拿到的是能進 Git 的東西。\u003C\u002Fp>\u003Cp>安裝流程也蠻輕。先跑 shell script，再下像 \u003Ccode>tap github trending\u003C\u002Fcode> 或 \u003Ccode>tap hackernews hot\u003C\u002Fcode> 這類指令。這種命令風格很像小型 compiler toolchain。乾脆，不囉嗦。\u003C\u002Fp>\u003Cp>如果你在做資料蒐集，這種模式很有吸引力。第一次讓模型理解頁面。之後就直接批次跑。對比一直呼叫 LLM，成本和延遲都更好控。\u003C\u002Fp>\u003Cp>我覺得它最像的不是 agent。比較像把 AI 當成一次性的程式生成器。這個定位很務實，也很符合很多團隊的日常需求。\u003C\u002Fp>\u003Ch2>產業脈絡跟下一步\u003C\u002Fh2>\u003Cp>過去兩年，browser automation 一直在往兩條路走。一條是純腳本。像 Playwright、Selenium。另一條是 agent 化。靠 LLM 看頁面，再自己決定怎麼點。\u003C\u002Fp>\u003Cp>問題是，agent 很方便，但也很貴。每次都要推理，速度慢，debug 也麻煩。Tap 這種工具，剛好站在中間。它保留 AI 的理解能力，也保留程式的可控性。\u003C\u002Fp>\u003Cp>這種中間路線，對台灣團隊其實很實用。很多公司不是要做炫技 demo。是要穩穩抓資料、跑流程、接內部系統。這時候，能省 inference cost 的工具，就會很有感。\u003C\u002Fp>\u003Cp>如果 Tap 之後把技能庫繼續擴大，runtime 也更穩，我猜它會更像一個「瀏覽器任務編譯器」。不是每個任務都要 agent 即時思考。很多任務，只要第一次想對，後面就該交給程式。\u003C\u002Fp>\u003Ch2>結語：先想一次，再跑一百次\u003C\u002Fh2>\u003Cp>Tap 最有價值的地方，是把 AI 放在第一次。後面就交給可重播的程式。這樣做，成本低，速度快，也比較好維護。\u003C\u002Fp>\u003Cp>如果你現在就在做瀏覽器自動化，我會建議你直接問一個問題：這個任務，是不是每次都在重複同一套動作？如果答案是肯定的，Tap 這種模式就很值得試。\u003C\u002Fp>\u003Cp>我的預測很簡單。接下來會有更多團隊，把 LLM 當成程式生成器，而不是天天在線的操作員。因為講白了，重複工作不需要每次都重新思考。\u003C\u002Fp>","Tap 把一次性的 AI 瀏覽器操作，轉成可重播的程式。重跑不用再付模型費，適合重複登入、抓資料、跑表單的工作流。","dev.to","https:\u002F\u002Fdev.to\u002Fleonting1010\u002Fprograms-beat-prompts-how-tap-turns-ai-into-a-compiler-for-browser-automation-oab",null,"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1775182721891-gcta.png","ai-agent","zh","586d7fcd-daae-4798-a525-62406c8b8a48",[17,18,19,20,21,22,23,24],"Tap","browser automation","Playwright","LLM","AI cost","Chrome Extension","macOS","program synthesis",5,"2026-04-03T02:18:25.48096+00:00","2026-04-03T02:18:25.454+00:00",{"tags":29,"relatedLang":46,"relatedPosts":50},[30,32,34,36,38,40,42,44],{"name":23,"slug":31},"macos",{"name":19,"slug":33},"playwright",{"name":22,"slug":35},"chrome-extension",{"name":20,"slug":37},"llm",{"name":18,"slug":39},"browser-automation",{"name":21,"slug":41},"ai-cost",{"name":17,"slug":43},"tap",{"name":24,"slug":45},"program-synthesis",{"id":15,"slug":47,"title":48,"language":49},"tap-browser-automation-programs-en","Tap Turns Browser Actions Into Programs","en",[51,57,63,69,75,81],{"id":52,"slug":53,"title":54,"cover_image":55,"image_url":55,"created_at":56,"category":13},"83c2f8f6-3710-466e-b52c-473b811f0535","how-to-set-up-openclaw-safely-zh","如何安全架設 OpenClaw","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780549368665-1t2l.png","2026-06-04T05:02:21.26625+00:00",{"id":58,"slug":59,"title":60,"cover_image":61,"image_url":61,"created_at":62,"category":13},"0ba5b1a8-82c5-464a-bea5-9a2c8730da74","aws-devops-agent-turns-incident-chaos-into-triage-zh","AWS DevOps Agent 把事故排查變成三步","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780466689960-g1sv.png","2026-06-03T06:03:14.154923+00:00",{"id":64,"slug":65,"title":66,"cover_image":67,"image_url":67,"created_at":68,"category":13},"841eac88-b0f0-4a4c-9e1e-efc3b5c16281","kimi-k26-live-300-agent-workflows-zh","Kimi K2.6 上線：300 代理工作流","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780430574285-hqpn.png","2026-06-02T20:02:24.972179+00:00",{"id":70,"slug":71,"title":72,"cover_image":73,"image_url":73,"created_at":74,"category":13},"f0411957-bcdb-42d9-a267-3e90ae7d9cb1","how-to-take-a-sabbatical-at-openai-zh","怎麼申請 OpenAI sabbatical","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780398216422-8fi7.png","2026-06-02T11:02:25.74372+00:00",{"id":76,"slug":77,"title":78,"cover_image":79,"image_url":79,"created_at":80,"category":13},"37a5e429-4235-439c-9b05-bb377085462c","8-steps-build-production-rag-with-langchain-zh","8 步驟打造可上線的 LangChain RAG","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780178597493-4hz7.png","2026-05-30T22:02:48.14022+00:00",{"id":82,"slug":83,"title":84,"cover_image":85,"image_url":85,"created_at":86,"category":13},"e73c041b-852b-44c3-85aa-0f1e2e5848e3","ai-agents-hit-chaos-mode-claude-code-openclaw-zh","Claude Code＋OpenClaw 讓 AI 代理失控升溫","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780160576178-yqcs.png","2026-05-30T17:02:25.725767+00:00",[88,93,98,103,108,113,118,123,128,133],{"id":89,"slug":90,"title":91,"created_at":92},"4ae1e197-1d3d-4233-8733-eafe9cb6438b","claude-now-uses-your-pc-to-finish-tasks-zh","Claude 開始幫你操作電腦","2026-03-26T07:20:48.457387+00:00",{"id":94,"slug":95,"title":96,"created_at":97},"5bede67f-e21c-413d-9ab8-54a3c3d26227","googles-2026-ai-agent-report-decoded-zh","Google 2026 AI Agent 報告解讀","2026-03-26T11:15:22.651956+00:00",{"id":99,"slug":100,"title":101,"created_at":102},"2987d097-563f-46c7-b76f-b558d8ef7c2b","kimi-k25-review-stronger-still-not-legend-zh","Kimi K2.5 評測：更強，但還不是神作","2026-03-27T07:15:55.277513+00:00",{"id":104,"slug":105,"title":106,"created_at":107},"95c9053b-e3f4-4cb5-aace-5c54f4c9e044","claude-code-controls-mac-desktop-zh","Claude Code 也能操控 Mac 了","2026-03-28T03:01:58.58121+00:00",{"id":109,"slug":110,"title":111,"created_at":112},"dc58e153-e3a8-4c06-9b96-1aa64eabbf5f","cloudflare-100x-faster-ai-agent-sandbox-zh","Cloudflare 的 AI 沙箱跑超快","2026-03-28T03:09:44.142236+00:00",{"id":114,"slug":115,"title":116,"created_at":117},"1c8afc56-253f-47a2-979f-1065ff072f2a","openai-backs-isara-agent-swarm-bet-zh","OpenAI 挺 Isara 的 agent swarm …","2026-03-28T03:15:27.513155+00:00",{"id":119,"slug":120,"title":121,"created_at":122},"7379b422-576e-45df-ad5a-d57a0d9dd467","openai-plan-automated-ai-researcher-zh","OpenAI 想做自動化 AI 研究員","2026-03-28T03:17:42.090548+00:00",{"id":124,"slug":125,"title":126,"created_at":127},"48c9889e-86df-450b-a356-e4a4b7c83c5b","harness-engineering-ai-agent-reliability-2026-zh","駕馭工程：從「馬具」到「作業系統」，AI Agent 可靠性的終極密碼","2026-03-31T06:42:53.556721+00:00",{"id":129,"slug":130,"title":131,"created_at":132},"96d8e8c8-1edd-475d-9145-b1e7a1b02b65","mcp-explained-from-prompts-to-production-zh","MCP 怎麼把提示詞變工作流","2026-04-01T09:24:39.321274+00:00",{"id":134,"slug":135,"title":136,"created_at":137},"f2ca7720-b471-4ce5-9336-2a9ac2a876fd","amazon-bedrock-agents-multi-agent-workflows-zh","Amazon Bedrock Agents 進入多代理工作流","2026-04-01T09:30:29.945429+00:00"]