Chrome 推出 Modern Web Guidance：Google 把「告訴 AI 寫對現代 Web 程式碼」這件事，做成一個 npm 包

如果上週 Chrome 149 origin trial 端出的 WebMCP 是在教「網站怎麼跟 AI 代理人對話」，那這禮拜 Google I/O 2026 主題演講同場端出的 Modern Web Guidance，就是這個握手的另一半——教「AI 代理人怎麼把現代 Web 程式碼寫對」。Google 5 月 21 日宣布，當天就把開源 repo 釋出，週末這幾天 npm 套件熱度在我關注的前端社群一路爬上來。

賣相不華麗，但這正是這個產業最缺的：一份有立場、會持續更新的「2026 年要怎麼做 X」食譜集，包裝成可被 AI 編碼代理人吃進去的格式。把它接進你的 Claude Code、Cursor、Copilot、或 Gemini Code Assist 工作階段，代理人就不會再用 2019 年的 jQuery pattern 來解 2026 年的問題。

一、Modern Web Guidance 是什麼

這個套件可以用 npm install @chrome/modern-web-guidance 安裝（也作為 Claude/Cursor/Copilot 的 skills 檔發佈），把 128 個 web 平台特性整理成超過 100 個經專家驗證的使用案例。每個案例都是一段結構化的「什麼時候用、什麼時候不用、規範性的程式碼長這樣、典型的踩雷模式長那樣」的食譜。內容由 Chrome DevRel 與 WebDX Community Group 共同維護，並接上 Google 的 Baseline——把每個 web 特性分為 Limited / Newly available / Widely available 三級——所以代理人會自動尊重你 package.json 宣告的相容性目標。

關鍵是：這不是一份文章列表。它是一份結構化的語料，可被機器讀，每一個條目都有維護者簽署、交叉連結到 spec。當編碼代理人讀它，代理人不必「相信」一篇隨機部落格——這份語料的品質保證機制，跟 npm 上官方的 TypeScript 型別定義是同一級。

Google 自家 benchmark 給出的標題數字是：把 Modern Web Guidance 加入通用前沿編碼代理人的 context 之後，「符合當代 Web 最佳實務的程度」跳升 +37 個百分點。這不是行銷數字。這是「我們一次補回過去一年 AI 生成程式碼品質倒退」的數字。

二、為什麼這對 PHP / Laravel / Flutter 團隊有意義

如果你最近有跟編碼代理人對寫過 Laravel Blade view 或 Flutter web widget，你知道那個典型的失敗模式。代理人寫得出合法程式碼，但它用的是訓練資料裡的風格——而訓練資料裡 Stack Overflow 答案大多停留在 2018–2022 年。CSS Grid？沒問題，但加一段沒人要求的 float fallback。表單驗證？沒問題，但寫一個手刻 regex 而不是 <input pattern>。圖片載入？沒問題，但塞一個 lazyload.js 替 loading="lazy" 做 shim。

Modern Web Guidance 修這件事的方式，是當代理人模型訓練資料之上的「權威性近期性層」。代理人會以可讀格式被告知：「截至 2026 年 5 月，做 X 的正確方法是 Y，程式碼長這樣，Baseline 狀態是這樣。」對於前端主要是 Blade + Alpine.js + Tailwind 的 Laravel 團隊，結果是 view 變乾淨、冗餘 lib 變少、Lighthouse 分數隨著 codebase 老化是往上漂而不是往下漂。

對於把 web 當目標平台的 Flutter 團隊，這份套件現在收錄了 View Transitions API、Container Queries、:has()、anchor positioning、popover API 等十多個 2024–2026 特性的範本——這些都是 Flutter web 渲染器這兩年學會互通的東西。你的 AI 代理人終於會寫出符合 web 規範的 Flutter，而不是過去 Flutter web demo 常見的「HTML 殼裡塞一座 Dart 孤島」風格。

三、這禮拜真的能跑的工作流

