今天才发现 Google Chrome 团队在 GitHub 上开源了一个很实用的项目：Modern Web Guidance。
现在使用 Codex、Claude Code、Cursor 等 AI 编程工具开发网站已经非常普遍。不过，我发现 AI 写出来的代码有时候并不够现代，明明浏览器已经原生支持某些功能，AI 还是习惯引入第三方库，或者使用大量 JavaScript 实现。
这倒不完全是 AI 的能力问题，而是因为大语言模型的训练数据包含大量历史代码，一些新的 Web API 和开发规范并不一定能被正确运用。
Modern Web Guidance 就是为了解决这个问题而诞生的。
项目地址：
一、Modern Web Guidance 是什么？
简单理解，它是一套专门为 AI 编程助手准备的 Web 开发 Skills（技能包）。
它不是新的前端框架，也不是独立的代码编辑器，而是为 Codex、Claude Code、Cursor 等 AI 编程工具补充现代 Web 开发知识，让 AI 编写代码时能够参考最新的浏览器 API、开发最佳实践以及兼容性信息。
这个项目由 Google Chrome、Microsoft Edge、Mozilla Firefox、MDN 团队及 Web 开发社区共同维护。
目前已经覆盖约 250 项现代 Web 技术特性，以及 200 多个实际开发场景。
主要包括：
| 领域 | 涉及技术 |
|---|---|
| CSS 布局 | Container Queries、Subgrid、现代 CSS 颜色 |
| 页面交互 | View Transitions、Popover API、Dialog |
| 性能优化 | 资源预加载、INP 性能优化、任务调度 |
| 表单开发 | 原生表单验证、输入框自动调整 |
| 无障碍支持 | 键盘操作、屏幕阅读器支持 |
| 浏览器 AI | 原生翻译、文本摘要、语言检测 |
例如，以前让 AI 实现一个网页弹出层，它可能会编写大量 JavaScript 来控制显示、隐藏、焦点管理等功能。
但现代浏览器已经提供了 Popover API，很多类似需求可以直接使用浏览器原生能力。
Modern Web Guidance 就能引导 AI 优先考虑这些现代技术，同时注意浏览器兼容性，必要时提供合理的降级方案。
二、如何安装？我更推荐直接让 Codex 完成
官方提供了多种安装方法。
最常见的是打开终端，执行：
npx modern-web-guidance@latest install
这条命令会启动交互式安装向导，根据提示选择 AI 编程工具。
不过，我在 Windows 电脑上实际安装时遇到了一点麻烦。
第一次执行安装命令，提示：
[SKILLS_GIT_CLONE_FAILED]
OpenSSL SSL_read: SSL_ERROR_SYSCALL
后来开启全局 VPN 再试，仍然失败：
Recv failure: Connection was reset
Installation failed
原因是安装程序在通过 Git 克隆 GitHub 仓库时，网络连接被中断。
其实这类问题在 Windows 环境下并不少见，尤其是系统代理、Git 代理与 VPN 配置不一致的时候。
既然我们本身就在使用 AI 编程工具，为什么不直接把安装任务交给 Codex 呢？
于是，我直接在Codex Windows 桌面版的聊天框中输入了下面这段提示词：
请帮我安装 GoogleChrome/modern-web-guidance。
项目地址：https://github.com/GoogleChrome/modern-web-guidance
请先检查当前 Codex 环境及插件管理命令是否可用，然后按照官方 README 推荐的方式完成安装。
如果当前环境不支持 Codex Plugin 安装，请考虑使用官方 npx 安装方式。
安装完成后，请验证是否成功，并告诉我如何在后续项目中使用。
不要修改当前项目的业务代码。
结果，Codex 最终帮我解决了安装问题，成功完成安装。
这种方式的好处是，不需要自己逐条研究安装命令，让 Codex 先判断当前环境，再根据实际情况选择合适的安装方法。
当然，不同电脑的 Node.js、Git、网络和 Codex 版本可能不同，不能保证每个人都能一次成功，但至少可以省去不少手动排查的麻烦。
需要特别说明的是：这里发送给 Codex 的是自然语言任务提示词，而不是把 PowerShell 命令直接当成聊天消息发送。
如果喜欢手动安装，官方 README 也提供了适用于受支持 Codex 环境的插件命令：
codex plugin marketplace add GoogleChrome/modern-web-guidance
codex plugin add modern-web-guidance@googlechrome
这些命令应当在支持相应插件管理功能的 Codex CLI 环境中执行，具体以当前版本支持情况为准。
三、安装完成后，Codex 如何使用？
Modern Web Guidance 不是一个需要单独打开的软件。
安装并被 Codex 正确识别后，它就可以作为辅助技能，在相关开发任务中提供指导。
比如，我可以直接向 Codex 提出这样的要求：
检查现有项目：
请使用 Modern Web Guidance 检查当前项目的前端代码。
重点检查 HTML、CSS、JavaScript 是否存在过时的开发方式，哪些功能可以使用现代浏览器原生 API 替代。
同时考虑浏览器兼容性、性能和可维护性。
先给出优化建议，不要直接修改代码。
开发新功能：
请参考 Modern Web Guidance 提供的现代 Web 开发规范，实现以下功能。
优先使用现代浏览器原生 API，减少不必要的第三方依赖，同时兼顾主流浏览器兼容性。
优化网页性能：
请使用 Modern Web Guidance 分析当前网页的性能问题，检查资源加载、页面渲染、交互响应以及可能存在的过时实现，并提出优化方案。
如果 Skill 已经正确安装并被 Codex 识别，通常可以让 Codex根据任务内容使用它，也可以在提示词中明确要求调用。
不过要注意，明确要求调用不等于一定已经成功调用。最好让 Codex 在执行结果中说明实际使用了哪项指南。
四、还可以直接扫描旧项目
Modern Web Guidance 不仅支持通过 AI 编程助手使用，也提供独立的命令行功能。
例如，搜索现代 CSS 技术：
npx modern-web-guidance@latest search "CSS container queries"
查询指定的开发指南：
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
扫描当前项目中可能需要现代化改造的代码：
npx modern-web-guidance@latest legacy-scan .
最后这条命令比较实用。
它可以检查当前代码目录，查找值得进一步分析的旧式开发模式，为后续代码优化提供参考。
这些命令可以独立使用，不需要先将 Skill 安装到 Codex 中。首次通过 npx 获取工具包时仍然可能需要联网。
五、它到底有什么价值？
我觉得 Modern Web Guidance 最有价值的地方，不是让 AI 写代码更快，而是让 AI 尽量写出符合现代 Web 标准、更加简洁和容易维护的代码。
以前我们学习开发技术，需要不断查阅文档，了解哪些 API 已经更新，哪些开发方式已经过时。
现在有了 AI 编程助手，写代码的门槛降低了很多，但也带来了一个新问题：AI 能写出可以运行的代码，不代表它采用的就是最合适的实现方案。
如果能够通过 Skills 为 AI 提供专业的技术指导，相当于给它增加了一份随时可以查阅的开发参考资料。
对于经常使用 Codex、Claude Code、Cursor 开发网站的朋友来说，我觉得这个项目值得安装。
当然，它也不是万能的。新技术不一定适合所有浏览器，实际开发仍然需要测试兼容性、安全性和性能。
最后分享一个自己的体会：
AI 时代，遇到工具安装、环境配置等问题，不一定要自己反复折腾。可以尝试直接把任务交给 Codex，让它检查环境、查阅官方文档、执行安装并验证结果。
这次安装 Modern Web Guidance，我就是这么解决的。