Modern Web Guidance 是由 Google Chrome 團隊發起、Firefox、Microsoft Edge 與 MDN 共同參與的開源技能集，1.0 穩定版於 2026 年 11 月 10 日發布。它把現代 HTML、CSS、Web API 與瀏覽器相容性知識交給 Claude Code、Codex、Copilot CLI 等 AI 編碼代理，讓代理在寫網頁或整理舊碼時，先查適用的做法。
大型語言模型的訓練資料包含大量舊程式碼，即使知道新 API，也可能沿用不必要的 JavaScript 實作。Modern Web Guidance 讓代理依任務檢索指南，再按專案的瀏覽器支援要求選擇功能。使用者可以從專案目錄執行 npx modern-web-guidance@latest install 安裝，接著用一個小型介面任務確認指南有被讀取。
這套技能適合用 AI 編碼代理建立介面、維護既有網站的開發者與團隊。官方文件已有繁體中文版；讀者可以先掌握安裝、Baseline 相容性目標與舊碼掃描，再用瀏覽器測試驗收實際產出。它提供開發知識，搜尋排名仍取決於網站內容、技術狀態與其他搜尋訊號。
Modern Web Guidance 是什麼：裝進編碼代理的網頁平台知識庫
Modern Web Guidance 的核心是一組網頁開發技能：代理先搜尋符合任務的指南，再取回需要的內容。安裝用的技能集位於 GoogleChrome/modern-web-guidance，原始指南、評測與貢獻流程則放在 modern-web-guidance-src 原始專案庫，CLI 透過 npm 套件發布。
技能（skill）的本體是代理可讀取的指令與知識檔案。它讓代理用 CLI 搜尋、取回相關指南，而不必一次把整套文件放進上下文。Chrome 團隊在1.0 公告說明，指南加入領域技術負責人的審核，面向使用者的指南也有專門的可及性審查；Baseline 資料則協助判斷瀏覽器支援範圍。
想掌握它的現況，官方管道比任何轉述都新。主文件與開源庫的提交紀錄都是公開的，指南的改版脈絡一翻就有；遇到代理做出看不懂的選擇，回頭查對應那篇指南最快。npm 套件頁隨每次發布更新版本資訊，幾個入口互相對照，就能拼出完整的現況輪廓。
專案在 2026 年 5 月 Google I/O 公開早期預覽，11 月 10 日進入 1.0 穩定版。這次更新除了擴充指南，也加入既有程式碼的現代化掃描與更完整的評測。判斷是否適合導入時，指南是否涵蓋自己的需求、代理是否確實使用指南，比星數與版本發布次數更有參考價值。
Modern Web Guidance 補充的是開發知識。Claude 或 GPT 等模型仍負責理解需求與產出程式碼；MCP 則可讓代理連接工具，進一步檢查執行結果。Modern Web Guidance 屬於 Chrome 開發生態，Google Search Central 負責的檢索、索引與搜尋文件是另一套資源。
它解決的問題：AI 寫的前端程式碼停在過去
編碼代理可能知道某項 Web API，卻不熟悉完整的實作細節。例如對話方塊的焦點管理、離場動畫、減少動態效果偏好，以及瀏覽器不支援功能時的備援，都可能在一次生成中遺漏。這些缺口會讓前端程式碼看似能動，實際使用時卻出現可及性、效能或維護問題。
舊寫法常見有兩個原因：訓練資料累積了多年的舊教學與程式碼，代理也會模仿現有專案的周邊模式。即使模型認識新功能，仍可能缺少可靠的生產環境範例。技能指南將用法、陷阱與相容性條件一起提供，補上單純知道 API 名稱仍不足的部分。
具體例子包括：原生 <dialog> 搭配 @starting-style 處理開場效果、容器查詢讓元件依容器寬度調整版面，以及 scheduler.yield() 將長任務切段。這些功能的支援狀態不同，採用前須按專案的 Baseline 目標核對；必要時保留漸進增強或條件式備援，不能只因寫法較新就全面替換。
不必要的函式庫與重複實作會增加頁面重量和維護範圍；自製互動也需要自行處理鍵盤操作、焦點與狀態。原生功能若符合需求，可以減少這部分工作。不過既有函式庫可能仍承擔複雜行為與舊瀏覽器支援，是否移除要看實際使用情境。
Chrome for Developers 的 1.0 公告貼文以「原生 HTML 與 CSS 幾行能完成的功能，代理卻可能寫出一百行自製 JavaScript」描述這種落差。這是對常見開發模式的說明，個別專案仍要比較功能、相容性與維護成本。
Left to their own devices, AI coding agents will happily write 100 lines of custom JavaScript for something modern HTML and CSS can do natively in a few lines.
— Chrome for Developers (@ChromiumDev) November 10, 2026
Today, in partnership with @FirefoxWebDevs, @MozDevNet, and @MSEdgeDev, we're releasing Modern Web Guidance 1.0 with… pic.twitter.com/9jEFZMx6j4
Chrome for Developers 公告 Modern Web Guidance 1.0，說明原生網頁功能與跨瀏覽器合作的方向。
這類工具的效果需要對照具體任務。官方 README 的評測快照記錄：2026 年 11 月 8 日，Claude Code（opus-5-5）執行 215 項任務、1,801 項檢查時，未使用與使用指南的檢查通過率分別為 57% 與 88%，相差 31 個百分點。這是該次模型與測試集的結果，不能當成每個代理或專案的固定提升幅度。
Modern Web Guidance 評測儀表板將相同任務分成有、無指南的配對試驗，再以真實瀏覽器檢查 DOM、樣式、原始碼與行為要求。通過率是「通過的檢查數 ÷ 執行的檢查數」；基礎設施錯誤或評分前逾時的配對會排除。它衡量特定最佳實務，也只涵蓋部分可及性要求，不能代替完整 WCAG 稽核或實際專案驗收。
1.0 版的實際內容：審計掃描、真人審查與公開評測
1.0 公告列出四個重點：既有程式碼庫的現代化掃描、擴充的指南庫、真人專家審查，以及涵蓋全部指南的公開評測。掃描功能把 Modern Web Guidance 從新程式碼的參考資料，延伸到既有專案的改善流程，適合先找出可以小範圍重構的位置。
現代化工作流先在本機掃描 HTML、CSS、JavaScript／TypeScript 等檔案，再由代理讀取上下文，排除刻意保留的備援或相似語法。掃描只涵蓋能可靠辨識的一部分舊模式；有找到問題，不代表整個專案都已完成稽核。
重構流程應依序完成「掃描、確認上下文、提出計畫、修改與測試」。例如掃描到以 JavaScript 量測 scrollHeight 的文字輸入框時，代理還要確認它是否真的只是自動增高功能，才評估改用 CSS；若量測用於虛擬捲動，就不能直接刪除。web.dev 的人類可讀版指南也可供開發者直接核對。
治理文件規劃六個 Owners 席次：Chrome 兩席，Microsoft Edge 一席，Mozilla Firefox／MDN 一席，獨立專家兩席，其中一席尚待提名。決策先尋求共識，無法取得共識時以 Owners 簡單多數決；各領域指南由負責的技術主管與專家按審查流程維護。
公開儀表板讓讀者查看代理、模型、日期、樣本數與個別檢查，原始評測也放在專案庫。比較結果時要連同這些條件閱讀，避免把不同日期、不同模型的數字混在一起。每晚評測與穩定版基準測試會持續更新，文章中的單次快照只適合說明方法。
四種工作情境：新介面、舊碼現代化、安全與效能
官方主文件以四種工作情境示範用法：建立新介面、現代化舊程式碼、改善安全與改善效能。例如用容器查詢做可調整的卡片、將舊彈窗改成原生對話方塊、設定 CSP，或處理影響 INP 的長任務。這些是任務入口，完整指南還依 HTML、CSS、表單、可及性等領域分類。
指南依任務讀取。代理先搜尋對應的網頁功能或介面模式，再取回相關指南；一般後端、資料庫與基礎設施工作不屬於核心觸發範圍。是否真的讀取仍取決於代理對技能的辨識與執行，團隊應在任務紀錄中確認，而非只看安裝完成訊息。
Baseline 相容性目標決定代理應照顧的瀏覽器範圍。未設定時預設採用 Baseline Widely available，也就是已跨主要瀏覽器互通至少 30 個月的功能。指南也可能涉及較新的功能，此時須依說明使用漸進增強或備援；Baseline 並不代表所有使用者的舊裝置都已支援。
安全指南涵蓋 HTML 清理、嚴格 CSP、Passkey 等模式，可作為代理查找做法的共同資料。團隊仍需要自己的資料處理、權限、部署與事件應變規範；裝一套技能無法取代這些決策，也不能替個別網站完成安全稽核。
效能改善要有前後資料。可以先用 Lighthouse 或 PageSpeed Insights 記錄行動版與桌機的載入結果，再讓代理處理一項問題；讀者也可先熟悉 web.dev 與網站效能檢測，再把實際驗收納入 技術 SEO 排查流程。Lighthouse 是實驗室測試，INP 等實際使用者表現仍要搭配 CrUX 或自建量測。
跨瀏覽器共治：Firefox 與 Edge 為何一起背書
1.0 公告明確寫出 Firefox 與 Edge 加入 Chrome，發布貼文也列出 Firefox Web Developers 與 MDN。這代表專案有跨瀏覽器的參與與審查機制；實作時仍須核對各功能的相容性資料、專案目標與備援，不能將合作名單視為每個 API 都已全面支援。
對需要跨瀏覽器交付的團隊，共同維護的指南可以減少只參考單一實作的偏差。驗收條件仍要具體列出：支援哪些瀏覽器、鍵盤是否能完成操作、焦點是否正確返回，以及功能不支援時如何處理。這些條件比單寫「採用最新技術」更容易檢查。
Microsoft Edge 團隊的同日貼文也說明合作方向：讓代理善用平台的原生功能，減少自製 JavaScript 替代方案。這則貼文可以與 Chrome 公告對照，確認合作確實來自不同瀏覽器團隊。
Using the platform is the more direct route to efficient, accessible, and high-performance web experiences. Modern Web Guidance guides your coding agents towards using native platform features instead of custom JS workarounds. We're excited to partner with @ChromiumDev,… https://t.co/ahEDMaPESW
— Microsoft Edge Dev (@MSEdgeDev) November 10, 2026
Microsoft Edge 開發者團隊確認參與合作，並說明採用原生網頁功能的方向。
MDN 長期維護 Web API 與瀏覽器相容性文件，Mozilla Firefox／MDN 也在專案治理名單中。遇到指南建議與實際支援條件不一致時，可以回到對應 MDN 文件、Baseline 資料與專案 issue 核對，再決定保留備援或提出修正。
安裝與支援的代理：一行指令裝進工作流
先準備可使用 npx 的 Node.js／npm 環境，再切換到要使用技能的專案目錄。官方建議使用 Modern Web Guidance CLI 安裝，它會執行互動式安裝流程；需要自選技能包或安裝偏好時，可加上 --choose。以下指令是安裝技能，不會直接替專案重寫前端程式碼。
npx modern-web-guidance@latest install裝完後開一個小型任務，明確請代理「使用 Modern Web Guidance 建立可用鍵盤操作、支援減少動態效果偏好的對話方塊，並先列出找到的指南」。先確認任務紀錄有 search、retrieve 與對應指南，再檢查產出與瀏覽器行為。只有看到原生元素，仍不足以證明技能已被讀取。
想先確認指南內容，也能直接搜尋。以下以對話方塊動畫為例，先查詢相關項目，再用回傳的 ID 取回內容；這一步只證明 CLI 可取得指南，代理是否在任務中採用仍要另行確認。
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"接著在專案的 AGENTS.md 專案指示或 CLAUDE.md 寫明 Baseline 目標。下例採用官方文件示範的 Baseline 2024；實際目標要依網站使用者與支援需求選擇。
This project's Baseline target is Baseline 2024.各代理也有自己的外掛入口。Claude Code 可透過外掛市集安裝；OpenAI Codex、Cursor、Copilot CLI、Antigravity 等也有對應方式，Vercel 的 npx skills 格式亦可使用。依官方各代理安裝選項選一種路徑即可，避免同時用多種方法重複安裝。
團隊可先在一個專案導入，保存安裝前後的程式碼與驗收結果，再將適用的安裝方式和 Baseline 目標寫進開發環境文件。技能提供共用參考，設計決策、測試與程式碼審查仍由團隊負責。
官方繁體中文文件部分標題使用「現代化網站指南」，正文與套件則保留 Modern Web Guidance 英文名；搜尋與安裝時使用英文原名最容易對照。官方實作課程 Modern Web Guidance 101則以舊版書店網頁應用，示範設定 Baseline 目標、量測效能與逐步改善的流程。
透過官方 CLI 安裝會啟用自動更新；要手動更新既有安裝，使用下列 update 指令。若採代理自己的外掛方式安裝，更新機制應依該代理的文件處理。
npx modern-web-guidance@latest update整理既有專案時，先請代理「掃描舊模式、確認上下文，再提出現代化計畫」，避免一開始就要求全面改寫。也可直接執行下列掃描指令取得發現事項，再逐項檢查與測試。
npx modern-web-guidance@latest legacy-scan .Modern Web Guidance 與 SEO：如何驗收網站品質
Modern Web Guidance 影響的是開發品質。當網站由 AI 代理生成與維護時，過時寫法、不必要的 JavaScript 與錯誤互動，都可能影響載入、可及性與操作體驗，這也是搜尋引擎最佳化中技術面的工作。安裝技能本身不會改變搜尋結果，仍需把建議實作成可驗證的網站改善。
Core Web Vitals 三項指標的良好門檻為 LCP ≤ 2.5 秒、INP ≤ 200 毫秒、CLS ≤ 0.1，並以行動版與桌機實際頁面載入的第 75 百分位數分別評估。web.dev 的門檻說明與 Google 搜尋的頁面體驗文件都可核對；取得良好結果並不保證排名居前。
導入時先確認安裝器新增或更新的技能檔與專案設定，再檢查代理會在什麼任務讀取它。程式碼與實際頁面的檢查可搭配網站程式碼與 SEO 驗收方法。接著挑一個可控制的改善項目，例如表單驗證或對話方塊，透過拉取請求檢視差異、測試與回復方式，避免一次將所有舊碼改寫。
對內容與行銷團隊，可以把「提供瀏覽器支援目標、使用適用的現代指南、交付前後測試結果」寫進網站製作規格。在搜尋入口包含 AI 搜尋的情境下，內容仍須能被正常存取與理解；技能負責協助開發，不能代替內容來源、檢索與索引檢查。
1.0 官方案例提到 note inc.、WeTV 與 Policybazaar 等團隊的使用經驗。這些案例可用來理解工作流如何結合指南與執行期檢查，結果屬於各自的專案與量測條件，委外驗收仍應要求自己網站的實際資料。
容易放在一起討論的還有 llms.txt 導讀檔：它是網站提供內容入口的提案，Modern Web Guidance 則是給開發代理使用的技能集。兩者用途不同，能否被個別代理採用也不同；Google 搜尋的 AI 功能文件沒有要求額外的 AI 文字檔，不能將 llms.txt 視為取得索引或 AI 引用的必要條件。
三個容易混淆的名字：MWG、Web Guide 與 Search Central
Modern Web Guidance 是開發工具，Web Guide 與 Search Central 則屬於搜尋生態。Google 的 Web Guide 公告將它定義為利用 AI 組織搜尋結果的 Search Labs 實驗，最初在 Web 分頁提供。它使用的 query fan-out 技術與 AI Mode 相似，但兩者不能直接畫上等號。
| 名稱 | 隸屬 | 性質 | 主要使用者 |
|---|---|---|---|
| Modern Web Guidance | Chrome 團隊，開源專案 | 給編碼代理的技能集 | 寫網站的開發者與 AI 代理 |
| Web Guide | Google Search Labs 實驗 | 以 AI 分組整理網頁搜尋結果 | 搜尋使用者 |
| Search Central | Google Search | 搜尋官方文件與工具 | 網站管理員與 SEO 從業者 |
Google Search Central 搜尋中心持續提供搜尋文件，SEO 入門指南也屬於這個體系。需要查詢檢索、索引或搜尋外觀規則時，應直接閱讀這裡的文件。
Web Guide 搜尋結果整理方式則以 AI 將相關網頁依查詢面向分組。判斷來源時，可先看用途與網域：Modern Web Guidance 的主文件在 developer.chrome.com，網頁開發學習資料多見於 web.dev，Google 搜尋文件則在 developers.google.com/search。
若目標是改善 AI 寫出的網頁，從 Modern Web Guidance 的安裝與指南開始；若要了解搜尋結果如何呈現，查 Web Guide；若要處理網站檢索與索引，查 Search Central。依任務選入口，才能找到對應的操作與驗收方式。
Modern Web Guidance 常見問題
Modern Web Guidance 有官方中文名稱嗎？
官方繁體中文文件的部分標題使用「現代化網站指南」，正文與套件也保留 Modern Web Guidance 英文名。搜尋文件、安裝套件或引用專案時，使用英文原名最容易對照，並可避免與 Web Guide、Google Search Central 混淆。
它和 Google Search Central 是同一個東西嗎？
兩者用途不同。Modern Web Guidance 是 Chrome 開發生態提供給編碼代理的技能集；Google Search Central 是搜尋中心，提供檢索、索引與搜尋外觀等官方文件。Web Guide 則是 Search Labs 的搜尋結果整理實驗，三者應依要完成的任務選用。
Modern Web Guidance 要付費嗎？
技能集以開源方式提供，可透過 npm 安裝，專案沒有為這套技能收取訂閱費。使用的編碼代理可能另有訂閱或 API 費用，讀取指南與執行任務也可能增加 Token 用量，費用依代理與模型的計費方式而定。
除了 Claude Code 還支援哪些代理？
官方安裝選項包含 Codex、Copilot CLI、Gemini CLI、Antigravity 等，1.0 公告也列出 Cursor 與 WebStorm。支援 Agent Skills 的工具可使用相容的安裝方式；各代理的外掛與更新機制不同，應依官方安裝文件選擇。裝完仍須在任務紀錄中確認指南有被搜尋、讀取與採用。
Modern Web Guidance 和 MCP 伺服器有什麼不同？
Modern Web Guidance 透過技能與 CLI 提供開發知識；MCP 是讓代理連接外部工具的通訊協定。前者可協助代理選擇實作方式，後者則可連接瀏覽器等工具檢查結果。兩者可以搭配，例如先查指南，再用 Chrome DevTools 的工具確認實際互動、可及性與效能。
安裝之後 SEO 排名會變好嗎？
安裝本身不會改變搜尋排名。Modern Web Guidance 協助代理改善程式碼與網站體驗，仍要實作、部署並量測，才知道網站是否改善。Google 的頁面體驗文件說明，Core Web Vitals 會用於排名系統，但取得良好分數也不保證排名居前；內容與其他搜尋訊號仍然重要。
不寫程式的行銷人員需要懂它嗎？
可先理解用途與驗收方法。委外或用 AI 工具製作網站時，請團隊列出瀏覽器支援目標、採用的指南、程式碼差異與測試結果，比只要求安裝技能更具體。技能安裝完成只能證明環境準備好，不能代替網站實際可用的證據。
討論與提問