整合是一行的事。Claude Code：把 .claude/skills/modern-web-guidance/ skill 丟進專案，在 CLAUDE.md 引用。Cursor：把套件當成 .mdc 規則加進去。Copilot：在 GitHub 市集啟用 marketplace skill。Gemini Code Assist：對任何 root 有 package.json 的專案都預設啟用——這是 Google 這禮拜的一個小小立場。

比較容易被忽略的一步是 宣告你的 Baseline target。在 package.json 加上 "baselineTarget": "newly-available"（保守型用 widely-available、純綠地實驗用 limited）。代理人會讀這個欄位，並拒絕寫超過你宣告相容範圍的程式碼，即使它知道那個特性存在。光這一個欄位，就是「代理人寫了 field-sizing: content 結果 Safari 17 壞掉」與「代理人替你出貨的瀏覽器選了對的做法」的差別。

四、用一個週末看下來，效果最明顯的三種模式

在內部專案上跑了三天代理人 session，三種模式很快就跑出來。

第一種是 表單重構。把一份五年前的 Laravel 表單 view 丟給接上 Modern Web Guidance 的代理人，請它「用當代平台特性與 Tailwind 4 現代化這份檔案」，diff 會很戲劇化——<dialog> 取代 jQuery modal lib、popover API 取代自製 tooltip、<input> 內建驗證屬性取代 JS 端 check function、Intl.RelativeTimeFormat 取代 moment.js。行數降、bundle 降更多、Lighthouse 自動就點上來。

第二種是 scroll-driven 與 view-transition 動畫。2024–2026 年平台這個方向的新東西很強，但很容易寫錯。接上 Modern Web Guidance 後，代理人寫出來的 scroll-timeline 動畫會在不支援的瀏覽器上 graceful degrade——這種細節在 review 看不到，要等 production 使用者抱怨才會被發現。

第三種是 無障礙。語料裡每一個食譜都有 a11y 段落，代理人現在預設會寫對 ARIA role、focus 管理、reduced-motion 處理。對於還在做人工 a11y 稽核的代理商，代理人產生的程式碼需要回工的量大幅下降。

五、策略上的解讀

這背後其實有比「Google 推一個文件套件」更大的故事。AI 編碼代理人圈花了兩年在吵：限制 AI 生成程式碼品質的瓶頸到底是模型、是 prompt、是檢索系統、還是事後評估？Modern Web Guidance 是 Google 押了一個明確的賭注：瓶頸是「策展過、可被機器讀、近期性受管理的知識」。模型的品質可以靠給對 context 提升，不是只能靠改 weight。如果 Google 賭對，預期下一季就會看到 Mozilla、Apple、Microsoft 以及主要開源維護者推出自家的 skills-style 套件。「skills 檔」變成跟 README、TypeScript 型別宣告同等基礎的、開源專案文件結構的一環，是有可能的。

對於今天就在出貨 web 程式碼的團隊，意涵很明確。手寫的最佳實務文件，半衰期很短。一份每次 commit 都會被代理人讀的、有版本管理的 skills 包，半衰期長很多，而且每工程師小時的產出更高。不論這個生態系最後怎麼標準化，「把自家內部慣例寫成 skills 檔、跟程式碼一起 commit」這個紀律，會變得跟「把 CI config 跟程式碼一起 commit」一樣常識。

我的觀點

AI 編碼熱潮一直讓我困擾的一件事是：模型在進步，但「產出程式碼品質」在會影響 codebase 長期健康的指標上一直在退步——a11y、現代特性使用、bundle 大小、語意 HTML。Modern Web Guidance 是我看到第一個直接對準這個錯位的基礎建設。

排到下禮拜。整合半天就好。複利效應是每個 sprint 多一分 Lighthouse、少一個回工 ticket，從現在往後每一個 sprint。半小時的投入，永久性的報酬。接上去。

對 Laravel/PHP 工作室特別說：在每個客戶 repo 裡都 commit 一份 Modern Web Guidance skill 檔，再疊一層自家薄薄的「House style」覆寫——你們的 Tailwind 慣例、表單驗證 pattern、錯誤頁範本。這個組合，是這個產業到目前為止最接近「資深前端工程師裝在盒子裡」的東西，而且不用錢。