Google 出手了！给 AI 装上现代 Web 技术大脑，前端开发的体验更好了

AI 写代码快，但技术方案未必先进

现在用 AI 写前端，真的太方便了。React、Vue、CSS，随便描述几句话，AI 就能给你整出一个看起来相当不错的页面。

但有一个问题，我一直觉得挺有意思：AI 写代码的速度越来越快，写出来的技术方案却不一定越来越先进。

明明浏览器原生已经支持的能力，AI 还在引入第三方库；几行 CSS 就能实现的交互，它偏偏要写几十行 JavaScript。

更离谱的是，代码能运行，功能也正常，你甚至很难察觉它已经落后了。

最近，Google Chrome 团队发布了一个值得关注的开源项目：Modern Web Guidance 1.0。

它要解决的，正是这个问题。

AI 会写代码，不代表懂现代 Web

大模型有一个天然的问题：训练数据里存在大量历史代码。

十年前的 jQuery 写法、过时的 CSS 技巧、复杂的 DOM 操作，模型都学过。

所以，面对一个前端需求，AI 往往优先选择自己熟悉的实现方式，而不是浏览器现在提供的最佳方案。

Modern Web Guidance 的思路很直接：不重新训练模型，而是给 Coding Agent 补充持续更新的 Web 专业知识。

它本质上是一套 Agent Skills，覆盖现代 CSS、HTML、浏览器 API、性能优化、无障碍访问、安全及浏览器兼容性等领域。

更重要的是，这个项目已经不只是 Chrome 团队的事情，Firefox、Edge、MDN 等团队及社区专家也参与了维护。

看个例子，你就知道它有什么价值

假设我们要实现一个随着输入内容自动增高的文本框。

传统 AI 可能生成这样的 JavaScript：

textarea.addEventListener('input', () => {
  textarea.style.height = 'auto';
  textarea.style.height = `${textarea.scrollHeight}px`;
});

代码没错，但每次输入都需要读取布局数据、更新元素高度。

现代浏览器其实已经提供了更简洁的实现：

textarea {
  field-sizing: content;
  min-block-size: 3lh;
  max-block-size: 15lh;
}

不需要事件监听，不需要反复计算高度，直接交给浏览器处理。

再比如弹出菜单，以前要用 JavaScript 监听点击事件，现在可以使用原生 Popover API：

<button popovertarget="menu">打开菜单</button>
<div id="menu" popover>菜单内容</div>

真正优秀的 AI Coding，不应该只是写出能运行的代码，而应该知道什么时候根本不需要写 JavaScript。

当然，新特性必须考虑目标浏览器兼容性。这也是 Modern Web Guidance 的另一个核心价值。

它真正厉害的，是把技术经验变成了 Agent 能力

项目通过 Baseline 桥览器兼容性数据，帮助 Agent 判断哪些新特性适合当前项目，以及什么时候需要降级方案。

更有意思的是，1.0 版本增加了代码现代化扫描能力。

它可以分析已有项目中的 HTML、CSS、JavaScript、TypeScript 和依赖配置，识别部分过时的实现模式，再指导 Agent 进行改造。

例如旧式表单校验、重复的暗色主题代码、不必要的事件监听，以及部分安全配置缺失问题。

不过，这不是全自动重构神器。目前扫描范围仍然有限，改造建议还需要结合上下文验证。

怎么用？几条命令就够了

直接在项目目录执行：

npx modern-web-guidance@latest install

根据交互提示安装即可。

不想安装，也可以直接搜索相关指南：

npx modern-web-guidance@latest search "animate a dialog modal backdrop"

或者扫描项目中的旧代码：

npx modern-web-guidance@latest legacy-scan .

它还支持通过不同插件安装方式接入 Claude Code、Codex、Cursor 等 Coding Agent。

我比较推荐的用法是：先让 AI 根据 Guidance 提出方案，再通过 Chrome DevTools 验证实际性能和交互效果。

因为规范可以告诉 AI 应该怎么写，但最终好不好用，还是得在浏览器里跑一遍。

这件事，比一个开源项目更值得思考

Google 官方分享了一个实际案例。

日本内容平台 note inc. 在 180 次评估中，使用 Modern Web Guidance 并明确提示 Agent 后，某个模型的现代 Web 标准检查通过率从约 61% 提升到了 94%。

这说明什么？很多时候限制 AI 编程质量的，不完全是模型能力，只是它有没有获得正确的工程知识。

我越来越觉得，未来 AI Coding 的竞争，不只是模型之间的竞争。

谁能够把专业知识、技术规范、兼容性约束和自动验证能力组织起来，谁就更有可能持续产出高质量代码。

Modern Web Guidance 展示了一条很有价值的路线：模型负责生成，Skill 负责专业知识，工具负责验证，工程规范负责兜底。

前端如此，Android、iOS、桌面应用乃至整个软件工程体系，又何尝不是如此？

JOTO 企业落地观察

• 对企业部署而言，Modern Web Guidance 提供了一种轻量级、可插拔的知识增强路径——无需重训模型或替换现有 AI 工具链，仅通过注入结构化 Web 工程知识，即可系统性提升生成代码的现代性与合规性，降低后期技术债清理成本。
• 这类系统的取舍在于：它不替代开发者判断，而是将浏览器兼容性基线、无障碍要求、安全配置等隐性工程约束显性化为 Agent 可调用的 Skill。企业采用时需评估自身技术栈与 Baseline 数据的匹配度，而非默认全量采纳。
• 对 RAG 知识工程而言，该项目示范了如何将分散的技术文档（如 MDN）、兼容性数据（CanIUse）、规范草案整合为面向 Agent 的可执行知识单元，而非静态检索片段——这对构建垂直领域 AI 编程助手的知识架构具有直接参考价值。
• 在 AI 安全治理层面，Modern Web Guidance 将部分安全反模式（如缺失 CSP 配置、不安全的事件监听）纳入扫描范围，意味着企业可将安全左移至 AI 生成阶段。但其当前扫描能力有限，需与 SAST 工具协同形成闭环验证。