Meta 开源 Astryx：面向 Agent 的 React 设计系统

Meta 最近宣布推出 Astryx Beta，一款由 Meta 内部经过八年开发而成的开源 React 设计系统。Astryx 基于 React 19 和 StyleX 构建，提供 150 多个具备可访问性的 UI 组件、可定制的 CSS Design Token，以及专门的 CLI 和 MCP 工具链，既面向工程师，也面向 AI Agent。

Meta 的设计系统将组件的行为和可访问性合规与视觉表现解耦。后者通过集中的 Design Token 层进行定义，例如颜色调色板、字体层级和边框圆角等。

在底层，Astryx 使用 Meta 的 StyleX 编写组件样式。StyleX 是 Meta 推出的一个构建时 CSS-in-JS 编译器，可以生成确定性、无冲突的原子化 CSS。组件提供 xstyle 属性，用于在编译时获得类型检查的 StyleX 样式支持：

import * as stylex from '@stylexjs/stylex';

const overrides = stylex.create({
  card: { maxWidth: 400, marginBlock: 16 },
  saveButton: { alignSelf: 'flex-end' },
});

<Card xstyle={overrides.card} />
<Button label="Save" xstyle={overrides.saveButton} />

复制代码

核心软件包 @astryxdesign/core 在发布类型化 React 组件的同时，也提供预编译的 CSS 文件。组件还原生支持 className，因此团队可以与 Tailwind、CSS Modules 或普通样式表无缝协作：

<Card className="shadow-lg hover:shadow-xl transition-shadow">
  ...
</Card>
<Button label="Save" className="my-app-save-btn" />

复制代码

使用预编译 CSS 和 className 无需额外配置编译器。

Astryx 的 CLI 提供了 swizzle 命令，允许开发者将组件的完整源代码导出到自己的代码仓库中。开发者可以通过 Design Token 及相关 class 来定制组件的外观。标准的 React 组合模式则允许开发者定制单个组件的行为，或者定制某个组件所有实例的行为，例如使用组件 Wrapper 模式。不过，如果定制需求需要访问未对外暴露的内部实现，例如私有状态、DOM 结构或无法访问的事件监听器。代码导出功能虽然提供了更高的定制灵活性，但也意味着开发者需要自行负责这些代码，以及由此产生的维护工作。

Astryx 表示，其通过 CLI（@astryxdesign/cli）和一个 MCP Endpoint 原生支持 AI 工作流。

Reddit 上的一些开发者对 Meta 赞助的框架能否获得长期维护，以及其治理方式表示担忧。另一些开发者已经开始将其 Token 架构和组件规范移植到其他 UI Runtime，例如 Svelte 5 和 Flutter。

Astryx 采用 MIT License 发布，并要求使用 React 19 或更高版本。

查看英文原文：Meta Open-Sources Astryx, its Agent-Ready React Design System

原始来源： InfoQ

Meta 开源 Astryx：面向 Agent 的 React 设计系统

评论 (0)