Meta 开放 Astryx 设计系统让 Agent 直接查规范

发生了什么

Meta 把内部用了八年的 React 设计系统 Astryx 放到了 GitHub 上，MIT 许可，任何人可以免费用、改、商用。它在 Meta 内部是规模最大、用得最多的设计系统，支撑过一万三千多个应用。项目目前还是 Beta（0.7 版），GitHub 上已有近一万五千颗星。

图片来自项目官方。

按项目说明，它包括：

• 150 多个带无障碍支持的 React 组件，覆盖按钮、表单、弹窗、表格、导航等常见需求；
• 七套现成主题，支持深色模式，换品牌色只需要覆盖一组 CSS 变量；
• 表格页、详情页、分步表单这类页面模板；
• 一个命令行工具和一个托管的 MCP 服务器，专门给 AI 编程助手用。

为什么值得关注

让 AI 写界面，最常见的问题是"每次长得都不一样"：按钮间距、颜色、弹窗写法全看模型当时怎么想。Astryx 把组件文档、设计规范和模板整理成机器能查的形式，Agent 写代码前先查规范、再照着写，出来的界面就有了统一的底子。

另外两个对普通项目友好的设计：

• 不绑定样式方案：组件内部用 StyleX 写样式，但使用者不用管，直接引入现成的 CSS；想覆盖样式，用项目里已有的 Tailwind、CSS Modules 或普通 CSS 都行。
• 可以把组件"拿出来改"：现成组件不够用时，CLI 能把某个组件的完整源码拷进你的项目，改成你自己的版本。

Agent 的两种接法

怎么让你的 Agent 用上

我们把这两种接法整理成了一个 Skill：Astryx：按 Meta 开源设计系统的规范搭 React 界面。把它交给 Claude Code、Codex 等 Agent，它会先检查你的环境，再按需要接上 MCP 或 CLI，写界面时自动先查规范。

注意

• 还是 Beta：接口可能在小版本之间变化，部分组件只在预发布（canary）版本里提供，用在正式产品前要评估。
• 需要 React 19 以上，老项目要先升级 React。
• 它是组件库和规范，不会替你做设计判断：页面结构、文案和交互，仍然要自己把关。

参考

• GitHub：meta/astryx
• Astryx 官方文档