Meta 开源 Astryx：含 150+ 无障碍组件、七种主题和 CLI 的 Agent 就绪 React 设计系统

Meta 发布了 Astryx：https://github.com/facebook/astryx，这是一个完全可定制的开源设计系统，旨在由人类和与其协作的 AI 代理共同操作。它现在已提供测试版。Astryx 并不是一个新的实验。它在 Meta 内部发展的八年中成长，公司表示它已成为最常用和规模最大的设计系统，由每天依赖它的工程师、设计师和产品团队塑造。

该系统提供 150+ 个可访问组件（文档网站目前列出 160+ 个）、品牌级主题、暗色模式、可直接使用的模板，以及作为一个统一套件的命令行工具 (CLI)。它基于 React：https://react.dev/ 和 StyleX：https://stylexjs.com/ 构建。你可以导入预构建的 CSS 并使用类型化的 React 组件。无需设置构建插件或采纳额外的样式库。

大多数设计系统会迫使你做出选择。采用大型公司的系统，你的应用往往看起来像别人的产品。相反，如果使用复制粘贴组件，每个项目都会分叉自己的片段，缺乏共享一致性，上游修复无法继承，且可访问性问题悄悄成为你的责任。

Astryx 将两者分离。系统控制行为、可访问性和质量。主题控制外观。你可以在令牌级别（颜色、字体、圆角、动画）进行自定义，从而让应用明显具有你的特色，而无需重写代码。主题只是 CSS 自定义属性的覆盖集合，因此设计师可以在不分叉或包装组件源码的情况下重新设计 Astryx。

其明确的设计原则是以指导为主而非强制执行、有完整文档的强约定、一个供人类和 AI 使用的系统，以及通过衡量获得认可——约定是经过测试的，而非凭空断言。

Astryx 分为三层。基础（Foundations）是用于实现一致、可访问界面的基本元素：排版、颜色、布局和可访问性。组件（Components）是 150+ 个可重用构建块，全部提供完整 TypeScript 支持。模式（Patterns）是经过实践验证的常见工作流解决方案：表格页面、详情布局、表单向导、导航和数据输入流程。

有两个设计决策使其异常开放。组件可以在任何层级组合，而不是被封闭在顶层 API 之后；当你需要完全拥有组件时，swizzle 可以将组件的完整源代码导出到你的项目中。样式是通过 StyleX 创建的，但对使用者保持不可见，因此你可以使用 Tailwind、CSS 模块或普通 CSS 通过 className 进行覆盖：https://astryx.atmeta.com/docs/getting-started —— 取决于项目已经在使用的方式。下面的说明演示了一组组件在 Astryx 提供的七种主题中仅在令牌变化时如何重新样式化。

下面的组件从未改变。只有令牌会变化。选择一个主题，拖动滑块，观察同样的可访问 React UI 在无需重写的情况下重新样式化。

Meta 将 Astryx 定位为对当前软件编写方式的回应。随着越来越多的代码由智能代理生成，观点认为，设计系统必须重新构思，而不是修补。API、规范、文档和 CLI 是一起设计的，因此人类和 AI 助手会从相同参考中以相同方式构建。团队注意到，每一次让 Astryx 对 AI 更容易的改动，也让它对人类更容易。

这在工具中也有所体现。CLI：https://astryx.atmeta.com/docs/cli（@astryxdesign/cli）可以列出并生成模板：https://astryx.atmeta.com/templates，打印完整组件文档，生成并构建主题，运行代码迁移工具以升级版本，并通过命令行或 MCP 显示机器可读文档。组件随附一致的命名、属性和组合规则，因此一旦你学会几个组件，人类和模型都可以预测不熟悉组件的行为。

因为 Astryx 是一个前端库，“部署”它意味着将其添加到 React 应用中。该包（@astryxdesign/core：https://www.npmjs.com/package/@astryxdesign/core，内部称为 XDS）列出了 React 和 react-dom ≥ 19.0.0 作为 peer 依赖，以及 StyleX。它提供预构建 CSS，因此无需添加 PostCSS 或 Babel 配置。支持的设置包括带 Tailwind 的 Next.js、带 StyleX 的 Next.js、Vite，以及通过 UMD 包在 unpkg 或 jsDelivr 上无构建 CDN 路径。下面的交互式检查器会为你的技术栈生成准确的安装和设置步骤，并标记任何需要先更改的内容。

Astryx 是一个前端设计系统，因此“部署”的意思是在 React 应用中使用它。回答三个问题即可获取确切的安装路径、依赖检查以及是否可以发布。

