GitHub 周刊第 55 期 | Agent 写前端总用老写法？Chrome 和 Meta 各给了一份参考资料

📅 本期时间范围：2026-11-09 ~ 2026-11-15

Chrome 团队的评测面板上有一组对比：让 Claude Code 做同一个任务，在网页上加一个带多级子菜单的操作菜单，评分脚本一共检查 25 项。不给任何指引时，它只通过了 1 项；装上 Chrome 团队整理的前端指引之后，25 项全部通过。

模型其实没变，变的是它在写代码之前多查了一份资料。这周周榜上涨得快的项目里，有好几个都在做类似的事：Meta 把内部用了 8 年的设计系统开源，并且专门做了一个给 Agent 查文档用的命令行工具；Google 把「怎么评审一份设计文档」写成了一套插件；OpenAI 把漏洞扫描的流程也做成了命令。

也就是说，大家已经不太指望模型自己什么都懂，而是把各自积累的经验，整理成 Agent 随时能查的格式。本期挑了 5 个项目，前 3 个属于这一类，后 2 个是给 Agent 配的新工具。文中 Star 数均为截至发文时 GitHub 页面的数据。

01 Astryx

Meta 内部 1.3 万多个应用在用的设计系统，这次连 Agent 怎么查文档都一起设计好了

Astryx 官网首页，标语是「完全可定制、为 Agent 准备好的开源设计系统」

Astryx 这周涨了 13,375 个 Star，是这周各语言周榜里涨得最多的项目，目前一共 2.7 万多 Star，MIT 协议。

先解释一下设计系统是什么：它是一整套现成的界面零件，按钮、表单、表格、弹窗、导航栏都有，颜色、字号、间距也都统一定好了。团队里的人都用这一套来搭页面，做出来的产品看起来就是一家的。

Meta 介绍说，Astryx 在公司内部已经长了 8 年，是 Meta 用得最多、规模最大的设计系统，支撑着 13,000 多个应用。这次开源的版本有 150 多个组件、7 套现成主题、深色模式、页面模板，以及一个命令行工具。它基于 React 19 和 Meta 自家的 StyleX 写成，但你用的时候不需要学 StyleX，直接引入写好的 CSS 就行；想改样式时，用 Tailwind、CSS Modules 或者普通 CSS 覆盖都可以。

为什么说它是「为 Agent 准备的」？

很多组件库也会说自己对 AI 友好，一般指的是文档写得清楚。Astryx 走得更远一点：它把命令行工具当成主要的使用入口，人和 Agent 用的是同一套命令、看的是同一份文档。

比如你不知道要找的东西是组件、Hook 还是模板，可以直接搜：

$ astryx search button
 
Results for "button" (20 of 239):
 
  [component]  Button
               Button triggers an action when clicked...
               → astryx component Button
 
  [component]  IconButton
               A button that shows only an icon with no visible text...
               → astryx component IconButton

注意每条结果下面那一行箭头，它直接告诉你下一步该敲什么命令。对人来说这是个方便的小提示；对 Agent 来说就很重要了，它不用自己猜命令格式，照着往下执行就能查到组件的完整用法。另外还有一个 astryx manifest --json 命令，会把所有命令、参数、返回格式以 JSON 输出，这种格式 Agent 读起来最省事。

README 里还推荐把命令行工具全局安装一次（npm i -g @astryxdesign/cli），这样电脑上所有的编程 Agent 都能直接调用它；进到具体项目里，它又会自动用项目自己安装的那个版本，不会因为全局版本更新把项目搞乱。

Meta 在项目原则里写了一句话：每一次为了让 AI 更好用而做的修改，最后都让人用起来也更顺手了。我觉得这句话挺实在。命名统一、每个组件都有完整文档、命令输出带上下一步提示，这些本来就是好工具该有的样子，只是以前缺了「Agent 也要读」这个理由，很多团队没动力做到这么细。

用之前要注意什么？

还在 Beta 阶段。图表组件目前只发布了测试版，还没有正式版本，如果你的项目要做很多数据看板，现在用会比较折腾。
要求 React 19 及以上。还停在 React 18 的老项目，得先升级。
别直接敲 npx astryx。没装命令行工具之前，这样会装到 npm 上另一个同名但无关的包。正确的写法是 npx @astryxdesign/cli，这一点项目自己也专门提醒了。

如果你正要开一个新的 React 项目，又打算让 Agent 写大部分界面，Astryx 值得试一下，至少能避免 Agent 每次都现编一套样式。已经在用 shadcn/ui 的项目，就没必要为了它迁移了。

开源地址：https://github.com/meta/astryx

02 Modern Web Guidance

Chrome、Edge、Firefox 和 MDN 一起维护的前端指引，专门纠正 Agent 爱写老代码的毛病

Modern Web Guidance 的评测面板：近 7 天 1104 个任务里，最佳实践通过率从 52% 提高到 92%

