AI 写的前端代码为什么总像 5 年前的？Chrome 官方出手了

来源：Chrome for Developers · Modern Web Guidance（根据官方文档整理）

你让 AI 写个弹窗，它给你手搓了一堆 JS 控制显示隐藏、手动管理焦点、再配一个 z-index 大战。你让它做个提示气泡，它第一反应是引入一个第三方库。

功能能跑，但写法停留在好几年前。浏览器明明早就原生支持 <dialog>、Popover API 了，AI 却像没听说过一样。

一个常见的原因是：AI 学到的代码里，老写法数量远多于新写法，而且它并不清楚某个新特性在各大浏览器里到底能不能放心用。

Chrome 团队最近推出的 Modern Web Guidance，就是冲着这个问题来的。

它是什么

Modern Web Guidance 是一组 skill（技能） ，可以把 Web 平台的专业知识、最佳实践和浏览器兼容性数据，直接嵌入到 AI 编码智能体里。

说白了，它不是新框架，也不是新工具链，而是给你的 AI 助手补了一份"现代 Web 知识库"，让它在写代码时优先参考官方推荐的现代做法。

怎么装

官方推荐使用 CLI 一键安装：

npx modern-web-guidance@latest install

如果你用的是具体某个工具，也可以按下面的方式装：

Claude Code

claude plugin install modern-web-guidance@claude-plugins-official

通用方式（Vercel Agent Skills）

npx skills add GoogleChrome/modern-web-guidance

另外，Copilot CLI 和 Antigravity CLI 也有对应的安装方式，具体命令在官方文档的安装页里可以查到。

它能帮你做什么

官方给了四类示例提示，基本代表了它的使用场景。

1. 打造全新体验

• 做一个带平滑展开 / 收起动画的手风琴组件
• 用 CSS Anchor Positioning 做一个滑动高亮跟随当前项的标签栏
• 用容器查询（Container Queries）让仪表盘卡片根据自身宽度调整布局

2. 旧代码现代化

• 把老式弹窗改成 <dialog> 元素，并用现代 CSS 加动画
• 把旧的 tooltip 迁移到 Popover API，配合 CSS Anchor Positioning

3. 提高安全性

• 基于 WebAuthn 实现 Passkey 登录流程
• 在不破坏现有功能的前提下，加上一份起步版 CSP（内容安全策略）
• 对站点做一次安全审计并给出改进建议

4. 提升性能

• 用户悬停在重要链接上时，提前预加载页面
• 排查长任务（Long Tasks），改善 INP
• 优化 LCP

配套资源

• 官方 Codelab 入门教程：拿一个旧版 Web 应用练手，学习怎么设置 Baseline 浏览器目标、优化 Core Web Vitals，把"通用的 AI 输出"变成更现代、性能更好的方案。
• 搭配"面向智能体的 Chrome 开发者工具" ：可以让 AI 跑实时性能审核、检查无障碍树、抓取控制台日志，然后自动套用对应的现代 Web 修复。
• 开源：项目在 GitHub 上（GoogleChrome/modern-web-guidance-src），欢迎提交 issue 和贡献内容。
• 官方还有一个概览视频，讲这个项目解决什么问题、怎么改进 AI 辅助的 Web 开发流程。

小结

Modern Web Guidance 的思路很简单：与其每次手动提醒 AI"请用 dialog 别手搓弹窗"，不如一次性把现代 Web 的最佳实践装进去。

如果你本来就在用 Claude Code 之类的工具写前端，装它的成本只有一行命令，值得试一试。

官网：developer.chrome.com/docs/modern-web-guidance

GitHub：GoogleChrome/modern-web-guidance-src