发布时间：2026 年 11 月 10 日
在这个智能体 Web 开发的新时代，Web 开发者期望他们的编码智能体成为 Web 构建领域的专家。虽然最新的前沿编码模型功能强大，通常可以生成可运行的代码，但如果您让 Web 开发者审查 AI 生成的代码，他们几乎总能找到方法来提高代码的速度、无障碍性或安全性。
Chrome 正在大力投资智能体 Web 开发的未来，为了应对这一挑战，我们在 5 月的 Google I/O 大会上推出了 Modern Web Guidance 的早期预览版。Modern Web Guidance 是一套技能，可将 Web 平台专业知识、最佳实践和浏览器兼容性数据直接嵌入到您的编码智能体中。
今天，我们很高兴地宣布推出 Modern Web Guidance 1.0 稳定版，其中包含：
- 全新现代化工作流，可扫描现有代码库，帮助智能体发现安全现代化的机会。
- 扩展了指南数据库，针对数百个经过验证的 AI 知识断层，提供专家审核的跨浏览器解决方案。
- 更深入的人工专家审核：每份指南都经过内容领域技术负责人的审核批准，并且面向用户的指南还会接受专门的无障碍审核。
- 全面评估覆盖：我们为所有指南提供了公开评估信息中心，展示了与未使用 Modern Web Guidance 的代理相比，可衡量的改进。
随着 1.0 版本的发布，我们也很高兴地宣布，Modern Web Guidance 正在成为一项跨浏览器计划，Firefox 和 Edge 将与 Chrome 一起支持、改进跨浏览器兼容性，并为该项目做出贡献。基于我们与 Baseline 的共同努力，我们的目标是确保任何使用智能体进行编码的人都能充分利用现代 Web 平台的强大功能。
无论您使用何种模型或智能体 Harness，只要您在为 Web 构建应用，Modern Web Guidance 都应纳入您的 Agentic Workflows 中。
如需安装 Modern Web Guidance，请在项目目录中运行以下命令：
npx modern-web-guidance@latest install
或者，如果您已安装较低版本，则可以运行以下命令更新到 1.0：
npx modern-web-guidance@latest update
如需了解更多安装说明或详细信息，请参阅Modern Web Guidance 文档，或观看以下视频，了解简要概览：
为什么开发者和企业应该使用 Modern Web Guidance
不可否认，编码智能体帮助开发者以前所未有的速度编写代码。但在一个人人都在使用编码智能体的世界中，速度不再是竞争优势。
如今，在易用性和体验质量等基本因素上脱颖而出比以往任何时候都更加重要。Modern Web Guidance 可在以下方面为您提供帮助：
强化模型经常忽略的最佳实践
虽然前沿编码模型确实对许多最佳实践有很好的理解，但我们的评估表明，它们在许多重要领域仍有不足，例如：
- 无障碍功能：键盘焦点和惰性管理、减弱动态效果支持以及无障碍表单验证。
- 用户体验：滑动和轻触手势、对话框和弹出式窗口过渡，以及浅色/深色主题实现。
- 性能：主线程任务调度、屏幕外渲染隔离和布局偏移预防。
- 安全性：安全的 HTML 清理、严格的内容安全政策以及通行密钥凭证管理。
正确遵循无障碍功能最佳实践尤为重要，因为 ARIA 错误等失误可能会导致网页的无障碍程度比完全没有 ARIA 时还要低。对于 1.0 版，我们面向用户的指南已经过无障碍专家的审核，并使用真实的辅助技术进行了测试，这些专家每天都依赖这些技术。
为任务选用最合适的 Web 功能
AI 模型非常擅长找出如何使用 JavaScript 实现某种功能，但在许多情况下，HTML 或 CSS 功能可以用更少的代码实现相同的功能。由于这些元素由浏览器处理，因此通常性能更佳，并提供无障碍功能。例如：
- 用于为弹出式窗口和对话框添加动画效果的功能
- 用于增强基于滚动和滑动的互动的功能
- 更出色的 API，可实现流畅而自然的网页转换
新功能还可以通过对用户重要的方式改善网站体验。例如：
- 通行密钥和 WebAuthn：打造更快速、更安全的登录体验
- 自动填充：改进结账流程（尤其是在移动设备上），这些流程在使用基于 JavaScript 的自定义表单控件时经常失败
Modern Web Guidance 旨在根据您的浏览器支持要求，推荐最适合该作业的功能。其指南中嵌入了 Baseline 和浏览器兼容性数据，因此可以根据您项目的需求量身定制建议。
扫描代码库，寻找现代化改造机会
大多数 Web 开发工作并非在全新项目中进行。这种情况发生在现有的代码库中，这些代码库已经积累了多年过时的权宜解决方法、不必要的依赖项和不再需要的 polyfill。
1.0 版新增了现代化工作流，可分析您现有的 HTML、CSS、JavaScript 和 package.json，找到安全升级的机会，然后引导您的智能体完成更改。
/modern-web-guidance Modernize the code in this directory
在第一个版本中，现代化工作流使用静态分析来检查有限的模式集。我们选择从范围较窄、结果可预测的领域开始，然后逐步扩大范围。随着时间的推移，我们计划覆盖更多领域，包括智能体审计，即智能体直接对代码进行推理，而不仅仅是匹配已知模式。
及时了解 Web 平台的最新发展动态
Web 平台是一个不断变化的目标。浏览器在每个里程碑都会推出新功能，而您之前可能无法使用的现有功能也会随着每个新浏览器版本的发布而成为基准。
由于 Modern Web Guidance 是基于 Baseline 兼容性数据构建的，并且其建议由浏览器工程师、Web 标准专家和无障碍专家维护，因此这些建议会随着平台本身的发展而不断演变，现在您的项目也可以随之发展。
了解新的 Web 功能和最佳实践
虽然 Modern Web Guidance 主要是作为智能体工具而构建的，但我们从许多开发者那里了解到，他们实际上发现该指南本身就非常有用，可以作为学习资源。
即使在智能体编码时代，积累领域专业知识仍然很有价值。Modern Web Guidance 可以帮助您实现这一目标：您可以阅读指南本身，也可以使用 CLI 搜索用例并发现可能与您的项目相关的新技术。
将 Modern Web Guidance 与面向智能体的 Chrome 开发者工具搭配使用
在智能体 Web 开发中，编写代码只是工作流的一部分。您还需要运行该代码，以确保其按预期运行。因此，我们建议开发者将 Modern Web Guidance 与面向智能体的 Chrome 开发者工具搭配使用。
- Modern Web Guidance 可为您的智能体提供必要的专业知识，使其能够遵循现代最佳实践编写代码。
- 面向智能体的 Chrome 开发者工具可为 Agent Runtime 提供运行时可见性，使其能够在各种设备功能、用户偏好和网络条件下验证、调试和优化代码。
这些功能相辅相成，可帮助智能体在更少的轮次内找到更好的解决方案。以下是一些示例，展示了如何结合使用这些工具来最大限度地提高效果：
持续优化，直至达到效果目标
Modern Web Guidance 可以教您的代理如何有效拆分阻塞主线程的长时间运行的 JavaScript 任务，但无法测试您的代码，以了解这些 JavaScript 任务实际阻塞主线程的时长。
借助 Chrome 开发者工具中的代理，您可以在模拟的低端 CPU 上运行性能跟踪，以查看是否存在问题，然后根据 Modern Web Guidance 中的性能建议进行迭代，直到您的代码不会阻塞主线程超过 50 毫秒（这样就不会导致 INP 较差）。
测试和优化动画
Modern Web Guidance 可以向您的智能体展示如何正确且高效地为模态对话框、提示和弹出式菜单等功能添加动画效果，但即使有这些指南，您仍然需要验证这些动画在整个应用中使用时是否确实有效且美观。
面向智能体的 Chrome 开发者工具可以运行您的代码、与页面互动，并录制动画运行时的屏幕。然后，它会研究录制内容，以确保动画不仅能正常运行，而且与网站其余部分的风格和感觉相契合。
您还可以使用 Chrome 开发者工具来验证当 prefers-reduced-motion 设置后，组件是否遵循用户的偏好设置。
缓存视图，避免内存泄漏
Modern Web Guidance 可以教您的代理如何通过在内存中渲染和缓存视图，同时在无障碍树中正确隐藏视图，使 SPA 过渡感觉即时。
不过，在执行此操作时，请务必确保正确清理未使用的视图，以免在用户长时间停留在页面上时发生内存泄漏。面向智能体的 Chrome 开发者工具提供内存调试工具，可帮助智能体确保内存使用量不会无限制地增加。
如需详细了解如何结合使用 Modern Web Guidance 和面向智能体的 Chrome 开发者工具，请观看以下视频：
成功案例
世界各地的工程团队已经在使用 Modern Web Guidance 和 Chrome 开发者工具智能体来提高代码质量、加快交付速度并消除手动调试瓶颈：
Pensionbazaar 和 Policybazaar
Pensionbazaar 是印度金融科技公司 Paisabazaar 推出的全新退休规划平台，该平台将 Modern Web Guidance 与面向智能体的 Chrome 开发者工具相结合，用于构建和验证新页面，从而将周转时间缩短了 90% 以上（从大约 4 天缩短到几个小时），并将新界面上的界面 bug 减少了 90% 以上。其姊妹平台 Policybazaar 是印度领先的保险平台之一，拥有超过 9,700 万注册客户。该平台使用 Chrome 开发者工具代理，自动对大约 30 个高流量着陆页进行性能审核，从而将手动审核工作量减少了 92%：
“对于 Pensionbazaar，我们的首要任务是从第一天起就编写高质量的代码，以避免日后产生技术债务。Modern Web Guidance 引导我们的编码智能体采用现代 Web 标准和性能最佳实践，同时遵循我们特定的浏览器兼容性目标。这让我们的前端代码审核变得更加轻松快捷，最终缩短了开发周期。”
—Aman Soni，Policybazaar 工程经理
WeTV
腾讯的国际视频流媒体平台 WeTV 在其 CI/CD 流水线中添加了一个 AI 编码智能体，该智能体使用面向智能体的 Chrome 开发者工具诊断性能回归问题，并使用 Modern Web Guidance 通过现代 Web 平台功能修复这些问题。现在，该智能体可自动诊断并解决 90% 的失败性能检查，将调试和解决时间缩短 87%（从 4 小时缩短至 30 分钟，包括人工评估）：
“无论是在速度还是质量方面，结果都非常出色。Chrome 开发者工具提供的诊断数据分析和现代 Web 指南为我们修复复杂的布局问题提供了可靠的参考。每次修复后，我们都会进行严格的验证，当前的成功率和稳定性显著提升了我们对发布的信心。”
—Yangjie Zheng，WeTV（腾讯）工程主管
note inc.
note inc. 是日本最大的创作者和媒体平台之一，月活跃用户数超过 9,000 万。该平台将 Modern Web Guidance 与其内部设计体系结合使用，作为其持续努力实现 Next.js 前端现代化的一部分。在对其生产代码库进行的 180 次运行评估中，Modern Web Guidance 通过引导智能体使用原生 HTML 和 CSS 功能（而非自定义 JavaScript）来实现滚动动画、提示和折叠面板，将现代 Web 检查的通过率从 61% 提高到了 94%。此外，在 431 个合并的 PR 中，正确设置 LCP 图片优先级的比例提高了 28%：
“note 的使命是‘开始并持续创作’，因此我们的平台必须保持快速，让每位创作者和读者都能轻松访问。随着越来越多的代码由 AI 编码智能体编写，Modern Web Guidance 可帮助它们采用基于标准的现代解决方案，而不是退回到旧版 JavaScript 模式。它还指出了容易被忽略的细节，例如图片加载优先级和表单无障碍功能。结合我们的设计体系，它让我们能够在保持界面一致的同时，不断改进 Note。”
—Takehiko Itabashi，note inc. 技术副总裁
MetaMask
MetaMask 是一个自托管金融平台，在约 190 个国家/地区拥有超过 1 亿次下载量。该平台将 Modern Web Guidance 作为自动化审核机器人运行，对开源浏览器扩展程序的每个拉取请求进行审核，只需配置一个三行提示即可。在最初的五周内，该机器人审核了大约 480 个拉取请求，并对其中 64 个发表了评论，促使工程师修复了 43 个发现的问题（主要是 linter 无法捕获的无障碍、HTML 语义和表单问题），从评论到修复的中位时间为 15 分钟：
“评价真的很有帮助。他们帮助我们的工程师了解并熟悉了 Interest Invokers 和 Popover API 等现代 API。它没有增加 PR 审核时间，反而可能缩短了审核时间。否则，MWG 发现的问题就需要熟悉这些现代 Web 技术的人工审核员来处理。”
—Francis Nepomuceno，MetaMask 用户体验工程师
生态系统和社区支持
Modern Web Guidance 最初是 Chrome 内部的一项计划，但达到 1.0 里程碑是 Web 社区众多专家共同努力的结果。
感谢负责监督每个 Web 平台领域的内容领域技术主管、Firefox 和 Edge 的浏览器合作伙伴、编写和测试指南的独立 Web 标准和无障碍专家，以及所有帮助打造此版本的 GitHub 开源贡献者！
如果您发现编码代理对 Web 的了解存在差距，或者想要帮助改进现有指南，请参阅贡献指南，了解如何参与其中。
开始使用 Modern Web Guidance
如需将 Modern Web Guidance 添加到项目中，请在项目目录中运行 CLI 安装程序：
npx modern-web-guidance@latest install
或者，如果您已安装较低版本，则可以运行以下命令更新到 1.0：
npx modern-web-guidance@latest update
除了 CLI 之外，您还可以通过大多数热门编码智能体插件市场直接安装和更新 Modern Web Guidance，包括 Claude Code、Codex、Cursor、Antigravity、Copilot、WebStorm、Kimi Code 和 Grok Build。
如需了解详情，请参阅以下资源：