開始使用現代化網站指南

「現代網頁指南」是代理程式技能，可將現代最佳做法套用至 AI 輔助的程式設計工作流程。這有助於引導程式碼編寫代理程式避開常見網頁開發問題的舊有解決方法，改用應採用較新網頁平台功能的解決方案。

安裝

現代化網頁指引技能可安裝在各種代理程式中，讓您在保留偏好的工作流程時，仍能從代理程式提供的指引獲益。

建議透過 Chrome 團隊建構的 modern-web-guidance CLI 安裝。透過 modern-web-guidance CLI 安裝技能後，系統會自動更新技能。你可以透過 modern-web-guidance CLI 安裝，如下所示：

npx modern-web-guidance@latest install

如果您要開發 Chrome 擴充功能，建議使用下列指令：

npx modern-web-guidance@latest install --choose

這會執行互動式精靈，根據您的偏好安裝技能。

如果您不想使用 modern-web-guidance CLI，但仍想使用 Modern Web Guidance 技能，請繼續閱讀，瞭解如何為偏好的代理程式安裝這些技能。

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

您可以在「技能管理員」中找到「Modern Web Guidance」技能，依序點選「設定」 >「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

安裝前先瞭解

安裝前，請先評估 Modern Web Guidance 技能指南庫，方法是使用查詢搜尋或依 ID 擷取指南。如要執行這項操作，請使用 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 模型相比，現代網路指南技能可為網頁開發人員帶來以下三項優勢：

  1. AI 程式碼代理程式通常會預設採用較舊的解決方案，來解決現代網頁開發問題。這些解決方案通常包含 JavaScript，可為現代 CSS 和 HTML API 更適合解決的問題提供功能。
  2. 過去，AI 模型並不知道最新的網頁平台功能，或對這些功能有誤解。
  3. 最後，AI 模型通常會提供過時的建議，不會考量專案需求或瀏覽器支援條件，而是根據特定專案的 Baseline 需求調整指引。

現代網頁指南技能可解決這些缺點，確保 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 定義：

  • 僅限部分裝置表示這項功能無法互通。
  • 「新推出」表示這項功能最近 30 個月內才開始支援互通性。
  • 廣泛支援表示這項功能已互通至少 30 個月。

Baseline 是網頁功能互通性的定義，也是專案中可設定的層面。您可以選擇基準目標，然後將其新增至 AGENTS.md 或 CLAUDE.md 檔案，設定專案使用該目標，例如：

This project's Baseline target is Baseline 2024.

<other project info...>

現代化網頁指引和功能備援

現代化網頁指南會使用各種現代化網頁功能。其中有些可能屬於「新推出」或「廣泛適用」的 Baseline，但有些可能「僅限部分地區」。如果某項功能尚未廣泛推出，使用案例指南會提供具體操作說明，協助服務專員確保功能在不支援的瀏覽器中也能正常運作。在許多情況下，後備機制會以漸進式強化功能的形式實作，因此只要支援現代化功能，就能使用該功能。如果系統需要為不支援的瀏覽器提供 polyfill，代理程式一律會根據條件載入，因此只有在必要時才會產生費用。

如何確保準確度？

現代化網站指南中的每個用途都包含指南，且大多數用途會持續校準，引導 AI 服務專員產生優質輸出內容。

經過校正的用途會使用自動化 QA 測試架構，測試代理程式行為是否正確，而 Playwright 則扮演核心角色：

  1. 針對每份指南，我們都會開發 Playwright 指令碼，測試是否遵循指南的實作詳細資料，例如是否在必要位置觀察到 @media (prefers-reduced-motion: reduce)。
  2. 這些 Playwright 指令碼會持續根據「正確」的參考範例實作進行校正，預期通過率為 100%。另一方面，指令碼會針對刻意有瑕疵的實作項目進行檢查，預期通過率為 0%。
  3. 如果「正確」和刻意有瑕疵的實作項目都無法分別產生 100% 和 0% 的通過率，產生器會自動使用內容重試，直到達到 100% 校正為止。
  4. 最後，系統會對基礎應用程式進行端對端評估。其中一項評估是無引導式評估，這項評估會使用預設訓練資料，但不叫用 Modern Web Guidance 技能來完成工作，因此屬於控制項。另一項評估 (實驗) 則使用 Modern Web Guidance 技能處理相同工作。

我們每天都會使用最先進的模型和編碼代理執行評估，清楚瞭解代理在有/沒有指引的情況下，成效如何。初步結果顯示，為服務專員提供新式網頁指南後，平均而言，他們遵循新式最佳做法的程度提升了 37 個百分點。不過，實際結果可能因專案需求、模型、您撰寫的提示，以及偏好的代理程式編碼工具而異。

後續步驟

您現在已大致瞭解 Modern Web Guidance，以及這項功能如何協助您在 AI 程式碼編寫工作流程中，更輕鬆地採用現代網路最佳做法。您現在可以探索 Modern Web Guidance 提供的技能和應用實例。