Astryx：Meta 开源内部用了 8 年的 React 设计系统，CLI 直写 AGENTS.md

设计系统开源不少见，少见的是 Meta 把「内部用了 8 年」的整套东西原样放出：Astryx（MIT，截至 2026-11-07 有 14,053 星）是一个 React 设计系统——180+ 组件、7 套可定制主题、自带深色模式与现成页面模板，基于 React 19 和 Meta 自家的 StyleX（消费端可覆盖为 Tailwind、CSS Modules 或纯 CSS，无样式锁定）。真正让它区别于其他设计系统的是「为人和 Agent 同构设计」：配套 CLI 的 init 会把组件索引写进 AGENTS.md 或 CLAUDE.md，让编码 Agent 与人读同一份参考来搭界面。

核心功能

• 开放内部结构：组件在任何层级可组合，内部导出直接可 import；需要更深定制时用 swizzle 把组件完整源码弹射进你的项目归你所有——改完就是你的代码，不必向上游提 PR。
• 样式不锁定：StyleX 写内部样式但对消费者不可见，className 覆盖随你用 Tailwind/CSS Modules/纯 CSS。
• 主题即 CSS 变量：设计师改一组 custom properties 就能整套换装，不用 fork 或包一层。
• Agent 就绪 CLI：init 生成组件索引进 AGENTS.md/CLAUDE.md，API、文档、CLI 三者为人与 AI 助手设计成同一套参考——Agent 产出即符合设计系统规范的界面。
• 180+ 组件与模板：7 套主题、深色模式、现成页面模板开箱可用；组件同时支持像素级定制与整体换装两档。

典型使用场景

• React 应用的设计底座：从原型到生产用同一套组件，主题换肤不 fork。
• AI 辅助开发：把 Astryx 的组件索引喂给 Claude Code/Codex，Agent 产出的界面直接符合设计系统规范。
• 设计系统团队参考：其「引导而非强制」「约定靠测量验证」的原则文档值得一读。

快速上手

按仓库文档用包管理器安装 @astryx/* 包，跑 CLI init 完成组件索引与 AGENTS.md 写入；文档站 astryx.atmeta.com 有全部组件页与示例。仓库根目录自带 .claude/ 配置，Meta 内部显然已经在用 Claude Code 类工具开发它——「为 Agent 设计」不是口号而是它自己的开发方式。

小结

Astryx 适合 React 技术栈、要在人与 Agent 协作中保持设计一致性的团队；非 React 或需要原生移动端组件的场景不对口。要点与边界：MIT、TypeScript、Meta 官方维护、React 19/StyleX 栈；astryx.atmeta.com 属 Meta 内部域名风格的文档站，自托管部署以其文档为准。它是「设计系统为 Agent 准备」的第一批正式范例——本站写过的 unslop 改界面气质，Astryx 则从组件层就给人机共用打好底座。