发布时间：2026 年 11 月 10 日
MetaMask 是一个自托管金融平台，在约 190 个国家/地区拥有超过 1 亿次下载。其浏览器扩展程序是公开开发的，因此来自公司内部和外部贡献者的拉取请求源源不断。
MetaMask 用户体验工程师 Francis Nepomuceno 审核了其中许多拉取请求，并希望通过一种一致的方式来帮助贡献者应用无障碍最佳实践并使用现代 Web 功能。在他的编辑器中，他已经使用了 Chrome 的 Modern Web Guidance，这是一组可为编码智能体提供 Web 平台最佳实践和浏览器兼容性数据的技能。为了向其他贡献者提供相同的指导，他设置了一个机器人来审核对 MetaMask 开源存储库的每个拉取请求，无论其作者使用了什么工具。
挑战：跟上现代 Web 功能的发展步伐
现代 HTML 和 CSS 不断添加可改善无障碍性和用户体验的功能，但很难跟踪哪些功能可在各种浏览器中正常运行。由于贡献者众多，这些知识必须传达给每个发起拉取请求的人。
安全性是另一个需要考虑的因素：MetaMask 默认会对每个第三方依赖项进行沙盒化处理，这使得采用原生浏览器功能的成本低于采用库替代方案。正如 Nepomuceno 所说，“能够使用这些现代 API（例如无需 JavaScript 即可使用对话框和下拉菜单）是一大胜利。”
解决方案：Modern Web Guidance 会审核每个拉取请求
2026 年 9 月 16 日，一个针对 MetaMask/metamask-extension 的拉取请求添加了一个“工作原理”页面，其中包含一个常见问题解答，其构建方式与大多数 React 常见问题解答相同：
// Before: Custom React state (removes content from DOM)
const [expanded, setExpanded] = useState(false);
<button type="button" aria-expanded={expanded} onClick={() => setExpanded(c => !c)}>
<Text>{question}</Text>
</button>
{expanded ? <Text>{answer}</Text> : null}
大约五分钟后，机器人发表了评论。该指南引用了 search-hidden-content 指南，提出了以下三点：
- 有条件地呈现每个答案会将其从 DOM 中移除，因此无法通过浏览器的页内查找功能找到收起的内容，辅助技术也更难发现这些内容。
<details>/<summary>原生披露 （自 2020 年起纳入基准）可将内容保留在 DOM 中，并具有正确的语义。对于互斥面板，共享的name属性（自 2024 年起，基准新推出）会自动关闭其他面板；对于可同时打开多个面板的常见问题解答，请省略该属性。- 如果团队更喜欢其现有的 Disclosure 组件，则至少应使用
hidden="until-found"和beforematch监听器将答案保留在 DOM 中，以便同步aria-expanded和图标状态。
// After: Native <details> / <summary> disclosure (findable with find-in-page)
<details>
<summary>
<Text>{question}</Text>
</summary>
<Text>{answer}</Text>
</details>
13 分钟后，作者推送了修复程序。该组件变成了原生 <details>/<summary> 披露，折叠的答案保留在 DOM 中以供页内查找，两个导航按钮变成了链接。
该机器人是一个运行 Modern Web Guidance 的 Cursor Automation，Nepomuceno 用三行提示设置了它。到 2026 年 10 月 21 日（第 5 周）：
- 该机器人已在约 480 个拉取请求上运行，并对来自 26 位作者的 64 个拉取请求（57 个功能和修复拉取请求，以及 7 个自动发布和同步拉取请求）发表了评论。
- 在功能和修复拉取请求中，工程师通过 22 个拉取请求修复了 43 个发现的问题，并部分修复了另外 3 个问题。
- 工程师们行动迅速：在 38 个具有可识别提交的修复中，有 19 个在 15 分钟内完成，26 个在 1 小时内完成，从评论到修复的中位时间为 15.2 分钟。
以下是 MetaMask 如何配置机器人、机器人捕获了什么以及机器人在哪里产生了干扰。
设置是一个三行提示
当被问及自动化是如何配置的时，Nepomuceno 回答道：“当然，我们的设置其实没有什么特别之处。我们只是让它保持简洁和限定范围。”完整指令：
- Run /modern-web-guidance for any client-facing changes
- Run /chrome-extensions for any relevant extension changes
- Comment on the PR only when there are issues to address. Keep the comment focused on actionable items
实际运作方式：
- 它只是提供建议：在最初的两天里，该机器人发布了“请求更改”审核（以及一项批准），作者在解决问题后便将其忽略；自 9 月 18 日起，每项审核都只是评论。它不会阻止合并，因此作者可以对每条建议做出最终决定。
- 它引用了代码库中的特定指南和文件：在它评论的 64 个拉取请求中，该机器人提出了 122 项发现结果。在 102 个功能和修复拉取请求中，有 63 个指明了它们所应用的具体 Modern Web Guidance 指南，例如
search-hidden-content、state-aware-sticky-headers或sms-otp-form，并在仓库已使用推荐模式时指向仓库中的现有文件。 - 除非拉取请求涉及界面，否则它会保持静默：在这五周的大约 480 个拉取请求中，至少有 100 个涉及界面或客户端代码，并且该机器人在其评论的每个拉取请求中平均发现了大约两个问题。如果团队的代码库大多是前端代码库，则可以预期该工具会评论更大比例的 PR。
提示本身可与任何智能体运行程序搭配使用；Modern Web Guidance 可作为技能或插件安装到 Cursor、Claude Code、Codex、GitHub Copilot、Antigravity 和其他编程智能体中。当智能体运行该技能时，它会在本地索引中查找匹配的指南，无需 API 密钥，并使用团队智能体运行器已提供的任何模型来检查与这些指南的差异。
Modern Web Guidance 发现了代码校验工具无法发现的问题
静态 Linter 可以标记单个元素上缺少的属性，但以下发现结果归结为交互行为、HTML 语义以及组件在文件中的组合方式。
交易费用字段看似可编辑，但会默默忽略输入
在 MetaMask 的高级交易费用设置中，gas 限制字段（用于限制交易可消耗的网络费用）看起来可修改，但会默默忽略用户的输入。当费用估算仍在加载或加载失败时，就会发生这种情况。 同时，“保存”按钮处于停用状态，但没有提供辅助技术可以读取的说明。
该机器人引用了表单指南，指出了三处需要修正的地方：
- 在无法估算时停用 gas 限制字段，并将可见的状态文本与该字段关联，以便辅助技术读取说明。
- 将已停用的“保存”按钮连接到同一状态文本，以便屏幕阅读器知道该按钮为何处于停用状态。
- 将该字段切换为数字输入模式，以便移动用户使用数字键盘。
作者在两个设置模态框中应用了所有三项修复，并将它们整合到了一个组件中。
隐藏了网址的横幅按钮
在 MetaMask 的某项交易功能的状态横幅中，内嵌的“常见问题解答”和“联系 MetaMask 支持团队”操作被构建为使用 JavaScript 打开新标签页的按钮，而不是链接。在三分钟内，机器人引用了 HTML 和无障碍指南，指出屏幕阅读器会将这些链接读为按钮，并且用户会失去链接功能，例如复制网址或从上下文菜单在新标签页中打开网址。它还指出了 MetaMask 代码库中一个现有的横幅组件，该组件已将这些操作呈现为真实链接。
12 分钟后，作者将这两项操作都切换为链接。Nepomuceno 表示：“我发现，一旦采纳了某项指导，未来的审核就会将其作为参考示例，这非常有用。”
标签位于其他位置的验证输入
该机器人在多步骤表单中也展现出了跨文件读取的能力。静态 Linter 只能看到每个步骤中包含占位文本的文本字段，无法判断可见标题和说明位于父布局组件中。该机器人引用了表单和无障碍指南，发现占位符是该字段的唯一标签，父布局中的步骤标题和说明与输入无关，并且错误和“代码已重新发送”消息未向屏幕阅读器播报。15 分钟后，所有三个问题都得到了修复，并且当后续拉取请求将代码输入重新设置为六个可视数字框时，无障碍连接保持不变。
机器人发现的其他一些问题
在为期五周的同一测试中，我们还发现了以下五个问题：
- 机器人背后的工程师忽略了一个 CSS 细节：Nepomuceno 自己提交的用于固定首页标签页的拉取请求嵌套了 CSS 滚动状态查询，但未命名其容器，并且以一种在滚动过程中改变布局的方式切换了边框。该机器人引用了状态感知型粘性标题指南，他修复了这两个问题。他发现这些评价对锚点定位和滚动状态查询很有帮助。
- 在输入过程中限制滑点：自定义滑点输入（用户在交易中可容忍的价格变动）在每次按键时都会将超过 100% 的值限制在 100% 以内，导致用户在输入 101 时，系统会将其转换为 100。根据表单指南，修复将验证移至字段失去焦点时，并添加了可见的警告横幅。
- 屏幕阅读器无法使用的加载指示器：令牌列表加载骨架将其“正在加载”标签放在没有角色的通用元素上，而 ARIA 禁止这样做。该机器人指出了代码库中已经使用 MetaMask 仅限屏幕阅读器模式的两个组件（这两个组件在六天前经过 Modern Web Guidance 审核后进行了更新），作者在八分钟后将骨架与该模式对齐。
- 无防护的异步操作：异步“在提供商处查看”按钮没有运行中防护，因此双击可能会打开重复的标签页和后台观察器。作者在添加注释后不到四分钟就添加了保护措施。
- 没有表单的按键验证：“导入 NFT”页面在每次按键时都会进行验证，并且缺少用于提交语义的
<form>元素。两个漏洞在审核后 19 分钟内均已修复。
所有评价都是公开的。机器人的完整评论位于每个关联的拉取请求中，您可以在 GitHub 上浏览所有评论。
它未修复的问题以及它有多嘈杂
并非所有发现结果都已落地。下表显示了 MetaMask 如何统计功能和修复拉取请求中的 102 项发现结果（另外 20 项发现结果出现在 7 个发布和同步拉取请求中，这些请求的审核预计不会更改代码）：
按主题细分所有 122 项发现结果（包括 20 项关于发布和同步拉取请求的发现结果）：
这些数字呈现出一些规律：
- 仅涉及一个组件的修复比跨组件的无障碍功能更改更常见。表单和 HTML 修复操作会保留在正在审核的组件中，因此作者通常会立即应用这些修复操作（31 个修复操作中有 19 个已应用）。无障碍功能发现的问题最多 (38)，但只有 12 个得到了修复，这通常是因为修复超出了拉取请求的范围，或者需要一个尚不存在的共享设计系统组件。
- “其他”是指不属于 Web 平台指南范围的内容。16 项发现涵盖设计系统一致性、逻辑 bug、文案、测试质量、深色模式和代码卫生；其中 3 项得到了处理，其中一项是真正的回归（网络列表更改破坏了表单预填充）。这 16 个问题中的大多数都很容易忽略，但发现该回归问题后，它们就值得快速查看一下。
- 假正例源于代理应用指南的方式，大多数干扰都可以在设置中修正。由于审核机器人是读取差异的智能体，而不是静态 Linter，因此其假正例来自误读周围的代码或比关联指南更严格地应用规则。跳过发布和同步分支，并收紧提示，以便智能体遵循指南中明确说明的规则，这些是显而易见的后续调整。
Nepomuceno 描述了对团队和审核周期的更广泛影响：
“评价真的很有帮助。它们帮助我们发现了兴趣调用器和 Popover API 等现代 API，并让我们的工程师熟悉了这些 API。”
“它没有增加 PR 审核时间，反而可能缩短了审核时间。许多工程师会使用智能体来处理反馈。Modern Web Guidance 发现的问题，原本需要熟悉这些现代 Web 技术的人工审核员才能发现。”
MetaMask 工程师 David Murdoch 也为指南本身做出了贡献：当 CSS 布局指南中的一个示例出现错误时，他提交了问题，Modern Web Guidance 团队在两天后合并了更正。
MetaMask 会对考虑使用其服务的团队说些什么
- 在撰写任何内容之前，请先阅读相关指南。运行
npx modern-web-guidance@latest search "accordion find in page"，查看代理会为任务检索哪些指南。您还可以浏览完整的 Modern Web Guidance 指南。 - 从您已运行的三行提示和智能体开始。安装该技能（
npx modern-web-guidance@latest install或智能体的插件命令），将任何可在拉取请求中运行的内容指向该技能，并告知它仅在有可操作的内容时才发表评论，并遵守指南中明确规定的规则。在没有问题时保持机器人安静， 这就是 MetaMask 的工程师仍然阅读其评论的原因。 - 预计某些发现结果不会得到解决。在功能和修复拉取请求的 102 项发现结果中，有 43 项已修复，36 项被拒绝或未解决。该比率非常适合建议审核机器人，但如果作为屏蔽检查，则会造成干扰。
- 保持人工审核。该机器人擅长 Web 平台语义、现代 CSS 和互动模式，但不了解产品。
此外，MetaMask 尚未衡量以下方面：在五周内，团队尚未跟踪每个拉取请求的费用、运行时、模型比较，也未跟踪审核机器人在 React 代码库之外的行为。
只需三行配置，MetaMask 就获得了一个审核机器人，该机器人会针对大多数发现结果引用特定指南（如果存在，还会引用现有代码库内示例）。其接受的建议通常会在 1 小时内得到修正。