關於我轉生變成AI專用網頁這檔事：探索VOIX標籤框架讓AI agent也對我回眸一笑

手機版選單

下方連結

back to top

:::

關於我轉生變成AI專用網頁這檔事：探索VOIX標籤框架讓AI agent也對我回眸一笑

卷期：v0078
出版日期：2026-09-20

作者：陳俊佑 / 監察院職員

「雖然我還穿著UI的外殼，但我的心（標籤）早已為了Agent而敞開。」

前言

大家好，我是富田町47番地的社畜工程師柚子哥，這一篇不聊實際使用AI的內容，改聊探討為了AI而發展出的來的前沿趨勢。

原本我再實驗使用ai agent自動化幫我去讀取各網站資訊或是幫我操作各樣系統，例如幫我操作報帳系統自動報帳以及統計報帳的核銷數以及追蹤報帳的進度還有經費控管，或是幫我上人事系統自動請假，以及打卡上下班，幫我搜集國外資訊，整理研考資料等等。

用很多總方式讓AI讀取網頁卻發現實際執行效率低以及精確度不夠，又或是Token消耗太多。因此有一個想法以後如果人人都用agent來幫自己尋找時下最新資訊的話；是不是再也不需要UI介面，未來是否會有AI專屬的網頁SEO（Search Engine Optimization，搜尋引擎最佳化）寫法？甚至發展出AI專屬的搜尋引擎？未來點擊率可能不再是廣告收益保證的話，是否網頁讓AI更好爬才可以保證自己的產品曝光機率更高，或是能夠更容易出現在AI的推薦名單，更容易讓AI自動購物下單的AI友善系統是否就是未來商業模式？

有了以上總總想法，因此上arxiv找了一些文獻看看偶然發現一篇德國Technical University of Darmstadt發表道論文『Building the Web for Agents: A Declarative Framework for Agent–Web Interaction.』，裡面所寫的VOIX標籤格式以及他的作法覺得很有趣，主打人機協作的重要性，服務提供者要撰寫更容讓AI操作的系統，但要讓使用者自己掌握所有系統的決策權，最後交給AI去操作網站，這篇可能不是未來的主流，但還是想分享給大家。

一、傳統AI瀏覽網頁以及互動方式優缺點

首先介紹論文中提及傳統ai瀏覽網頁以及互動方式優缺點：

1.視覺分析方法(Analyzing Rendered Screenshots)

這種方法依賴多模態大語言模型透過網頁的螢幕截圖觀看網頁的渲染影像，並嘗試將視覺座標轉化為可執行的動作。可以模擬人類使用網頁的邏輯，較能理解空間關係或物件間的視覺關聯，但視覺處理需龐大運算，完成任務的時間較長，且研究指出，代理程式常會忽略單純視覺美化後的互動按鈕、缺乏語義標籤的操作，難以應付長頁面（通常不滾動超過兩個視窗高度）或極小的介面變動。

2.解析HTML方法(Scraping and Parsing DOM)

透過抓取HTML並解析其DOM樹結構，來猜測哪些標籤對應於功能性按鈕。代理程式必須反覆重新探索網頁功能並推測出所有的互動按鈕，這一步驟很冗長費時，且HTML中隱含包括敏感的個人資料、財務數據或私訊可以一並被抓取，對於使用非地端自架AI的用戶來說，個資很可能被傳出去。

由於上面的傳統AI與網頁互動方式各有優缺點也都是類似逆向工程，這導致了互動的不穩定、低效且不安全。因此該論文的團隊就設計出VOIX的框架來應對，VOIX框架的核心精神在於，與其讓AI辛苦推測，不如由網頁透過宣告式標籤主動建立一套機器可讀的契約，從根本上解決上述方法的缺陷。

二、VOIX三層框架

他們這套架構大致分為三層，網站(The Website)，瀏覽器代理(The Browser Agent)，推理提供商(The Inference Provider)這三個面向。

VOIX標籤框架的運作架分為三個面向，分別是使用者端的網站、以及作為橋樑的瀏覽器代理，最後是負責決策推理的AI推理的供應商。三者環環相扣，構成了一套從感知、決策到執行的完整閉環。

從網站提供者的角度來看，核心工作是在現有的HTML結構中主動加入<tool>與<Context>這兩個專門給機器解讀的互動標籤。這標誌著一種開發思維的轉變：不是讓AI來抓取全部資料，而是靠瀏覽器代理(The Browser Agent)告訴AI這裡有什麼、能幹嘛。

