Meta 开源 Astryx 设计系统：150+ 组件、7 套主题，CLI 让 AI 智能体也能按规范搭界面

Meta 把内部用了 8 年的设计系统开源了，名字叫 Astryx。它在 Meta 内部支撑了 1.3 万多个应用，是公司里用得最广、规模最大的设计系统，现在以 MIT 协议放出，仓库 meta/astryx 已有 1.5 万星。系统基于 React 19 与 StyleX，目前处于 Beta 阶段，npm 最新版 0.7.11。

里面有什么

150+ 无障碍组件、品牌级主题、深色模式、现成页面模板与 CLI，打包成一套完整系统。用法很直接：引入预构建 CSS，用类型化 React 组件，不用装构建插件，也不用改 PostCSS 或 Babel 配置。7 套现成主题开箱即用：neutral、butter、chocolate、matcha、stone、gothic、y2k，全部可以自定义。

STONE 主题示例：卡片组件、主题色板与浅色模式开关都来自同一套主题变量。

三个不一样的地方

第一，内部结构完全开放。组件可以逐层组合，常用的搭建单元直接导出；需要更深定制时，swizzle 命令能把某个组件的完整源码导出到你自己的项目里改，不用 fork 整个库。

第二，不锁定样式方案。Astryx 内部用 StyleX 写样式，但这对使用者透明——想用 Tailwind、CSS Modules 或原生 CSS 覆盖都行。

第三，主题就是一组 CSS 变量。改一套变量就能换整套视觉，不用改源码。

为 AI 智能体准备的 CLI

这是 Astryx 最特别的地方。它的 API、约定、文档与 CLI 是按「人和 AI 智能体用同一套工具」来设计的：CLI 提供组件文档、设计 token、页面模板、主题工具与升级 codemod，可通过终端命令、类型化 JSON API 或编程导入调用，AI 智能体与构建工具用的就是驱动 CLI 的同一套 API。全局安装一次后，这台电脑上的每个编程智能体都知道 Astryx。以前让 AI 写界面，出来什么样全看运气；现在可以让它沿着一套成熟的设计规范来搭建。

Astryx 自带的联系表单模板：组件、间距与文案规范都已定好。

上手

需要 React 19 以上。安装：

npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
npm install -D @astryxdesign/cli

最简单的用法是几行 CSS 引入加一个主题提供者，官方文档站、Storybook 与在线沙盒都在上面。要注意两点：图表组件目前只在 canary 频道，没有稳定版；整个系统仍在 Beta，API 可能还会变。

Y2K 主题商店模板：换一套主题变量，整站视觉跟着变。

适合谁

做 React 产品、想统一设计语言的团队；想让 AI 助手按规范写界面的开发者；以及研究设计系统怎么做的人。相关阅读：站内 5 个免费设计灵感网站、三个免费设计工具，以及社区版 Astryx 短介绍。

转自 X awe0 的帖子，原文链接：https://x.com/awe0_io/status/2119354093458395284