开头那组对比，就来自这个项目的评测面板。它这周涨了 3,377 个 Star，这个仓库是源码仓库，用户实际安装的 GoogleChrome/modern-web-guidance 仓库目前有 1.1 万多 Star。

它要解决的问题很具体：大模型是用大量网上的老代码训练出来的，所以 Agent 写网页时，经常用一大段 JavaScript 去实现浏览器现在已经原生支持的功能。比如做一个跟着按钮走的弹出菜单，现在用浏览器自带的 Popover 和锚点定位（Anchor Positioning）就能做，但 Agent 还是习惯自己写定位计算，再引入一个第三方库。

Modern Web Guidance 是一套技能（Skill），收录了近几年 250 个新的网页特性，覆盖 CSS 布局、动画、表单、性能、无障碍访问等方面。Agent 在写代码前，会先通过它的命令行工具搜索相关的指引，再按指引写。你也可以不装，先在终端里试一下：

# 搜索相关指引
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
 
# 扫描项目里有哪些老写法可以升级
npx modern-web-guidance@latest legacy-scan .

第二条命令我觉得很实用。它不改代码，只是把项目里可以换成新写法的地方列出来，适合拿来给老项目做一次体检。

项目做了一个持续运行的评测：让 Claude Code、Codex 和 Antigravity 三个 Agent 做同样的任务，一组装指引、一组不装，再在真实浏览器里检查结果。截至 11 月 13 日，近 7 天 1,104 个任务的平均通过率从 52% 提高到了 92%，无障碍检查的通过率从 56% 提高到了 94%。如果模型不装指引也能做对某一项，他们就把对应的内容删掉，这样指引不会越来越长，占用的 token 也能少一些。

不过要注意两点。第一，装了指引之后，Agent 要多查资料，花的 token 和时间也会多一些，开头那个菜单任务，token 消耗从 8 万多涨到了 11 万多。第二，它默认会把匿名的使用数据发给 Google，包括 Agent 发出的搜索词，但不包括你的原始提示词。如果你不想发送，在 shell 配置文件里加一行 export DISABLE_TELEMETRY=1 就能关掉。

开源地址：https://github.com/GoogleChrome/modern-web-guidance-src

03 Elephant-Goldfish Model

写方案的 Agent 记得一切，审方案的 Agent 什么都不记得

EGM 的两个角色：大象记得一切，金鱼什么都不记得

这个项目来自 Google，名字有点怪，叫「大象-金鱼模型」，简称 EGM。这周涨了 5,560 个 Star，目前 1.8 万多 Star，Apache 2.0 协议。

名字里的两个动物代表两种角色。大象记性好，它是陪你讨论需求、起草设计文档的那个 Agent，知道你们聊过的所有背景。金鱼记性差，它是评审员，只能看到写好的文档和文档里引用的代码，看不到你们之前的对话。

为什么要专门找一个「什么都不记得」的评审员？因为和你聊了半天的 Agent，已经默认接受了很多你们口头说好、但文档里没写的前提。它再去看这份文档，会觉得一切都很清楚。换一个没参与过讨论的人来读，才能发现「这里没说失败了怎么办」「这个词前后意思不一样」这类问题。这跟我们自己写完文章要隔一天再读，或者找同事帮忙看一遍，是同一个道理。

动画：聊天时说过「失败就重试 3 次」，写文档时漏掉了；只看文档的金鱼评审员找到这处空白，再把这句话补回文档

装好以后，最简单的用法是直接评审一份现成的文档，不需要从头写新方案：

/egm:egm-review docs/designs/webhooks.md

它会让几个全新的子 Agent 分 5 轮来读这份文档，分别检查整体设计、表述是否清楚、和现有代码是否对得上、能不能直接开始实现。还有一个 /egm:egm-drift-report，用来对比文档和当前代码，找出哪些地方已经对不上了，这个对维护老项目文档的人挺有用。

它目前支持 Claude Code、Codex 和 Antigravity。需要注意的是，金鱼评审员必须在全新的上下文里运行，如果你用的 Agent 不支持创建子 Agent，EGM 会直接停下来，不会假装在同一个对话里评审一遍。另外，几个评审员同时读文档和代码，消耗的 token 也会比普通对话多不少。

我比较喜欢它评审规则里的一部分：明确禁止评审员说「很好」「很聪明」这类夸奖，要求先说哪里有问题、哪里有风险，再说优点。如果你平时觉得 Agent 太爱附和你，光是这部分规则就值得拿来参考。

开源地址：https://github.com/google/elephant-goldfish-model

04 agent-desktop

不截图、不认像素，Agent 通过系统的无障碍接口操作桌面软件

agent-desktop 的架构：Agent 调用命令行或 C 库，再通过各系统的无障碍接口读取目标应用

agent-desktop 来自 Vercel Labs，用 Rust 写的，这周涨了 5,408 个 Star，目前 2.3 万多 Star，Apache 2.0 协议。同一个团队做的浏览器版本 agent-browser 这周也在榜上，涨了 4,000 多。

