Modern Web Guidance 是一組技能，可將網頁平台專業知識、最佳做法和瀏覽器相容性資料直接嵌入程式設計代理程式。這有助於引導程式設計代理程式避開舊版模式，改用可發揮現代網路平台強大功能和效用的解決方案。
安裝
只要程式設計代理支援技能，即可安裝及使用 Modern Web Guidance。
modern-web-guidance CLI (建議)
建議透過 Chrome 團隊建構的 modern-web-guidance CLI 安裝。透過 modern-web-guidance CLI 安裝 Modern Web Guidance 後，系統就會啟用自動更新功能。你可以透過 modern-web-guidance CLI 安裝，如下所示：
npx modern-web-guidance@latest install
如果您要開發 Chrome 擴充功能，建議使用下列指令：
npx modern-web-guidance@latest install --choose
這會執行互動式精靈，根據您的偏好安裝技能。
如要安裝 Modern Web Guidance，但不想使用 modern-web-guidance CLI，請參閱下列代理程式專屬的操作說明。請注意，大多數選項都不支援自動更新。
Antigravity
下載 Antigravity，並在安裝流程中啟用「modern-web-guidance」，或前往「設定」頁面，依序點選「自訂」和「使用 Google 外掛程式建構」。
Antigravity CLI
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Gemini CLI
gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update
JetBrains WebStorm
您可以在「技能管理員」中找到「現代網頁指南」，方法是依序點選「設定」 >「AI 助理」 >「技能」。選取技能即可開啟詳細資料頁面。如要安裝技能，請按一下「安裝」按鈕，將技能套用至目前的 IDE 執行個體。
GitHub CLI
gh skill install GoogleChrome/modern-web-guidance
npx skills
npx skills add GoogleChrome/modern-web-guidance
Claude Code
如要安裝 Modern Web Guidance 以搭配 Claude Code 使用，請按照下列三個步驟操作：
1. 新增市集：
/plugin marketplace add GoogleChrome/modern-web-guidance
2. 從 Marketplace 安裝外掛程式：
/plugin install modern-web-guidance@googlechrome
3. 重新載入外掛程式：
/reload-plugins
Copilot CLI
如要安裝 Modern Web Guidance 以搭配 Copilot 使用，請完成下列兩個步驟：
1. 新增市集：
/plugin marketplace add GoogleChrome/modern-web-guidance
2. 從 Marketplace 安裝外掛程式：
/plugin install modern-web-guidance@googlechrome
鵝
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
安裝前先瞭解
安裝前，請先使用查詢搜尋或依 ID 擷取指南，評估 Modern Web Guidance 指南庫。如要執行這項操作，請使用 CLI 的 search 指令，透過提示找出用途 ID：
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
終端機隨即會輸出 JSON 物件：
[{"id":"light-dismiss-a-dialog","description":"Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)","category":"user-experience","featuresUsed":["<dialog closedby>"],"tokenCount":1085,"similarity":0.7076},
{"id":"animate-to-from-top-layer","description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.","category":"user-experience","featuresUsed":["::backdrop","<dialog>","overlay","Popover","@starting-style","transition-behavior"],"tokenCount":1541,"similarity":0.6842},
{"id":"declarative-dialog-popover-control","description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.","category":"user-experience","featuresUsed":["Invoker commands","Popover","<dialog>"],"tokenCount":2684,"similarity":0.5685},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html","tokenCount":5484,"similarity":0.5471},
{"id":"accessibility","description":"Actionable coding guidelines for building accessible web applications, covering semantic HTML, focus management, forms, media, and testing. Use this skill when auditing or implementing accessibility features, keyboard navigation, or ARIA.","category":"accessibility","tokenCount":7129,"similarity":0.5102}]
讀取 description 值後，您就可以選擇最符合目標的 id，並使用 retrieve 指令：
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
在此情況下，終端機中會顯示animate-to-from-top-layer 用途的指南 Markdown。如為其他用途，請將 animate-to-from-top-layer 替換為任何有效的用途 ID。
為什麼要使用 Modern Web Guidance？
相較於未經輔助的 AI 模型，Modern Web Guidance 可為網頁開發人員帶來以下三項優勢：
- AI 程式碼代理程式通常會預設採用較舊的解決方案，來解決現代網頁開發問題。這些解決方案通常包含 JavaScript，可為現代 CSS 和 HTML API 更適合解決的問題提供功能。
- 過去，AI 模型並不知道最新的網路平台功能，或對這些功能有誤解。
- 最後，AI 模型通常會提供過時的建議，不會考量專案需求或瀏覽器支援條件，而是根據特定專案的基準要求調整指引。
現代網頁指南可解決這些缺點，確保 AI 輔助的程式碼編寫工作流程具備相關工具，能優先採用較新的網頁平台功能，並考量備援機制。
Modern Web Guidance 包含哪些內容？
「新式網頁指南」涵蓋多個核心領域，提供超過 100 種網頁開發用途的最佳做法。在幕後，這項功能會指示程式碼編寫代理程式如何呼叫 modern-web-guidance CLI，找出並擷取最適合您用途的指引。
- 使用者體驗：檢視轉場效果、CSS
scrollbar-color樣式，以及進場和退場動畫。 - CSS：容器查詢、現代色彩空間 (例如
oklch)、CSS 子格線版面配置、text-wrap，以及排版行高修剪。 - 效能：Interaction to Next Paint (INP) 診斷、
scheduler.yield，用於分解長時間工作、排定背景工作，以及設定圖片載入優先順序。 - 表單：自動調整輸入欄位大小 (
field-sizing: content)，並使用:user-invalid準確驗證樣式。 - 內建 UI 元件：直接控管對話方塊、工具提示的 CSS 錨點定位，以及
popover。 - 無障礙功能：提供無障礙錯誤公告和鍵盤焦點管理功能。
- 內建 AI：使用本機的裝置端用戶端模型 (原生語言偵測、摘要和翻譯 API)。
- 密碼金鑰：密碼金鑰註冊、驗證和管理。
以下是各領域的幾個應用情境。如要查看所有使用案例，請參閱完整清單。
基準
Baseline 可讓開發人員清楚瞭解主要瀏覽器引擎中可互通的網頁功能。如果某項網頁功能屬於 Baseline，您就能信任瀏覽器的相容性程度。網頁功能分為三類，由 Baseline 定義：
- 僅限部分裝置使用表示這項功能無法互通。
- 「新推出」表示這項功能在過去 30 個月內才開始支援互通性。
- 廣泛支援表示這項功能已互通至少 30 個月。
Baseline 是網頁功能互通性的定義，也是專案中可設定的項目。您可以選擇基準目標，然後將其新增至 AGENTS.md 或 CLAUDE.md 檔案，設定專案使用該目標，例如：
This project's Baseline target is Baseline 2024.
<other project info...>
現代網頁指引和功能備援
Modern Web Guidance 使用各種新式網路功能。其中有些可能屬於「新推出」或「廣泛適用」的 Baseline，但有些可能「僅限部分地區」。如果某項功能不適用於所有瀏覽器，使用案例指南會提供具體操作說明，協助服務專員確保功能在不支援的瀏覽器中也能正常運作。在許多情況下，後備機制會以漸進式強化功能的形式實作，只要支援現代化功能，就能使用該功能。如果系統需要為不支援的瀏覽器提供 polyfill，代理程式一律會載入這些程式碼，因此只有在必要時才會產生費用。
如何確保準確度？
新式網站指南中的每個應用情境都包含一組持續校準的評估，確保輸出內容品質。
用途評估會執行自動 QA 測試架構，測試代理程式行為是否正確，而 Playwright 則扮演核心角色：
- 針對每份指南，我們都會開發 Playwright 指令碼，測試是否遵循指南的實作詳細資料，例如是否在必要位置觀察到
@media (prefers-reduced-motion: reduce)。 - 這些 Playwright 指令碼會持續根據「正確」的參考範例實作進行校正，預期通過率為 100%。另一方面，指令碼會針對刻意有瑕疵的實作項目進行檢查，預期通過率為 0%。
- 如果「正確」和刻意有瑕疵的實作項目都無法分別產生 100% 和 0% 的通過率，產生器會自動使用環境重試，直到達到 100% 校正為止。
- 最後，系統會對基礎應用程式進行端對端評估。其中一項評估是無引導式評估，這項控制項會使用預設訓練資料，而不叫用 Modern Web Guidance 來完成工作。另一項評估 (實驗) 則使用新版網頁指南處理相同工作。
我們每週會多次使用最先進的模型和程式碼代理執行評估，清楚瞭解代理在有/沒有我們指引的情況下，成效表現如何。初步結果顯示，為服務專員提供新式網頁指南後，平均而言，他們遵循新式最佳做法的程度提升了 37 個百分點。不過，實際結果可能因專案需求、模型、您撰寫的提示，以及偏好的代理程式編碼工具而異。
後續步驟
您現在已大致瞭解 Modern Web Guidance，以及這項功能如何協助您在 AI 程式碼編寫工作流程中，輕鬆採用現代網路最佳做法。您現在可以閱讀 Modern Web Guidance 提供的學科和應用實例。