Modern Web Guidance：让AI编程助手写出更专业的Web表单

AI编程助手正在成为前端开发的标配，但它们生成的代码往往停留在"能用"的层面。以Web表单为例，AI生成的代码常常忽略渐进增强（progressive enhancement）这类细节——而正是这些细节决定了用户填写表单的体验、无障碍访问质量，以及最终的转化率。Google推出的 Modern Web Guidance（MWG）工具，试图解决的正是这个问题。

AI生成表单的隐藏短板

当你让AI代理去实现一个Web表单时，它通常会直接进入规划和实现阶段，产出一份语法正确、功能完整的代码。问题在于，基础模型并不"知道"那些让表单真正好用的最佳实践：正确的 autocomplete 属性值、针对不同字段类型的无障碍优化、虚拟键盘上的回车键提示，以及自动填充状态的视觉反馈。

这些渐进增强的缺失不会导致表单报错，却会在真实场景中拖累体验。例如一个未正确设置 autocomplete 的地址表单，会让浏览器无法准确识别字段用途，用户不得不手动逐项输入，进而影响结账页面的完成率。原视频指出，这类遗漏会直接影响"全站的转化、销售和表单提交"。

渐进增强（Progressive Enhancement） 是一种Web开发策略：先构建能在任何环境下正常工作的基础功能，再针对支持更多特性的浏览器或设备叠加更丰富的体验。与之对应的是"优雅降级"——从完整功能出发，为旧环境做减法。渐进增强在表单场景尤为重要，因为用户使用的设备、浏览器、辅助技术差异极大：屏幕阅读器用户依赖正确的语义标签，移动端用户依赖虚拟键盘的上下文提示，密码管理器和浏览器自动填充功能则依赖 autocomplete 属性来识别字段用途。这些细节不影响表单的基本可用性，但会在真实用户群体中产生可量化的体验差异——尤其是在结账等高摩擦场景下，任何额外的手动输入步骤都可能转化为流失率的上升。

MWG 如何介入编程流程

Modern Web Guidance 的工作方式是在AI代理动手前，先引入一层领域知识。它可以在 Antigravity 环境中启用，或通过你惯用的编程代理安装。

关键差异在于处理流程：没有 MWG 时，代理直接规划并实现；启用 MWG 后，代理会先在其内部的指南数据库中检索与当前提示相关的内容。在实现结账页面的演示中，代理检索到了多份指南，涵盖通用表单最佳实践、无障碍改进、不同字段类型的正确 autocomplete 取值，以及如何用自动填充选择器为被自动填充的字段设置样式。

这些指南随后被拉入上下文窗口，成为代理生成代码时的参考依据。换句话说，MWG 补上了基础模型"不知道该应用"的那部分上下文。

这种"检索后生成"的工作模式，本质上是 RAG（Retrieval-Augmented Generation，检索增强生成） 在开发工具链中的一次具体应用。RAG 的核心思路是：不依赖模型训练时固化的知识，而是在推理阶段实时检索外部知识库，将相关内容注入提示词上下文，从而让模型输出更准确、更具时效性的结果。MWG 将这一机制指向了一个特定领域——Web前端最佳实践——用结构化的权威指南替代模型对训练数据的"模糊记忆"。这也解释了为何该方案能在不重新训练模型的情况下持续更新：只需维护指南库本身，当Web标准演进时，检索到的内容也会随之更新，代理行为因此得到同步校正。

具体增强了哪些细节

从演示效果看，MWG 带来的改进相当具体：

• autofill 选择器：用于验证字段取值是否正确设置，并为自动填充的字段提供专门的样式控制。
• enterkeyhint 属性：更新虚拟键盘上回车键的图标，让移动端用户获得更贴合语境的操作提示。
• :autofill CSS 伪类：这是典型的渐进增强手段——支持该伪类的浏览器会呈现定制化的自动填充样式，而不支持的浏览器则回退到默认样式，不会破坏体验。

最终呈现的表单包含一个支持国际姓名的全名字段，以及带有多种状态指示的自动填充样式，整体无障碍水平明显提升。这正是渐进增强的核心理念：在不牺牲兼容性的前提下，为能力更强的环境提供更好的体验。

enterkeyhint 是 HTML 输入元素的一个枚举属性，用于告知浏览器（尤其是移动端虚拟键盘）当前输入框完成后的预期操作，从而将键盘上的回车键图标替换为更贴合语境的符号。例如，设置为 search 时显示放大镜，设置为 send 时显示发送箭头，设置为 next 则提示用户跳转到下一个字段。这一属性对表单的多步骤流程尤为关键——移动端用户通常无法看到完整页面布局，键盘上的视觉线索是他们判断"下一步应该做什么"的主要依据之一。该属性浏览器兼容性良好，且对不支持的环境完全无害，是典型的低成本渐进增强措施。

对开发者的实际意义

MWG 代表了一种值得关注的思路：与其寄望于基础模型掌握所有领域最佳实践，不如通过检索式的指南库，在生成环节注入权威、结构化的知识。对于依赖AI代理快速搭建前端的团队来说，这种方式能在不增加太多人工审查成本的情况下，系统性地提升代码质量。

需要说明的是，本文内容基于 Google 官方演示视频，演示场景较为理想化，实际项目中的效果仍需在复杂表单和多样化提示下进一步验证。感兴趣的开发者可在 goo.gle/mwg 为自己的编程代理安装相应指南。

总体而言，Modern Web Guidance 把"写得对"和"写得好"之间的那道鸿沟交给了工具层去弥合，这对追求表单转化率与无障碍合规的团队是一个实用的补充。