大家都在說 AI 遲早會把前端的飯碗端走。看著社群上每天冒出來的一鍵生成 UI 工具，這種焦慮很真實。但如果你有留意最近幾週的技術底層走向，會發現前端的戰場其實只是換了個地方。

我們以前的工作是把資料轉成給人看的畫面。現在，我們多了一個新客戶：AI Agent。

這聽起來有點抽象。長久以來，前端的價值建立在「畫面刻得多好」跟「互動有多順」。但當越來越多使用者習慣讓 Agent 幫他們訂票、爬資料、填表單時，如果你的網站只有漂亮的 UI，而沒有把能力好好暴露給機器，那這網站對 Agent 來說就是個瞎子摸象的黑盒。

這就是為什麼 Chrome 最近在推 WebMCP。傳統的 MCP（Model Context Protocol）是跑在本地端的，讓你的終端機能夠接上各種工具。但 WebMCP 直接把這套邏輯搬到瀏覽器層級。也就是說，前端工程師可以直接在網頁上宣告：「嘿，Agent，這是我提供的 API，你可以呼叫我來查詢庫存，或者把商品加入購物車。」

這根本就是在改寫前端的定義。你寫的不只是給人點的按鈕，你還要寫給機器呼叫的工具。

Next.js 的反應也很快。他們最近開始針對「Agentic Future」提出各種實作建議。例如在專案裡放一個 AGENTS.md 來定義機器的行為守則，或者用 --slim 這類的參數，讓 Agent 只看到它需要看到的精簡 DOM 結構，而不是一整坨被各種 CSS 類別塞滿的雜訊。

為什麼這很重要？因為 Agent 也是有成本的。它讀不懂你那一層包一層的漂亮 div，它只在乎能不能準確找到有用的資料跟可操作的節點。如果你的前端架構對 Agent 不友善，它就會出錯，或者直接放棄你的網站。

未來的開發思維必須轉變。我們要把 Agent 當成超級用戶（Super User）。為它們設計明確的邊界，提供清楚的上下文，甚至設定好護欄，告訴它們哪些操作是破壞性的，哪些資料是唯讀的。

這不是什麼遙遠的未來。這是現在進行式。如果你還在擔心 AI 會不會寫 React，你可能看錯了重點。你的下一個前端專案，第一步或許不再是畫 wireframe，而是先定義好你的網站要怎麼跟 Agent 簽訂這份數位契約。