现在很多让 AI 操作电脑的方案，是先截一张屏幕图，让模型看图找按钮，再算出坐标去点。这种做法慢，也容易点偏。agent-desktop 换了一条路：它读取的是操作系统的无障碍接口，这是系统原本给读屏软件用的，里面记录了窗口里每个按钮、输入框、列表项的名称和能执行的操作。

agent-desktop 把这些信息整理成 JSON，给每个能操作的元素编一个编号。Agent 拿到编号就可以点击、输入，操作完再读一次界面确认结果：

agent-desktop snapshot --app Finder -i   # 列出访达里能操作的元素
agent-desktop click @s8f3k2p9:e8         # 点击其中一个
agent-desktop snapshot --app Finder -i   # 再读一次，确认点对了

它本身不带模型，只负责「看」和「动手」，怎么决策还是由你用的 Agent 来做。它默认在后台操作，不移动鼠标、不抢焦点，你可以一边让 Agent 干活，一边自己用电脑。macOS、Windows 和 Linux 都支持，也可以作为 MCP 服务接到各种 Agent 里。

我的看法是，如果你需要让 Agent 操作那些没有 API 的桌面软件，比如在某个老系统里批量录入数据，它比截图方案靠谱。但要注意，读出来的界面内容、剪贴板、截图里都可能有你的私人信息，项目自己也提醒了不要把这些记录上传到公开的地方。

开源地址：https://github.com/vercel-labs/agent-desktop

05 Codex Security

OpenAI 把 Codex 的漏洞扫描做成了命令行工具，可以只扫这次改动的代码

Codex Security 的 README：可以扫描整个仓库、指定目录或 Git 改动，还能验证漏洞、生成补丁

Codex Security 这周涨了 1,712 个 Star，目前 1.3 万多 Star，Apache 2.0 协议。它能扫描代码里的安全漏洞，验证漏洞是不是真的存在，再生成修复补丁。

第 48 期介绍过 Cloudflare 开源的漏洞审计技能，两者做的是同一件事，区别在于形式。Cloudflare 那个是一份技能，装进常见的编程 Agent 就能用；Codex Security 是一个完整的命令行工具，要先登录 OpenAI 账号，用的是 OpenAI 的模型。

它比较实用的地方是可以只扫描这次改动的代码：

cs scan . --diff origin/main

这样每次提交合并请求前跑一遍，通常比每次扫描整个仓库快不少，也更适合放进 CI 流程。它还能帮你起草项目的 SECURITY.md，草稿会保存在仓库外面，不会直接改动你的文件。

如果你本来就在用 Codex，可以直接装上试试；如果你主要用别家的 Agent，Cloudflare 那个技能更方便。另外，深度扫描会重复跑多轮，消耗不小，命令行文档里提供了 --max-cost 参数来设置费用上限，第一次用的时候建议设上。

开源地址：https://github.com/openai/codex-security

装之前，先看它们会碰到你的哪些东西

这 5 个项目装之前，需要你自己判断的，是它们会接触到哪些数据、会花掉多少钱：

会发送使用数据的：Modern Web Guidance 默认会把 Agent 的搜索词匿名发给 Google，不想发就设置 DISABLE_TELEMETRY=1。
会读到你屏幕内容的：agent-desktop 需要系统的辅助功能权限，它读到的界面内容里可能有聊天记录、账号信息，记录文件不要随手分享出去。
会把代码发给模型的：Codex Security 扫描时，你的代码会交给 OpenAI 的模型处理。公司项目用之前，最好先确认一下公司对代码外发有没有规定。
会多花 token 的：EGM 一次评审要启动好几个子 Agent，Modern Web Guidance 也会让单个任务多用一些 token。如果你用的是按量付费的 API，可以先挑一个小任务试一次，看看实际花了多少。
还不太稳定的：Astryx 还在 Beta 阶段，图表组件还没有正式版本，重要的生产项目可以再等一等。

这几个工具解决的都是真问题，但它们也都要求你多交出一点东西，可能是权限，可能是数据，也可能是 token。先弄清楚每个工具要的是哪一样，再决定装不装。

资料来源

GitHub Trending 周榜：https://github.com/trending?since=weekly
Astryx README 与官网：https://github.com/meta/astryx 、https://astryx.atmeta.com
Astryx 命令行工具文档：https://github.com/meta/astryx/tree/main/packages/cli
Modern Web Guidance README：https://github.com/GoogleChrome/modern-web-guidance-src
Modern Web Guidance 评测面板：https://googlechrome.github.io/modern-web-guidance-src/
Elephant-Goldfish Model README 与官网：https://github.com/google/elephant-goldfish-model 、https://egm.dev
agent-desktop README 与文档：https://github.com/vercel-labs/agent-desktop 、https://agent-browser.dev/desktop
Codex Security README：https://github.com/openai/codex-security

评论