5.2K Star！Meta 开源了其内部使用 8 年的设计系统，已支撑了超1.3万个应用！

最近在前端圈，有一件事让不少人都兴奋不已。

不是某个框架发布了重大版本，也不是什么新的性能优化方案，而是Meta 把自家用了整整 8 年的设计系统Astryx 给开源了。

这不是一套从零开始的新系统，而是在 Meta 内部经历了 8 年实战检验的"老兵"。它支撑过 Facebook、Instagram、Threads 等超过13000个应用的界面开发，见过各种复杂场景，踩过无数坑，然后被一点点打磨到现在这个状态。

更有意思的是，这套系统在设计之初就考虑了一个很超前的问题：如何让人和 AI 助手用同一种方式来构建界面。

为什么说 Astryx 不一样？

在聊具体功能之前，我想先说说 Astryx 的几个核心理念，这些理念决定了它和其他设计系统的本质区别。

1. 开放的内部架构，不搞黑盒

很多设计系统都有一个通病：组件是"封闭"的。

你拿到的是一个完整的组件，能改的只有 props，内部结构完全看不到。想要做一些深度定制，要么只能包一层，要么就得 fork 整个仓库自己改。

Astryx 反其道而行之。它的组件是"开放"的——每个组件的内部构建块都直接导出，你可以在任意层级拆开重组。

比如一个按钮，你不仅能拿到完整的Button 组件，还能拿到它内部的ButtonRoot、ButtonIcon、ButtonContent 这些小块，按自己的需求重新组合。

要是还不够，它还提供了一个叫"swizzle"的功能，可以把某个组件的完整源码直接导出到你的项目里，让你完全接手维护。

这种自由度，在其他设计系统里是很少见的。

2. 样式不绑定，想用什么就用什么

Astryx 的样式是基于 Meta 自家的 StyleX 引擎构建的，但这对你来说是完全透明的。

你不需要安装 StyleX，不需要配置构建插件，甚至不需要知道它的存在。

更厉害的是，它支持用className 覆盖样式。不管你项目里用的是 Tailwind、CSS Modules 还是普通 CSS，都能无缝集成。

3. 主题就是 CSS 变量

传统的设计系统，想要改主题风格，往往需要：

• • Fork 仓库改源码
• • 或者包一层组件自己做主题适配
• • 再或者写一堆复杂的主题配置

Astryx 把这件事简化到了极致——主题就是一组 CSS 变量的覆盖。

设计师只需要修改几个 CSS 变量的值，就能让整个系统的风格焕然一新，完全不用碰组件代码。

这听起来简单，但实际上解决了一个很实际的问题：设计师和开发人员之间的协作鸿沟。

以前设计师想要改个配色，可能需要开发人员配合改好几处代码；现在设计师自己就能搞定。

4. 人和 AI 用同一份文档

这可能是 Astryx 最有前瞻性的设计。它的 API、文档和 CLI 是按照同一套约定设计的，人和 AI 助手看的是同一份参考。

Meta 引入了一种叫"JSON Manifest"的机制，为 CLI 命令提供了机器可读的结构化合同。AI 代理可以直接调用这个端点，获取所有功能的完整定义，包括命令、参数、类型等，不需要猜测或"即兴发挥"。

这解决了当前 AI 编程的一个痛点：很多设计系统的文档是人可读的 HTML，AI 代理无法准确理解组件的 API，经常会引用不存在的属性或组件。

Astryx 通过提供结构化的清单，让 AI 代理能准确地使用组件。

核心功能概览

150+ 无障碍组件

Astryx 提供了超过 150 个可无障碍访问的组件，涵盖了大部分常见的 UI 场景：

• •基础组件：Button、Input、Checkbox、Radio、Select 等
• •导航组件：Navigation、Tabs、Breadcrumbs 等
• •数据展示：Table、Card、Avatar、Badge 等
• •反馈组件：Toast、Dialog、Tooltip、Progress 等
• •布局组件：Flex、Grid、Stack、ScrollView 等

每个组件都有完整的 TypeScript 支持、内置深色模式和无障碍默认设置，可以直接在生产环境中使用。

现成模板

除了组件，Astryx 还提供了一些现成的模板，帮助你快速搭建常见的页面布局：

• •表格页面：适合数据管理类应用
• •详情页面：适合展示单条数据的详情
• •表单向导：适合多步骤表单场景
• •导航模式：适合各种导航布局

这些模板不是简单的代码片段，而是经过实战检验的设计模式，可以直接拿来用。

CLI 工具

Astryx 附带了一个功能强大的 CLI 工具，提供以下功能：

• •组件文档浏览：查看所有组件的详细文档
• •模板生成：快速创建基于模板的项目
• •脚手架：生成组件和页面的骨架代码
• •主题管理：查看和管理主题
• •代码迁移：从其他设计系统迁移到 Astryx

更厉害的是，这个 CLI 集成了 MCP（Model Context Protocol）服务器。任何兼容 MCP 的 AI 编码环境（如 Cursor、Claude Code、GitHub Copilot）都可以直接连接 Astryx，利用结构化 API 搭建项目、浏览组件或生成主题。

快速上手

说了这么多，你肯定想知道怎么把 Astryx 用起来。别担心，它的上手门槛很低。

安装

首先安装核心包和主题：

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

# pnpm
pnpm add @astryxdesign/core @astryxdesign/theme-neutral
pnpm add -D @astryxdesign/cli

# yarn
yarn add @astryxdesign/core @astryxdesign/theme-neutral
yarn add -D @astryxdesign/cli

配置

最简单的配置只需要几行 CSS 导入和一个主题提供者：

import '@astryxdesign/core/dist/astryx.css';
import '@astryxdesign/theme-neutral/dist/theme.css';
import { ThemeProvider } from '@astryxdesign/core';

function App() {
  return (
    <ThemeProvider>
      {/* 你的应用内容 */}
    </ThemeProvider>
  );
}

不需要配置构建插件，不需要配置 PostCSS 或 Babel，开箱即用。

使用组件

使用组件也很简单，直接导入使用即可：

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

function MyComponent() {
  return (
    <Card padding="medium">
      <Input placeholder="请输入内容" />
      <Button variant="primary">提交</Button>
    </Card>
  );
}

自定义主题

如果你想自定义主题，只需要覆盖 CSS 变量即可：

:root {
  --astryx-color-primary: #6366f1;
  --astryx-color-primary-hover: #4f46e5;
  --astryx-font-family-sans: 'Inter', system-ui, sans-serif;
}

使用 CLI

为了方便使用 CLI，可以在package.json 中添加脚本：

{
  "scripts": {
    "astryx": "node node_modules/@astryxdesign/cli/bin/astryx.mjs"
  }
}

然后就可以用以下命令：

# 查看组件列表
npm run astryx -- component --list

# 生成模板
npm run astryx -- template --create my-page

# 查看主题
npm run astryx -- theme --list

写在最后

Astryx 不是一套完美的设计系统，但它带来了一些很有价值的新思路：

• •开放架构：组件可以拆开重组，源码可以导出
• •样式自由：不绑定特定样式方案，支持任意 className 覆盖
• •主题简单：主题就是 CSS 变量，设计师改起来不用写代码
• •AI 友好：人和 AI 用同一份文档，API 结构化可查询

如果你正在寻找一套既开箱即用、又能自由定制的设计系统，尤其是如果你也在用 AI 辅助开发，Astryx 值得关注。

Github：https://github.com/facebook/astryx

官方文档：https://astryx.atmeta.com