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」，或前往「設定」頁面，依序點選「自訂」和「Build with Google Plugins」。
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
您可以在「Skill Manager」中找到 Modern Web Guidance，依序前往「Settings」 >「AI 助理」 >「Skills」即可使用。選取技能，開啟詳細資料頁面。如要安裝技能，請按一下「Install」按鈕，將技能套用至目前的 IDE 執行個體。
GitHub CLI
gh skill install GoogleChrome/modern-web-guidance
npx skills
npx skills add GoogleChrome/modern-web-guidance
Claude Code
claude plugin install modern-web-guidance@claude-plugins-official
Claude Code CLI
如要安裝 Modern Web Guidance，並搭配 Claude Code CLI 使用，請按照下列三個步驟操作：
1. 新增市集：
/plugin marketplace add GoogleChrome/modern-web-guidance
2. 從 Marketplace 安裝外掛程式：
/plugin install modern-web-guidance@googlechrome
3. 重新載入外掛程式：
/reload-plugins
Codex
codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome
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
Grok
grok plugin install https://github.com/GoogleChrome/modern-web-guidance --trust
Kimi Code
/plugins install https://github.com/GoogleChrome/modern-web-guidance
安裝前先探索
安裝前，請先搜尋查詢或依 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":"ui-behaviors","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":"ui-behaviors","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":"ui-behaviors","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 模型往往會提供過時的建議，不會考量專案需求或瀏覽器支援條件，也不會根據特定專案的基準需求量身打造指引。
Modern Web Guidance 可解決這些缺點，確保 AI 輔助程式設計工作流程具備相關工具，能優先採用較新的網頁平台功能，並考量備用方案。
Modern Web Guidance 包含哪些內容？
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：使用本機裝置端用戶端模型 (原生 Language Detection、Summarization 和 Translation API)。
- 密碼金鑰：密碼金鑰註冊、驗證和管理。
以下是各類別的部分指南。如要查看所有指南，請參閱指南完整清單。
基準
基準可讓開發人員清楚瞭解哪些網頁功能可在主要瀏覽器引擎中互通。如果網頁功能屬於基準，您就可以信任瀏覽器相容性。網頁功能可分為 Baseline 定義的三種類別：
- 有限供應表示功能無法互通。
- 「新推出」表示該功能在過去 30 個月內才開始支援互通。
- 「廣泛可用」表示功能已互通至少 30 個月。
雖然基準是網頁功能互通性的定義，但也是專案的可設定層面。您可以選擇基準目標，然後將其新增至 AGENTS.md 或 CLAUDE.md 檔案，設定專案使用該目標，例如：
This project's Baseline target is Baseline 2024.
<other project info...>
Modern Web Guidance 和功能備用方案
Modern Web Guidance 採用多種現代網頁功能。其中有些功能可能屬於「新推出」或「廣泛可用」的基準功能，有些則可能屬於「有限可用」功能。如果功能尚未廣泛推出，用途指南會提供具體操作說明，協助服務專員確保不支援該功能的瀏覽器也能享有更廣泛的相容性。在許多情況下，備用方案會以漸進增強功能的形式實作，只要支援新式功能，就能使用。如果需要為不支援的瀏覽器提供 polyfill，代理程式一律會收到指示，在特定條件下載入 polyfill，因此只會在必要時產生費用。
如何確保準確度？
Modern Web Guidance 的每個用途都包含一組評估項目，會持續校正以確保輸出內容品質。
用途評估會執行自動化品質確保駕馭系統，測試代理行為是否正確，其中 Playwright 扮演核心角色：
- 我們會為每份指南開發 Playwright 指令碼，測試是否遵循指南的實作細節，例如是否在必要時觀察到
@media (prefers-reduced-motion: reduce)。 - 這些 Playwright 指令碼會持續根據「正確」的參考示範實作進行校正，預期通過率為 100%。另一方面，指令碼會檢查刻意有缺陷的導入作業，預期通過率為 0%。
- 如果「正確」和刻意有瑕疵的實作項目，未能分別產生 100% 和 0% 的通過率，生成器會自動使用情境重試，直到達到 100% 校正為止。
- 最後，對基礎應用程式進行端對端評估。其中一項評估為無引導，也就是對照組，使用預設訓練資料，不叫用 Modern Web Guidance 來完成工作。另一項評估 (實驗組) 則使用 Modern Web Guidance 處理相同工作。
我們每週會使用最先進的模型和程式設計代理執行多次評估，清楚瞭解代理在有/無引導的情況下，成效如何。初步結果顯示，代理程式採用 Modern Web Guidance 後，遵循現代最佳做法的比例平均提升 37 個百分點。不過，實際結果可能因專案需求、模型、提示和偏好的代理程式編碼工具而異。
後續步驟
您現在已大致瞭解 Modern Web Guidance，以及這項功能如何協助您在 AI 程式設計工作流程中，輕鬆採用現代網頁最佳做法。現在可以查看 Modern Web Guidance 提供的指南。