Meta 开源内部设计系统 Astryx：使用了8年、支撑13000+应用的设计系统

大多数设计系统是创业公司作品。Astryx 是 Meta 内部使用了 8 年、撑起了 13,000+ 应用的”真生产级”设计系统，现在正式开源了。

Astryx（facebook/astryx，⭐ 12,324，MIT）是 Meta 正式开源的设计系统，在 Meta 内部被称为”公司内最大、最多人使用的设计系统”，基于 React 19+ 和 Meta 自研的 StyleX 构建，提供 150+ 可访问组件、开箱即用的模板和完整 CLI。

核心数据

它解决什么问题

前端团队每次从零搭设计系统，都要解决：组件一致性、可访问性、主题定制、多端适配这些问题。Astryx 的解法是把 Meta 8 年、13000+ 应用验证过的方案全部开源：

• 150+ 可访问组件：开箱即用，符合 WCAG 标准
• 品牌级主题定制：支持暗色模式、多品牌主题
• Ready-to-Ship 模板：不是组件集合，是可以直接上线的页面模板
• 人机共用同一套工具：StyleX 是 Meta 内部人机共建的设计系统，AI Agent 和人类工程师使用同一套工具链

技术亮点

1. StyleX — Meta 自研 CSS-in-JS 方案

Astryx 建立在 Meta 自研的 StyleX 之上，不是 Tailwind，不是 Emotion，是 Meta 认为最适合大型前端团队的 CSS-in-JS 方案。

2. 无需构建插件，即装即用

import { Button, Card, Input } from "@astryxdesign/core";
import "@astryxdesign/core/style.css";

export function MyPage() {
  return (
    <Card>
      <Input placeholder="Enter your email" />
      <Button variant="primary">Get Started</Button>
    </Card>
  );
}

导入预构建的 CSS，使用类型安全的 React 组件，不需要任何构建插件。

3. Storybook + Sandbox 在线体验

• Storybook：所有组件的交互式文档
• Sandbox：浏览器里直接试玩
• 文档：完整使用指南

4. AI Agent 友好

StyleX 的设计从一开始就是”人和 AI 都能用”的系统，AI Agent 可以精确理解组件边界和样式约束，不会像传统 CSS 那样产生命名冲突和覆盖混乱。

和其他设计系统的区别

Astryx 的护城河是”在百万级用户产品里验证过”，而不是 Demo 演示。

项目地址：github.com/facebook/astryx
在线体验：Storybook · Sandbox
文档：astryx.atmeta.com