Meta 把内部用了 8 年的设计系统开源了，Astryx 到底有啥不一样？

小鹿·界面实验室内容创作者 2026-07-13 0 阅读

Meta 把内部用了 8 年的设计系统开源了，Astryx 到底有啥不一样？

导语

如果你团队一直纠结要不要上设计系统 —— 怕太重、怕 lock-in、怕学一套新东西 —— 那 Meta 最近开源的这个东西值得你看看。Astryx 是 Meta 内部用了 8 年的设计系统，撑起了 13000+ 应用，现在完全开源了。而且它有个挺特别的设计：既给人类用，也给 AI agent 用。

Astryx 是什么

Astryx 不是又一个组件库。它是 Meta 内部成长了 8 年的设计系统，React + StyleX 构建，开源时已经包含：

150+ 可访问组件（按钮、表格、对话框、导航……你能想到的都有）
品牌级主题系统（CSS 自定义属性，一套主题覆盖全部组件）
暗色模式开箱即用
CLI 工具链（模板生成、主题构建、组件文档、codemod 升级）
AI agent 就绪从 API 到文档到 CLI，都考虑到了 AI 协同

而且它在 Meta 内部不是小打小闹 —— 13000+ 应用在用，每天被全公司的工程师和设计师使用。

和市面上其他设计系统比，Astryx 最特别的地方

1. 没有样式 lock-in

大多数设计系统会要求你用它的 styling 方案。Astryx 反着来 —— 它用 StyleX 写内部样式，但对使用者完全透明。你想用 Tailwind、CSS Modules、还是原生 CSS 来覆盖样式都行，className 直接传。

2. 主题不是配置，是 CSS 变量覆盖

Astryx 的主题机制特别轻 —— 一套主题就是一组 CSS 自定义属性（custom properties）的覆盖值。设计师不需要写 React 代码就能改主题。

/* 以 MyTheme 为例 */
:root {
  --astx-color-brand-primary: #6C47FF;
  --astx-color-brand-hover: #5A3CE0;
  --astx-radius-sm: 6px;
  --astx-radius-md: 10px;
}

你甚至可以创建一个主题包发布到 npm，其他人 npm install 就能用。

3. “swizzle” 机制：要改就改彻底

组件库最痛苦的场景是：有个组件 95% 符合需求，但有 5% 就是做不到。Astryx 提供了 swizzle 命令，一键把组件源码弹射到你的项目里，然后想怎么改就怎么改。

npx astryx swizzle Button

这比你 wrapping 一百层 props 要干净得多。

4. 专门为 AI agent 设计

这是 Astryx 最独特的一点。它的 API、文档、CLI 都是同时为人类和 AI 设计的。CLI 可以直接输出机器可读的组件文档：

node node_modules/@astryxdesign/core/docs.mjs Button

这样 AI agent 不需要爬文档网站，直接通过 CLI 就能拿到完整类型、props、最佳实践。

而且 Astryx 还提供了 MCP Server（目前 Beta），AI 编程工具可以直接通过 MCP 协议调用 Astryx 能力。

快速上手：3 步跑起来

安装

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

引入样式

Astryx 最友好的一点是：不需要任何构建插件。它直接发预编译 CSS，你 import 三行就行：

@import '@astryxdesign/core/reset.css';
@import '@astryxdesign/core/astryx.css';
@import '@astryxdesign/theme-neutral/theme.css';

这三行的导入顺序对应层叠顺序：reset（底层重置）→ astryx-base（组件样式）→ theme（主题覆盖）。

用 Provider 包裹

import { Theme } from '@astryxdesign/core/theme';
import { neutralTheme } from '@astryxdesign/theme-neutral/built';

export function Providers({ children }) {
  return (
    
      {children}
    
  );
}

然后你就可以在任何地方用 Astryx 的组件了：

import { Button } from '@astryxdesign/core';
import { Card, CardHeader, CardBody } from '@astryxdesign/core/Card';

function MyPage() {
  return (
    
      
      
        
      
    
  );
}

和 Tailwind 一起用

如果你项目已经在用 Tailwind，Astryx 也能共存。它提供了一个 tailwind-theme.css，把设计系统的 tokens 映射到 Tailwind 的 @theme 里：

@layer reset, theme, base, astryx-base, astryx-theme, components, utilities;

@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/preflight.css' layer(base);
@import '@astryxdesign/core/reset.css';
@import '@astryxdesign/core/astryx.css';
@import '@astryxdesign/theme-neutral/theme.css';
@import '@astryxdesign/core/tailwind-theme.css';
@import 'tailwindcss/utilities.css' layer(utilities);

CLI 不只是脚手架

Astryx 的 CLI 功能挺多的：

npx astryx init              # 初始化项目
npx astryx component Button   # 查看组件文档
npx astryx template dashboard # 生成页面模板
npx astryx theme build        # 构建主题 CSS
npx astryx swizzle Button     # 弹射组件源码
npx astryx upgrade --apply    # 版本升级自动迁移
npx astryx gap-report         # 报告缺失功能

最实用的是 template 命令 —— 它不是生成一个空页面，而是生成完整的布局模板（仪表盘、设置页、表单页），你只需要填内容。

什么时候该用 Astryx

Astryx 的定位和 Ant Design、Material UI 不完全一样。它最合适的场景：

你的团队需要一个设计系统但不想被锁定在某一种 CSS 方案里
你在纠结要不要上 Tailwind，又怕失去组件库的便利
你的团队已经在用 AI 辅助开发 —— Astryx 对 AI 的友好度是目前开源设计系统里最好的
你需要品牌级主题定制，而不只是换色

不太适合的场景：

你需要移动端原生组件（Astryx 目前只有 Web）
你团队只做简单的内部工具，不需要 150+ 组件

收尾

Astryx 目前还是 Beta，但从 Meta 内部 8 年的打磨来看，底子是扎实的。它最让我眼前一亮的设计不是组件多丰富，而是从头就考虑了一件事：人用和 AI 用应该用同一套接口。

如果你最近在调研设计系统，去 GitHub 上看看 [facebook/astryx](https://github.com/facebook/astryx)，跑一下它的 Storybook 和 Sandbox，8.4k stars 刚开源就已经在说明问题了。

评论区

0 条评论

登录后可评论。

Meta 把内部用了 8 年的设计系统开源了，Astryx 到底有啥不一样？