Meta 开源了一个内部用了八年的设计系统，2 万 star，174 个组件，MIT 协议。我装上跑完三套主题，还写了个带真实数据的看板。跑下来第一反应不是“好看”，是这东西怎么在教 AI 干活——它的文档、CLI、AGENTS.md，全是写给 agent 看的，人反而像附带的。
先说结论。组件质量、文档密度都在线，7 套主题，能直接拿去用。差异点不在好看，在 AI 友好：文档、CLI、AGENTS.md 是同一套约定，人和 agent 拿的是同一份说明书。代价也明确，没有构建插件换来的是 CSS 全量加载，一个小应用就是 200KB gzip 的 JS，中文字体、中文文档、中文检索都还没跟上。内部工具、后台、SaaS 中台、需要深色模式和主题切换的产品可以试；纯静态小站、强中文本地化、对包体积敏感的项目先放着。
先对一下事实。仓库 meta/astryx，MIT 协议，2026 年 1 月 9 日创建，我写这篇时是 11 月 10 日，2.04 万 star，663 个 open issue，最新版本 0.7.11。npm 上 @astryxdesign/core 截至 11 月第一周，周下载 66.1 万。README 说它在 Meta 内部长了八年，支撑 13000 多个应用，这是官方说法，我没法核实。底层是 React 19 加 StyleX，官方描述是预构建的 CSS 加类型化 React 组件，不需要构建插件，也不需要引样式库。有个小对不上：README 写 150+ 组件，CLI 实际列出来是 174 个。文档是活的，别把宣传数字当 API 文档用。
同类里比一下。Ant Design 组件最全、中文文档最好，但视觉一眼就是 Ant Design；shadcn/ui 源码直接给你，自由度高，每个项目从零拼；Material UI 规范成熟，但 Material 那套语言太重，业务里很难抹掉。Astryx 组件密度接近 Ant Design，定制方式接近 shadcn，多押的一个赌注是 AI 会不会用。好不好看它不太在乎，它在乎的是机器能不能用对。变天谈不上，但方向值得看。
我卡了 15 分钟，接入却只有 3 行
真实体验是从踩坑开始的。我按常规套路 npm create vite 建项目，卡在交互提示上一分钟没动静，干脆手工建，package.json、index.html、vite.config.ts 一共四个文件，两分钟写完。然后是 npm install。这台机器配的是国内镜像，我盯着它跑了十五分钟，连 node_modules 目录都没生成出来。顺手测了下镜像本身，请求 registry.npmmirror.com 的包元数据，超时，返回的是一段 HTML 不是 JSON。换官方源：
npm install --registry=https://registry.npmjs.org
39 秒装完。同一个网络环境，curl 官方源拿元数据 1.3 秒。这不是 Astryx 的问题，但值得说一句：装不动的时候先怀疑镜像，别怀疑包。第二个坑是依赖冲突，@vitejs/plugin-react 6.x 要 Babel 8 的 peer，和我这套组合打架，降到 5.x 立刻通过。官方文档写三步开始，在中文网络环境下实际是五步。
装完之后接入成本低得有点意外。整个初始化就三行 import：
@import "@astryxdesign/core/reset.css";
@import "@astryxdesign/core/astryx.css";
@import "@astryxdesign/theme-neutral/theme.css";
再加一个主题 provider 把 App 包起来。没有 PostCSS 配置，没有 Babel 插件，没有 Tailwind 的 content 扫描，也没有 styled-components 的运行时。它把 StyleX 的编译产物预先构建好发到 npm，你只消费 CSS 和 JS。这个取舍挺聪明，StyleX 在 Meta 内部好用，但让每个使用者都配一遍编译器，接入率会掉一半。代价后面说。
它不教人，先教 AI 干活
别的设计系统教人怎么用，它教 AI 怎么不出错。
装完 CLI 跑第一条命令：
npx @astryxdesign/cli init
它不生成代码，它改你的 AGENTS.md。我的项目里多出来 2.2KB 内容，开头是这样：
Astryx v0.7.11 · 174 components
SETUP (once, in app entry) — without these, components render unstyled
WORKFLOW — start every page from a template, never from scratch
后面跟的是硬规则，原文摘要：不许写 div，布局和间距交给组件；样式先用组件 props，再用 token，不许写十六进制色值，不许写裸 px；颜色必须走主题，不许在 :root 里覆盖；交付前必须跑 astryx doctor --built，不通过别交付。它在给 AI 立规矩，这跟写好文档等 AI 来读不是一回事。文档是给人看的，纪律是给 agent 执行的。它连工作流顺序都规定了，先有模板，再有区块，组件只用来补缺口——这正好治了 AI 写页面最爱犯的病，从零堆 div。
我还试了 build 子命令，输入一句需求：
astryx build "内容运营数据看板，带发布时间筛选和作品列表"
返回 No template matched, so start from the app shell，然后给了我 AppShell、TopNav、Layout 这一组框架组件，外加一句提醒。它还自己承认：Few matches. This is keyword search, not semantic。这种坦诚在开源项目里不多见。但中文查询基本匹配不到，我用中文描述需求，它只能把我推回最基础的 shell，中文化是它明显的短板。
再补一个实测，读单个组件的输出长这样：
Button from '@astryxdesign/core/Button'
Targets: astryx-button variants: variant
label: ReactNode, variant, icon
四行给全了语义边界、可主题化的 CSS 选择器、必填参数。对 AI 来说第三行最值钱，label 是必填的，它就知道不能生成一个光秃秃的图标按钮。这就是文档即接口，不是写给人读的长篇大论，是把约定压缩成模型能直接消费的字段。
我最想验证的是另一件事：一套“约定比文档更值钱”的系统，能不能让人不读源码就把页面写对。我刻意不看源码，只读了一份 Button 的 CLI 输出和一份官方 dashboard 模板的 JSX，然后直接写。写出来一个头条账号流量面板，四个指标卡，一张作品表，按钮、进度、标签三组组件展示。然后跑类型检查，严格模式，第一次就是零错误。只有一个错是我自己犯的，把 Grid 从 Layout 里 import 了，其实它是独立子路径，改一行就好。这比“能用”吓人多了——它说明这套系统的命名和组合规则是自洽的，你猜它怎么用，基本就怎么用。对 AI 来说，这意味着生成的代码不用来回试错。
它连手指按上去多宽都写死了
光说 174 个组件没感觉，说几个我实际撞到的细节。Button 的解剖是写死的，文档给它定义了四个部件——前置图标、文案、尾部内容、加载态转圈，然后一条条告诉你什么时候用哪个：主操作只允许一个，多了层级就乱；异步操作必须显示加载态；纯跳转别用 Button，用链接。这种颗粒度，一般设计系统只写在 Figma 里，不写进代码文档。
进度条连手指按上去多宽都管。类型定义里有个常量叫 TOUCH_MIN_FILL_PX，注释写着手指按住时填充条的最小绘制宽度，16px。它还有个 marks 属性，能在轨道上按数值标目标点，目标点会跟着填充进度自动换色。这种细节靠堆 if 堆不出来。Table 是插件化的，行列分割线、密度、悬停、空状态都是独立开关，还留了 plugins 接口。它也不锁死你的定制，有个命令叫 swizzle，能把你用到的组件源码直接吐进项目里，改完归你。这话不假，自由度从来是拿维护责任换的。
主题自带 7 套，neutral、butter、chocolate、matcha、stone、gothic、y2k。装主题不用装包，一条命令：
astryx theme add matcha
切换就是换 provider 的一个值，顺手支持深色。我实测了三种组合：matcha 浅色，标题字体落在 Playwrite US Trad, Georgia, serif，标题色是橄榄绿，卡片底色是米色 #F0F0E0；切到 gothic，正文字体变成 Fustat；切到深色，页面底色 #121212，卡片 #191D20，文字自动变白。全程没有改一行组件代码。主题等于 CSS 变量覆盖，设计师改配色不用碰源码。而且它的 doctor 会检查主题装得对不对——版本对齐、样式表导入配对、默认主题存在、有没有人偷偷在 :root 写私有变量，11 项检查我这边过了 10 项，剩下一项是字体。
我用它做了个真看板，两小时，没写一行 CSS
光摆组件没意思，我把它接到了自己真实的后台数据上。数据来自我账号的后台监控快照，六篇作品：最高的一篇展现 8457、阅读 619，最低的一篇展现 68、阅读 0。合计展现 12064、阅读 643，整体点开率 5.33%。但平均值会骗人，把最高的那篇拿掉，剩下五篇的展现全在 1354 以下，点开率从 5.33% 掉到 0.67%。我把这个判断直接做进了界面，点开率 5% 以上绿色标签，1% 到 5% 黄色，低于 1% 红色，一眼能看出哪篇是侥幸，哪篇是常态。以前做这种看板，光调表格和进度条对齐就得半天；这次从零到能看，算上踩坑两小时，其中一小时花在 npm 上。
四个坑，两个我劝你先别碰
先说一个我的推断，不是官方说法。一个内部用了八年的设计系统，为什么现在开源？看它的自我定位就懂，README 反复强调为 agent 准备、人和 AI 用同一套工具构建。设计系统这门生意过去拼组件数量、视觉规范、生态插件，现在战场变了，AI 成了主要生产力，谁能成为 AI 默认会用的那套 UI 语言，谁就拿到下一轮的入口。它的做法很直接：init 把组件索引和工作流写进 AGENTS.md，文档做成能被 CLI 读取的结构化输出，CLI 提供 --json 输出稳定信封，每个组件统一命名约定。它在做的是让模型不需要被微调也会用我。这跟 React 当年赢的方式有点像，不是最好的框架，但约定最统一。能不能成不知道，方向是对的。
好话说完了，说毛病，四条都是我自己跑出来的。第一，包体积。一个四张卡片、一张表、几个按钮的页面，vite build 出来：
dist/index.css 318.59 kB │ gzip: 49.36 kB
dist/index.js 650.53 kB │ gzip: 207.03 kB
dist/MenuBottomSheet.js 114.95 kB │ gzip: 39.57 kB
一个看起来人畜无害的页面，207KB gzip 的 JS。不需要构建插件换来的就是预构建产物的全量携带。它不是给首屏敏感的项目准备的，是给内部后台准备的。第二，字体走 Google Fonts。astryx doctor 直接给我一条警告，matcha 要 DM Sans、Playwrite US Trad、JetBrains Mono，gothic 要 Fustat 等几套。这些字体从外部字体服务加载，国内拉不到就静默回退。我实测的结果是中文标题全部落到 Georgia，中文产品用它的主题，字形观感会跟设计稿不一样。要正经用，得把字体自托管，或者给中文单独定义一套字体栈。
第三，中文不友好。CLI 有 --zh 参数，但只翻一部分文档，组件说明还是英文，build 和 search 是关键词匹配，中文需求基本命中不了。不是致命问题，但对国内团队是新人的门槛。第四，不许 div 这事是真规定，想加个分割线得去找 Divider，想调间距得用 VStack gap={6} 而不是 margin-top。适应了会发现是好事，间距全部落在 4 的倍数体系里，不会出现 13px 这种鬼数字，但前两小时很别扭。再加一条不算坑但得提醒的：它在 beta，0.7.x 版本，663 个 open issue，随时可能有破坏性改动，它自己提供了 codemod 迁移命令，说明作者清楚这事会发生。要用在生产，先把版本锁死，别跟着 latest 走。
什么人该用：做内部后台、SaaS 中台、管理系统的团队，想让 AI 直接接手 UI 的团队，需要长期维护一套设计规范的产品。什么人先别碰：只做一两个落地页、官网的，中文产品且对字体排版有要求的，想把它当稳定基础设施用的——它自己标着 beta。
最后说个我挺喜欢的细节。Button 文档里写了一段无障碍要求：徽标文字在 14 种颜色、三种状态、两种背景下，字色对比度必须达到 4.5:1，一共 336 对组合，一个都不能漏。这种话一般设计系统不会写进组件文档，因为写出来就得负责。一个愿意把这种账算清楚、并且公开写出来的项目，我愿意再给它一年时间看。它默认写代码的不是人，这个默认，可能是对的。
想复现的，30 分钟够
我把踩过的坑抹平了，按这个顺序走：Vite 加 React 19，@vitejs/plugin-react 用 5.x，6.x 会撞 Babel 8 的 peer 依赖；装 @astryxdesign/core、@astryxdesign/theme-neutral、@stylexjs/stylex，再加 -D @astryxdesign/cli，npm 慢就加 --registry=https://registry.npmjs.org；入口文件 import 三个 CSS，顺序不能错，reset、astryx、theme；套一层 Theme provider；npx @astryxdesign/cli init 让 agent 拿到组件索引；npx @astryxdesign/cli component Button 随便读两个组件；最后跑 npx @astryxdesign/cli doctor，有警告先看主题字体。第七步过了，剩下的就是拼积木。我那个看板的全部源码，JSX 一百多行，没有一行自定义 CSS。
你们团队现在让 AI 写 UI 吗？写到什么程度了？评论区说个真实的，我挑三个下篇拆。
数据来源：GitHub 仓库 meta/astryx，star 数、issue 数、创建时间、协议，2026-11-10 读取。npm 周下载量为 npm 官方统计接口，2026-11-02 至 11-08。包体积为本机 vite build 输出。组件数 174、主题 7 套来自 astryx component --list、astryx theme list。字体依赖来自 astryx doctor 的 theme-fonts 检查结果。
#AI工具 #设计系统 #Meta #前端开发 #开源项目