来源：astryx.atmeta.com：https://astryx.atmeta.com/ 以及 github.com/facebook/astryx：https://github.com/facebook/astryx

Michal Sutter 是一位数据科学专业人士，拥有帕多瓦大学（University of Padova）数据科学硕士学位。凭借扎实的统计分析、机器学习和数据工程基础，Michal 擅长将复杂的数据集转化为可操作的洞见。

构建一个能动事件场地运营商 [完整代码]：https://pxllnk.co/twdn5

谢谢！我们的团队会尽快联系您 🙌

Meta has released Astryx：https://github.com/facebook/astryx, an open source design system that is fully customizable and built to be operated by both people and the AI agents working alongside them. It is available now in Beta. Astryx is not a new experiment. It grew inside Meta over the last eight years, where the company says it became its most-used and largest design system, shaped by the engineers, designers, and product teams who depend on it daily.

The system ships 150+ accessible components (the docs site now lists 160+), brand-level theming, dark mode, ready-to-ship templates, and a CLI as one cohesive package. It is built on React：https://react.dev/ and StyleX：https://stylexjs.com/. You import pre-built CSS and use typed React components. There is no build plugin to wire up and no styling library to adopt.

Most design systems force a choice. Adopt a large company’s system and your app tends to look like someone else’s product. Reach for copy-paste components instead and every project forks its own snippets, with no shared coherence, no upstream fixes, and accessibility quietly becoming your problem.

Astryx separates the two concerns. The system controls behavior, accessibility, and quality. Themes control how it looks. You customize at the token level (color, type, radius, motion) so the app becomes unmistakably yours without rewrites. A theme is simply a set of CSS custom property overrides, so a designer can retheme Astryx without forking or wrapping component source.

Its stated design principles are guidance over enforcement , strong documented conventions , one system for humans and AI , and earned by measurement — conventions are tested, not asserted.

Astryx is organized in three layers. Foundations are the primitives for cohesive, accessible interfaces: typography, color, layout, and accessibility. Components are the 150+ reusable building blocks, all with full TypeScript support. Patterns are battle-tested solutions for common workflows: table pages, detail layouts, form wizards, navigation, and data-entry flows.

Two design decisions make it unusually open. Components are composed at any level rather than locked behind a closed top-level API, and swizzle can eject a component’s full source into your project when you need to own it. Styling is created with StyleX but stays invisible to consumers, so you can override with className using Tailwind, CSS modules, or plain CSS：https://astryx.atmeta.com/docs/getting-started — whatever the project already uses. The explainer below shows how one set of components restyles across Astryx’s seven shipped themes when only the tokens change.

The components below never change. Only the tokens do. Pick a theme, drag the sliders, and watch the same accessible React UI restyle with no rewrites.

Meta frames Astryx as a response to how software is now written. As more code is produced by agents, the argument goes, design systems have to be rethought rather than patched. The API, conventions, docs, and CLI were designed together, so a person and an AI assistant build the same way from the same reference. Every change that made Astryx easier for AI, the team notes, made it easier for people too.

That shows up in the tooling. The CLI：https://astryx.atmeta.com/docs/cli ( @astryxdesign/cli ) can list and scaffold templates：https://astryx.atmeta.com/templates, print full component docs, generate and build themes, run codemods to migrate versions, and surface machine-readable docs from the command line or over MCP . Components ship with consistent naming, prop, and composition rules, so once you learn a few, both people and models can predict how an unfamiliar one behaves.

Because Astryx is a front-end library, ‘deploying’ it means adding it to a React app. The package ( @astryxdesign/core ：https://www.npmjs.com/package/@astryxdesign/core, referred to internally as XDS) lists React and react-dom ≥ 19.0.0 as peer dependencies, alongside StyleX. It ships pre-built CSS, so there is no PostCSS or Babel configuration to add. Supported setups include Next.js with Tailwind, Next.js with StyleX, Vite, and a no-build CDN path via the UMD bundle on unpkg or jsDelivr. The interactive checker below generates the exact install and setup steps for your stack and flags anything that needs to change first.

Astryx is a front-end design system, so “deploy” means dropping it into a React app. Answer three questions and get the exact install path, a requirements check, and whether you are clear to ship.

Sources: astryx.atmeta.com：https://astryx.atmeta.com/ and github.com/facebook/astryx：https://github.com/facebook/astryx

Michal Sutter is a data science professional with a Master of Science in Data Science from the University of Padova. With a solid foundation in statistical analysis, machine learning, and data engineering, Michal excels at transforming complex datasets into actionable insights.

Build an Agentic Event Venue Operator [Full Codes]：https://pxllnk.co/twdn5

Thanks! Our team will contact you soon 🙌