Meta 开源 Astryx：一个面向智能体的 React 设计系统，包含 150+ 无障碍组件、七种主题和 CLI

Astryx 是 Meta（原 Facebook）于近日开源的一款设计系统，目前处于 Beta 阶段。它并非全新项目，而是 Meta 内部在过去八年中逐步打磨而成，已成为该公司最大、使用最广的设计系统，被 13,000 多个应用采用。该系统基于 React 和 StyleX 构建，提供了 150 多个无障碍组件（官方文档显示已超过 160 个）、品牌级主题定制、深色模式、可直接使用的模板以及命令行工具（CLI），所有功能打包在一起。开发者无需额外配置构建插件或引入样式库，只需导入预构建的 CSS 并使用类型化的 React 组件即可开始使用。

Astryx 的核心设计思路是分离行为与外观。大多数设计系统迫使开发者在“使用大型公司系统导致应用外观同质化”和“使用可复制粘贴组件导致项目碎片化、缺乏可维护性”之间做出选择。Astryx 通过将行为、无障碍性和质量控制放在系统层面统一管理，而外观则通过 CSS 自定义属性（令牌）进行主题定制来解决这一矛盾。设计师无需修改组件源码即可通过覆盖令牌值重新定义主题，支持颜色、排版、圆角、动效等维度的调整。

系统的架构分为三层：基础层（Foundations）提供排版、颜色、布局和无障碍性等基础元语；组件层（Components）包含 150 多个可复用、TypeScript 全支持的构建块；模式层（Patterns）提供了经过实战检验的通用流程解决方案，如表格页面、详情布局、表单向导和导航等。值得关注的两个设计决策是：组件支持任意层次的组合，而不是封闭在顶层 API 之后；以及“swizzle”功能允许将组件的完整源码弹出到项目中，以便开发者完全掌控。

Meta 强调 Astryx 是为智能体（AI Agent）时代设计的。随着代码生成越来越多地由 AI 完成，设计系统需要从根本上重新思考。Astryx 的 API、约定、文档和 CLI 从始自终针对人和 AI 两种使用者协同设计，使得人类开发者与 AI 助手能够基于同一套参考体系进行构建。CLI（@astryxdesign/cli）支持列出和生成模板、打印完整组件文档、生成和构建主题、运行代码迁移（codemod），并通过命令行或 MCP（Model Context Protocol）提供机器可读的文档。

部署方面，Astryx 要求 React 和 react-dom 版本 ≥ 19.0.0，以及 StyleX 作为对等依赖。它自带预构建 CSS，因此无需配置 PostCSS 或 Babel。支持的环境包括 Next.js（配合 Tailwind 或 StyleX）、Vite，以及通过 unpkg 或 jsDelivr 的 CDN 无构建路径。目前项目以 MIT 许可证发布，可在 GitHub 上获取。由于仍处于 Beta，官方建议在评估后用于非生产环境。