Modern Web Guidance 是一组技能，可将 Web 平台专业知识、最佳实践和浏览器兼容性数据直接嵌入到您的编码智能体中。它有助于引导您的编码智能体摆脱旧模式，转而采用能够充分利用现代 Web 平台的功能和能力的解决方案。
安装
Modern Web Guidance 可以安装并与任何支持技能的编码智能体搭配使用。
modern-web-guidance CLI（推荐）
我们建议您通过 Chrome 团队构建的 modern-web-guidance CLI 进行安装。通过 modern-web-guidance CLI 安装 Modern Web Guidance 后，系统会自动更新。您可以像这样通过 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”，或者在设置 页面中依次选择自定义 和 Build with Google Plugins。
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
您可以在 Skill Manager 中找到 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. 添加 Marketplace：
/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. 添加 Marketplace：
/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 模型相比，Modern Web Guidance 为 Web 开发者带来了以下三个方面的优势：
- AI 编码智能体往往会默认采用较旧的过时解决方案来解决现代 Web 开发问题。这些解决方案通常包含 JavaScript，用于为现代 CSS 和 HTML API 能够更好地解决的问题提供功能。
- AI 模型过去并不了解最新的 Web 平台功能，或者掌握的信息不正确。
- 最后，AI 模型往往会提出过时的建议，这些建议不会考虑项目要求或浏览器支持条件，而是会根据给定项目的 Baseline 要求来提供指导。
Modern Web Guidance 解决了这些缺点，并确保您的 AI 辅助编码工作流拥有率先采用较新的 Web 平台功能的工具，同时考虑到回退。
Modern Web Guidance 中包含哪些内容？
Modern Web Guidance 包含针对多个核心学科的 100 多个 Web 开发用例的最佳实践。在底层，它是一种智能体技能，可指示您的编码智能体如何调用 modern-web-guidance CLI，以查找和检索最适合您用例的指南。
- 用户体验 ：视图转换、CSS
scrollbar-color样式以及进入和退出动画。 - CSS ：容器查询、现代色彩空间（例如
oklch）、CSS 子网格布局、text-wrap和排版行高修剪。 - 性能 ：Interaction to Next Paint (INP) 诊断、用于分解长时间任务的
scheduler.yield、后台任务调度和图片加载优先级。 - 表单 ：自动调整大小的输入字段 (
field-sizing: content)，以及使用:user-invalid的准确验证样式。 - 内置界面组件 ：直接控制对话框、用于工具提示的 CSS 锚点定位和
popover。 - 无障碍功能 ：无障碍错误公告和键盘焦点管理。
- 内置 AI ：使用本地设备端客户端模型（原生语言检测、摘要和翻译 API）。
- 通行密钥 ：通行密钥注册、身份验证和管理。
以上是每个学科的一些用例。如需查看所有用例，您可以查看完整的用例列表。
Baseline
Baseline 可让开发者清楚了解哪些 Web 功能在主要浏览器引擎中具有互操作性。如果某个 Web 功能是 Baseline，则说明浏览器的兼容性等级值得信赖。Web 功能分为以下三类，由 Baseline 定义：
- 可用性有限 表示该功能不具有互操作性。
- 新近可用 表示该功能最近 30 个月内才具有互操作性。
- 广泛可用 表示该功能已具有互操作性至少 30 个月或更长时间。
虽然 Baseline 是对 Web 功能互操作性的定义，但它也是项目的可配置方面。您可以选择 Baseline 目标，然后通过将其添加到 AGENTS.md 或 CLAUDE.md 文件中来配置项目以使用该目标，例如：
This project's Baseline target is Baseline 2024.
<other project info...>
Modern Web Guidance 和功能回退
Modern Web Guidance 使用了各种现代 Web 功能。其中一些功能可能是 Baseline 新近可用或广泛可用，但有些功能可能是可用性有限。如果某个功能不是广泛可用，用例指南会为智能体提供具体说明，告知他们如何在不支持该功能的浏览器中确保更广泛的兼容性。在许多情况下，回退会作为渐进式增强功能来实现，即在支持现代功能的地方使用该功能。如果不支持的浏览器需要 Polyfill，智能体始终会收到有条件加载这些 Polyfill 的指示，以便仅在必要时产生费用。
如何确保准确性？
Modern Web Guidance 中的每个用例都包含一组评估，这些评估会不断校准，以确保输出质量。
用例评估会运行自动 QA 框架来测试智能体的行为是否正确，其中 Playwright 起着核心作用：
- 对于每个指南，系统都会开发一个 Playwright 脚本，用于测试是否遵循了指南的实现详细信息，例如，是否在需要时观察到了
@media (prefers-reduced-motion: reduce)。 - 这些 Playwright 脚本会根据“正确”的参考演示实现不断校准，该实现预期通过率为 100%。另一方面，这些脚本会根据故意存在缺陷的实现进行检查，该实现预期通过率为 0%。
- 如果“正确”和故意存在缺陷的实现都未能分别实现 100% 和 0% 的通过率，生成器会自动使用上下文重试，直到实现 100% 的校准。
- 最后，系统会对基本应用进行端到端评估。其中一项评估是无指导的，它是一种控制，使用默认训练数据而不调用 Modern Web Guidance 来完成任务。另一项评估（实验）使用 Modern Web Guidance 处理同一任务。
我们的评估每周运行多次，使用前沿模型和编码智能体，让我们清楚了解智能体在有和没有我们的指导的情况下表现如何。平均而言，早期结果显示，当智能体配备 Modern Web Guidance 时，遵循现代最佳实践的比例提高了 37 个百分点。不过，您的结果可能会因项目要求、模型、您编写的提示以及您偏好的智能体编码工具而异。
后续步骤
现在，您已大致了解 Modern Web Guidance，以及它在 AI 编码工作流中采用现代 Web 最佳实践方面的潜力。接下来，您可以了解 Modern Web Guidance 提供的 学科 和 用例。