例如，在一個健身管理網頁中，透過<Context>，網頁能主動宣告目前的訓練項目是深蹲、目前的組數是三組；而透過<tool>，則能定義出一個名為「調整組數」的動作，並詳細描述該動作能根據體力狀況動態修改目標。這種最直接的宣告方式，徹底解決了AI過去在操作網頁時常發生瞎子摸象問題，讓AI對網頁功能的掌握精準度提高。

從一般大眾使用者角度來看時，當自己開啟網頁時一起啟動瀏覽器代理，論文中瀏覽器代理是用安裝在【瀏覽器上的插件】來解釋說明瀏覽器代理的功能。瀏覽器代理(The Browser Agent)扮演了至關重要的橋樑角色。它會自動掃描全網頁並抓取這些特定標籤，將原本瑣碎的HTML定義與狀態內容序列化，排除掉不需要的標籤，轉化為AI能夠高效處理的JSON格式。這一個步驟至關重要，因為它充當了感官與大腦之間的翻譯官。它不僅負責過濾掉無用的視覺雜訊，還保護了用戶的隱私，確保只有被標註為「可供互動」的資訊才會被打包。隨後，這份精煉後的JSON簡報會被傳遞給推理提供商。

推理提供商(The Inference Provider)就是指AI Agent，一般商業LLM或地端自架開源的LLM都可以，不用被綁死特定的商業語言模型。此時，AI Agent擁有了最乾淨、最有意義的情報。它不需要理解網頁的CSS排版，也不需要處理複雜的JavaScript邏輯，它只需專注於接收這份JSON資料，並結合用戶當下的意圖，例如用戶一邊深蹲一邊說出的「今天的我沒有極限，幫我加強訓練」，推理出最合適的下一步驟。在經過邏輯比對後，大腦會發現「調整組數」這個標籤的描述符合用戶需求，進而下達一個精準的動作指令回傳給代理。

最後，瀏覽器代理接收到指令後，並非採取暴力模擬點擊，而是優雅地在網頁上觸發一個自定義的JavaScript事件。網頁端原本就準備好的監聽程式會被喚醒，從指令中抓取參數，直接在底層修改數據並更新UI。這整個過程如同神經傳導般流暢：從感官接收（標籤抓取）、神經傳遞（JSON轉譯）、大腦決策（LLM 推理），到最後的肢體動作（JS執行），共同譜寫出一場科技感十足的協奏曲。

20260920_007804_01

圖一、流程示意圖(AI產圖)

20260920_007804_02

圖二、流程示意圖(AI產圖)

三、VOIX標籤

在VOIX框架中，開發者主要只需加入<tool>（動作）與<Context>（狀態）這兩個標籤。

VOIX核心標籤說明

1.<tool>：定義AI的「雙手」

這個標籤告訴AI Agent：「在這個畫面上，你可以執行什麼功能」。

關鍵屬性：

Name：動作的唯一識別碼（AI呼叫時用的ID）。

description：最重要的一環。用自然語言描述這功能幹嘛用的。

oncall：當AI決定執行此動作時，要觸發的JavaScript函數。

參數機制：可以在標籤內嵌套property（或透過JSON定義），讓AI帶參數進來（例如：數量、顏色、名字）。

2.<Context>：定義AI的「眼睛」

這個標籤提供「上下文（Context）」，讓AI了解現在網頁的情況，避免它瞎子摸象。

關鍵屬性：

label：這份資訊的標題。

內容：標籤內的文字或JSON數據就是AI讀取的內容。例如：目前購物車有幾件商品、現在登入的使用者是誰。

HTML範例

假設使用者是在健身房一邊深蹲一邊跟ai口說互動確認要做的深蹲組數

{"exercise": "Squat", "current_sets": 3}

</context>

</tool>

</div>

//監聽工具呼叫事件

document.querySelector('tool[name="update_sets"]').addEventListener('call', (event) => {

const { new_sets } = event.detail; // 獲取來自 AI 的決策參數

//執行網頁實際動作

document.getElementById('set-count').innerText = new_sets;

//回傳執行結果給AI(讓AI知道任務已成功，這是論文中的重要回饋機制)

event.target.dispatchEvent(new CustomEvent('return', {

detail: {

status: "success",

message: `Successfully updated sets to ${new_sets}.`

}

}));

alert(`AI 幫你把組數調整為 ${new_sets} 組了！`);

});

</script>

運作步驟

第一階段：感知(The Website -> Browser Agent)

當使用者開啟網頁時，Browser Agent(插件)會像雷達一樣掃DOM：

抓取狀態：它讀到<Context>，知道目前是在做「深蹲(Squat)」，而且已經設定了「3組」。
抓取技能：它讀到<tool>，知道這個網頁具備「調整組數(update_sets)」的功能。
打包情報：插件把這些HTML資訊轉化為一份JSON報告。

