准备环境：你需要什么？

在开始之前，确保你的电脑上已经安装了 Node.js（一个让 JavaScript 在电脑上运行的环境）。如果还没装，去 nodejs.org 下载最新 LTS 版本，一路“下一步”安装即可。装好后，打开终端（Mac 用“终端”应用，Windows 用“命令提示符”或 PowerShell），输入 node -v 和 npm -v，看到版本号就说明成功了。

安装 Modern Web Guidance

Modern Web Guidance 是谷歌 Chrome 团队推出的一个开源工具，它能让 AI 助手（比如你用的 Cursor、Copilot 等）生成更符合现代浏览器标准的代码。安装步骤很简单：

1. 打开终端，进入你的项目文件夹（例如 cd my-project）。
2. 运行命令 npm install @google/modern-web-guidance，等待安装完成。
3. 安装后，根据你使用的 AI 工具，按照官方文档配置一下（通常是在项目根目录创建一个 .mwg.json 文件，写上简单的配置）。

常见坑提醒：如果安装时提示权限错误，Mac/Linux 用户可以在命令前加 sudo，Windows 用户请以管理员身份运行终端。

验证是否成功：跑一个简单例子

为了确认 Modern Web Guidance 生效了，我们来写一个小测试。在你的项目里创建一个 index.html 文件，然后让 AI 助手生成一个“工具提示（tooltip）”组件。正常情况下，生成的代码会使用 CSS :hover 和 :focus-within 等现代方法，而不是写一堆 JavaScript 来手动控制显示隐藏。如果你看到 JavaScript 很少，主要靠 CSS 实现，那就说明安装成功了。

下一步可以做什么

现在你已经装好了 Modern Web Guidance，可以让 AI 帮你写更多组件了，比如弹窗、折叠面板、表单验证等。每次生成代码时，留意它是否用了最新的 API（比如 dialog 元素、popover 属性等）。如果想深入学习，可以查阅 官方 GitHub 仓库 了解更多配置选项。