發布日期：2026 年 11 月 10 日
在代理式網頁開發的新時代，網頁程式開發人員期望程式設計代理能成為網頁建構專家。雖然最新的前沿程式碼模型功能強大，通常能產生可運作的程式碼，但如果請網頁程式開發人員審查 AI 生成的程式碼，他們幾乎都能找到方法，讓程式碼更快速、更易於存取或更安全。
Chrome 正大力投資代理式網頁程式開發的未來，為解決這項挑戰，我們在 5 月的 Google I/O 大會上推出了 Modern Web Guidance 的早期預先發布版。Modern Web Guidance 是一組技能，可將網頁平台專業知識、最佳做法和瀏覽器相容性資料直接嵌入程式碼代理。
今天，我們很高興宣布 Modern Web Guidance 1.0 穩定版正式推出，內容包括：
- 全新翻新工作流程：掃描現有程式碼集，協助代理找出安全翻新的機會。
- 擴充指南資料庫：針對數百個經過驗證的 AI 知識落差，提供專家審查的跨瀏覽器解決方案。
- 每份指南都經過更深入的人工專家審查，包括內容領域技術主管的核准，以及針對面向使用者指南的專門無障礙審查。
- 完整評估涵蓋範圍：所有指南都提供公開評估資訊主頁，顯示與未使用 Modern Web Guidance 的代理相比，可衡量的改善程度。
我們很高興宣布，隨著 1.0 版推出，Modern Web Guidance 將成為跨瀏覽器計畫，Firefox 和 Edge 將與 Chrome 攜手合作，共同支援、改善跨瀏覽器相容性，並為這項計畫做出貢獻。我們與 Baseline 合作，目標是確保任何使用代理編寫程式碼的人，都能充分運用現代網路平台的功能。
無論您使用哪種模型或代理駕馭系統，只要是建構網頁，Modern Web Guidance 都適用於您的 Agentic Workflows。
如要安裝 Modern Web Guidance，請在專案目錄中執行下列指令：
npx modern-web-guidance@latest install
如果已安裝舊版，可以執行下列指令更新至 1.0：
npx modern-web-guidance@latest update
如需其他安裝操作說明或想瞭解詳情，請參閱 Modern Web Guidance 說明文件，或觀看這部影片，快速瞭解相關資訊：
開發人員和企業為何應使用 Modern Web Guidance
不可否認，程式設計代理能協助開發人員以前所未有的速度編寫程式碼。不過，當所有人都使用程式設計代理時，速度就不再是競爭優勢。
如今，在可用性和體驗品質等基本要素上做出區隔，比以往任何時候都更加重要。Modern Web Guidance 有以下幾種用途：
加強模型經常忽略的最佳做法
雖然頂尖程式設計模型確實掌握許多最佳做法，但我們的評估結果顯示，這些模型在許多重要領域仍有不足之處，例如：
- 無障礙功能：鍵盤焦點和惰性管理、減少動態效果支援，以及無障礙表單驗證。
- 使用者體驗：滑動和觸控手勢、對話方塊和彈出式視窗轉換，以及淺色/深色主題實作。
- 效能：主執行緒工作排程、螢幕外算繪隔離，以及版面配置位移預防。
- 安全性：安全的 HTML 清理、嚴格的內容安全政策，以及密碼金鑰憑證管理。
正確採用無障礙最佳做法尤其重要，因為錯誤的做法 (例如不當使用 ARIA) 可能會導致網頁的無障礙程度比完全不使用 ARIA 還低。在 1.0 版中，我們邀請每天使用輔助技術的無障礙專家，審查並測試面向使用者的指南。
根據工作需求選用合適的網頁功能
AI 模型非常擅長找出如何使用 JavaScript 讓某個項目運作，但在許多情況下，HTML 或 CSS 功能可以透過更少的程式碼完成相同的工作。由於這些元素是由瀏覽器處理，因此通常效能較佳，且具備無障礙功能。例如：
- 可為彈出式視窗和對話方塊加上動畫的功能
- 強化捲動和滑動互動的功能
- 更優質的 API，可流暢轉換頁面
新功能也能以對使用者重要的方式，改善網站體驗。例如：
- 密碼金鑰和 WebAuthn：提供更快速安全的登入體驗
- 自動填入：改善結帳程序 (尤其是行動裝置)，因為使用自訂 JavaScript 表單控制項時，結帳程序經常失敗
Modern Web Guidance 會根據您的瀏覽器支援需求，推薦最適合的功能。指南內嵌了基準和瀏覽器相容性資料，可根據專案需求提供建議。
掃描程式碼集，找出翻新機會
大多數網頁開發作業並非在全新專案中進行。在現有的程式碼集中，多年來累積了過時的解決方法、不必要的依附元件，以及不再需要的 polyfill。
1.0 版新增了現代化工作流程，可分析現有的 HTML、CSS、JavaScript 和 package.json，找出安全升級的機會，然後引導代理程式完成變更。
/modern-web-guidance Modernize the code in this directory
在第一個版本中，現代化工作流程會使用靜態分析，檢查有限的模式。我們選擇先從範圍較小、結果可預測的項目著手，再逐步擴大。我們計劃逐步擴大涵蓋範圍，包括代理式稽核，讓代理直接推論程式碼，而不只是比對已知模式。
隨時掌握網路平台最新動態
網路平台會不斷變化。瀏覽器每次推出重大更新時，都會提供新功能，而先前可能無法使用的現有功能，也會隨著每次瀏覽器推出新版本而成為基準。
Modern Web Guidance 是以 Baseline 相容性資料為基礎建構而成，建議內容由瀏覽器工程師、網路標準專家和無障礙功能專家維護，因此會隨著平台本身演進，您的專案也能與時俱進。
瞭解新的網頁功能和最佳做法
雖然 Modern Web Guidance 主要是為代理建構的工具，但許多開發人員表示，這項指引本身就是相當實用的學習資源。
即使在代理程式編碼時代，培養領域專業知識仍有其價值。Modern Web Guidance 可協助您達成這個目標：您可以閱讀指南，或使用 CLI 搜尋用途，並探索可能與專案相關的新技術。
搭配使用 Modern Web Guidance 和代理專用 Chrome 開發人員工具
在代理式網頁開發中，編寫程式碼只是工作流程的一部分。您也需要執行該程式碼，確保其運作符合預期。因此，我們建議開發人員搭配使用 Modern Web Guidance 和代理專用 Chrome 開發人員工具。
- Modern Web Guidance 可讓代理預先掌握專業知識，按照現代最佳做法編寫程式碼。
- 代理專用 Chrome 開發人員工具可讓 Agent Runtime 查看程式碼，以便在各種裝置功能、使用者偏好設定和網路條件下，驗證、偵錯及最佳化程式碼。
這些功能可協助代理在更少的回合中找到更合適的解決方案。以下列舉幾個例子，說明如何搭配使用這些工具，發揮最大效益：
持續最佳化，直到達成成效目標
Modern Web Guidance 可教導代理如何有效拆分會封鎖主執行緒的長時間執行 JavaScript 工作，但無法測試程式碼，瞭解這些 JavaScript 工作實際封鎖主執行緒的時間長度。
使用代理專用 Chrome 開發人員工具，您可以在模擬的低階 CPU 上執行效能追蹤，查看是否有問題，然後根據 Modern Web Guidance 的效能建議，反覆調整程式碼，直到程式碼不會封鎖主執行緒超過 50 毫秒 (以免導致 INP 偏低)。
測試及調整動畫
Modern Web Guidance 可向代理說明如何正確且有效率地為模態對話方塊、工具提示和彈出式選單等功能加上動畫，但即使有這項指引，您仍須確認動畫在完整應用程式中實際運作和呈現的效果。
代理專用 Chrome 開發人員工具可執行程式碼、與頁面互動，以及錄製動畫運作時的螢幕畫面。接著，系統會研究錄製內容，確保動畫能正常運作，且符合網站其餘部分的風格和感覺。
您也可以使用代理專用 Chrome 開發人員工具，確認設定 prefers-reduced-motion 後，元件是否會遵循使用者偏好設定。
快取檢視畫面，避免記憶體流失
Modern Web Guidance 可教導代理，在記憶體中轉譯及快取檢視畫面，同時在無障礙樹狀結構中適當隱藏，讓 SPA 轉換感覺更即時。
不過，請務必妥善清除未使用的檢視畫面，以免使用者長時間停留在網頁上時發生記憶體流失。代理專用 Chrome 開發人員工具提供記憶體偵錯工具，可確保代理的記憶體用量不會無限制增加。
如要進一步瞭解如何搭配使用 Modern Web Guidance 和代理專用 Chrome 開發人員工具，請觀看這部影片：
成功案例
世界各地的工程團隊已開始使用 Modern Web Guidance 和代理專用 Chrome 開發人員工具，提升程式碼品質、加快交付速度，並消除手動偵錯瓶頸：
Pensionbazaar 和 Policybazaar
Pensionbazaar 是印度金融科技公司 Paisabazaar 推出的新退休規劃平台，結合 Modern Web Guidance 和代理專用 Chrome 開發人員工具，建構及驗證新網頁，將作業時間縮短 90% 以上 (從約四天縮短至幾小時)，並將新畫面的 UI 錯誤減少 90% 以上。Policybazaar 是 Paisabazaar 的姊妹平台，也是印度首屈一指的保險平台，註冊客戶超過 9,700 萬人。該平台使用代理專用 Chrome 開發人員工具，自動稽核約 30 個高流量到達網頁的效能，手動稽核工作量減少 92%：
「對 Pensionbazaar 來說，我們的首要任務是從第一天起就建構優質程式碼，避免日後產生技術債。Modern Web Guidance 引導程式設計代理採用現代化網路標準和效能最佳做法，同時遵循我們特定的瀏覽器相容性目標。這大幅簡化並加快了前端程式碼審查作業，最終縮短了開發作業時間。」
— Policybazaar 工程經理 Aman Soni
WeTV
騰訊的國際影音串流平台 WeTV 在 CI/CD 管道中加入 AI 程式設計代理，使用代理專用 Chrome 開發人員工具診斷效能迴歸問題，並運用 Modern Web Guidance，透過新版網路平台功能修正問題。現在，代理會自動診斷並解決 90% 的效能檢查失敗問題，將偵錯和解決時間縮短 87% (從四小時縮短至 30 分鐘，包括手動評估)：
「無論是速度還是品質，結果都非常有效。代理專用 Chrome 開發人員工具和 Modern Web Guidance 提供的診斷洞察，為我們修正複雜的版面配置問題提供了可靠的參考依據。每次修正後，我們都會進行嚴格驗證，目前的成功率和穩定性大幅提升了我們對發布版本的信心。」
— WeTV (騰訊) 工程主管鄭陽傑
note inc.
note inc. 是日本最大的創作者和媒體平台之一，每月活躍使用者超過 9,000 萬人。該公司將 Modern Web Guidance 與內部設計系統搭配使用，持續翻新 Next.js 前端。在正式版程式碼集進行 180 次評估後，Modern Web Guidance 引導代理使用原生 HTML 和 CSS 功能，而非自訂 JavaScript 來製作捲動動畫、工具提示和折疊式選單，將新式網頁檢查的通過率從 61% 提高到 94%。此外，在 431 個合併 PR 中，適當的 LCP 圖片優先順序也提高了 28%：
「note 的使命是『開始創作，持續創作』，因此我們的平台必須保持快速，讓每位創作者和讀者都能輕鬆使用。隨著越來越多程式碼由 AI 程式設計代理編寫，Modern Web Guidance 可協助他們採用現代化、符合標準的解決方案，而非沿用舊版 JavaScript 模式。此外，也會指出容易忽略的細節，例如圖片載入優先順序和表單無障礙功能。結合我們的設計系統，我們就能持續改善 Note，同時保持 UI 一致。」
— note inc. 技術副總裁板橋武彥
MetaMask
MetaMask 是自我託管的金融平台，在約 190 個國家/地區的下載次數超過 1 億次。該平台將 Modern Web Guidance 做為自動審查機器人，對其開放原始碼瀏覽器擴充功能的每個提取要求進行審查，只需設定三行提示詞即可。在前五週，機器人審查了約 480 項提取要求，並對其中 64 項發表評論，促使工程師修正 43 項發現 (主要是無障礙功能、HTML 語意和程式碼檢查工具未發現的表單問題)，從評論到修正的中位數時間為 15 分鐘：
「評論真的很有幫助。他們協助我們發掘並熟悉新式 API，例如 Interest Invoker 和 Popover API。這項做法並未增加 PR 審查時間，反而可能縮短了審查時間。如果沒有 MWG，我們就必須仰賴熟悉這些現代網頁技術的人工審查員，才能找出這些問題。」
— MetaMask 使用者體驗工程師 Francis Nepomuceno
生態系統和社群支援
Modern Web Guidance 最初是 Chrome 的一項計畫，但能達到 1.0 里程碑，是網頁社群中眾多專家共同努力的成果。
感謝負責監督各個網頁平台領域的內容領域技術負責人、Firefox 和 Edge 的瀏覽器合作夥伴、編寫及測試指南的獨立網頁標準和無障礙功能專家，以及所有協助打造這個版本的 GitHub 開放原始碼貢獻者！
如果您發現程式碼代理對網路的瞭解有不足之處，或想協助改善現有指南，請參閱貢獻指南，瞭解如何參與。
開始使用 Modern Web Guidance
如要在專案中新增 Modern Web Guidance，請從專案目錄執行 CLI 安裝程式：
npx modern-web-guidance@latest install
如果已安裝舊版，可以執行下列指令更新至 1.0：
npx modern-web-guidance@latest update
除了 CLI 之外，您也可以直接透過大多數熱門程式碼代理外掛程式市集安裝及更新 Modern Web Guidance，包括 Claude Code、Codex、Cursor、Antigravity、Copilot、WebStorm、Kimi Code 和 Grok Build。
如要瞭解詳情，請參閱下列資源：