第二階段：決策(Browser Agent -> Inference Provider)

假設使用者對著AI說：「今天的我沒有極限！我要多一點組數」

傳遞情報：插件把JSON報告和使用者的話一起丟給Inference Provider(AI大腦)。
大腦推理：AI看到description="根據用戶體力調整組數"，判斷這個動作符合「加強訓練」的需求。
下達指令：AI不會寫程式碼，它只會回傳一個決定：
「執行update_sets，參數new_sets給我設成5。」

第三階段：執行(Inference Provider -> Browser Agent -> Website)

接收指令：插件收到AI的決定，立刻找到網頁中名為update_sets的那個標籤。
觸發事件：插件在該標籤上觸發一個JavaScript的CustomEvent。
執行 JS：*網頁裡的handleUpdateSets(event)被喚醒了。
- 它從event.detail裡精準地抓到了AI建議的數字5。
- 結果：網頁上的<span>數字從3變成了5，並彈出視窗。

VOIX架構的兩大核心優勢

參數防呆(Property Constraints)：透過<propname="new_sets"type="number">強制規範數據類型。這相當於為AI設下了「護欄」，即便AI推理出「五組」，插件也會要求其修正為數位5才能通過，確保網頁程式不會因資料型別錯誤而崩潰。
語義化操作(Semantic Alignment)：這是VOIX的特點。開發者不再需要為每一種可能的用戶說法寫if-else。只要description寫得清晰，AI就能自動將「今天的我沒有極限」、「組數加二」或「我覺得還撐得住」等模糊的人類語言，對應到update_sets動作上。

20260920_007804_03

圖三、實際使用示意圖(AI產圖)

八、結語：當網頁轉生之後，我們迎來的是神話還是末日寓言？

VOIX的魅力與前瞻性，並非源於它試圖激進地消滅現有的視覺世界，而在於它優雅地為冰冷的UI注入了一層全新的「語義靈魂」。它定義了一種跨越物種的「合約式互動」，在網頁開發者與AI之間架起了一座協議橋樑。在可預見的未來，隨著越來越多的數位資產完成這場「轉生」，我們終將邁向那個由意圖驅動、完全脫離視覺束縛的「無UI」時代。到時候，網頁將不再只是給人類眼睛消費的像素圖案，而是能直接與意識對接、精準回饋需求的智慧服務。但在那一天到來之前，透過VOIX標籤框架，可以成功在華麗的UI世界裡，為AI Agent點亮了一盞龍山寺的光明燈，讓它能燈火闌珊處對著我們的網頁露出滿意的回眸一笑。

回首這短短幾年，人工智慧的演進速度快到簡直令人窒息。大家都經歷AI從單純的聊天機器人，一路進化到具備自主行動力、能實質介入工作流的AI Agent。這種技術大爆發讓人感到無比興奮，彷彿電影《鋼鐵人》中的「賈維斯」已不再是好萊塢的科幻幻想，而是即將飛入尋常百姓家、成為每個人專屬生活助理的現實情況。我們正站在一個「全民皆有助理」的時代邊緣，期待著效率被極致釋放的未來。

然而，在技術狂歡的背影下，這把雙面刃也反射出令人瑟瑟發抖的寒光。我們不得不思考，這場AI革命是否會加速將世界推向「賽博龐克」（Cyberpunk）式的反烏托邦？當AI成為最強大的生產力工具時，它是否也會演變成最難跨越的階級鴻溝？在未來的社會圖景中，掌握算力與AI技術的少數人或許將晉升為數位時代的上流菁英，而本身經濟實力低下無法負擔或無法駕馭AI的那群人，則可能被遺留在社會底層的陰影處，面對日益擴大的貧富差距與數位霸權，只能兩手一攤，躺平繼續擺爛。

更深層的隱憂是，當人類過度依賴這份伸手可得的智慧時，我們是否會如同電影《蠢蛋進化論》（Idiocracy）所預警的那樣，走向集體的墮落與反智？當所有決策都能交由AI代勞，人類的思辨能力、創造力乃至於求生本能，是否會在無微不至的服務中逐漸萎縮？這究竟是人類文明的再一次飛躍，還是人類大腦退化的開始？

站在科技演進的十字路口，誰也無法給出絕對的答案。VOIX的轉生讓我們看見了人機協作的無限可能，但在邁向未來的腳步中，我們在擁抱「賈維斯」帶來的便利之餘，或許也該時刻保持警醒，避免自己在科技的潮流中溺斃於智慧的汪洋。

20260920_007804_04