10 个关键问题Q&A
-
Q：Astryx 是什么？ A：Meta 开源、面向 AI Agent 的 React 设计系统，内部沉淀 8 年，主打人和 AI 共用一套 UI 规范。 -
Q：底层技术是什么？ A：React19 + StyleX 编译型样式方案。 -
Q：它最大区别于 AntD、MUI 在哪？ A：原生支持 MCP 协议，把 AI 代理作为一等开发角色，AI 可读懂规范、生成合规 UI。 -
Q：组件资产情况如何？ A：180 + 无障碍 React 组件，自带富文本组件与多套 B 端、电商业务模板。 -
Q：主题定制能力怎么样？ A：视觉样式与交互逻辑解耦，支持完整自定义主题、原生暗色模式。 -
Q：成熟度风险是什么？ A：目前 Beta 阶段，API 可能调整，社区、中文资源较少。 -
Q：能不能用在 React18 及更早项目？ A：不适合，强绑定 React19，存量项目升级成本高。 -
Q：MCP/CLI 能力能做什么？ A：AI 代理读取组件文档、自动生成组件、主题、脚手架项目代码。 -
Q：适合哪些业务场景？ A：AI 应用、Agent 后台、SaaS 管理平台、电商界面。 -
Q：什么场景不建议选型？ A：线上核心稳定系统、依赖国内组件生态、不准备升级 React19 的存量项目。
Astryx 是 Meta 开源、处于 Beta 阶段的面向 AI 智能体（agent‑ready）的设计系统，基于 React19 + 与 StyleX 构建，在 Meta 内部打磨 8 年，已经支撑超过 13000 个应用，主打高度可定制、适配 AI 与开发者，帮助项目更快交付产品astryx.atm...。
核心能力
- 丰富组件库
拥有 180 + 可访问 React 组件，原生支持间距规范、暗色模式、灵活样式；包含富文本组件 Astryx RichText；配套开箱即用生产级页面模板，可直接填充内容使用astryx.atm...。 - 主题系统
提供可完整自定义的主题，无需从零开发，适配不同品牌风格，行为逻辑与视觉样式解耦。 - AI/Agent 友好
支持命令行 CLI、MCP 协议，AI 代理可以读取组件文档、脚手架项目、生成主题，人和 AI 代理使用同一套设计契约开发 UI。 - 开发者导向
适配现有开发工作流，不强制改造开发习惯，强调速度、清晰度与创作自由度，鼓励社区贡献迭代系统。
Astryx
开源设计系统・官网：https://github.com/meta/astryx#astryx 一套高度可定制的开源设计系统，面向当下的开发模式打造：由开发者、设计师以及和他们协同的 AI 智能体共同使用。 当前处于 Beta 阶段・基于 React 和 StyleX 构建 npm 包：https://www.npmjs.com/package/@astryxdesign/core｜许可证｜贡献指南 演示站点：https://astryx.atmeta.com/ 文档演示：https://astryx.atmeta.com/storybook/ 在线沙盒：https://astryx.atmeta.com/sandbox/ 社区 Discord：https://discord.com/invite/XnsUcFykEP
概述
Astryx 是一套在 Meta 内部历经八年打磨出来的开源设计系统，现已成为 Meta 内部使用规模最大、覆盖最广的设计系统 —— 支撑超过 13000 个应用，由每天依赖它的工程师、设计师和产品团队共同塑造。
整套系统整合了 150+ 符合无障碍规范的组件、品牌级主题能力、暗色模式、开箱即用的页面模板以及配套 CLI 工具。你可以直接引入预构建 CSS，搭配带类型定义的 React 组件使用；无需额外构建插件，也不用强制接入某款样式库，人和 AI 助手可以使用同一套工具链进行开发。
Astryx 的差异化特点
- 开放底层结构
组件支持任意层级的组合，不是封闭的顶层 API。基础原子构件全部对外导出；如果你需要深度改造，可以使用 swizzle 命令把组件完整源码导出到项目中自主掌控。 - 样式无绑定锁定
Astryx 内部使用 StyleX 编写样式，但这对使用者完全透明。你可以直接用 className覆盖样式，不管项目在用 Tailwind、CSS Modules 还是原生 CSS，都可以兼容。 - 无需封装即可定制
主题本质上就是一组 CSS 自定义属性覆盖。设计师不用 Fork 源码、不用二次封装组件，就能做出辨识度极高的定制样式。 - 同时面向人类与 AI 智能体设计
API、文档、CLI 一体化设计，人和 AI 助手基于同一套参考资料、用完全一致的方式开发。
快速上手
Astryx 要求 React 19 或更高版本（react、react-dom是 @astryxdesign/core的对等依赖）
安装 Astryx、配套主题以及对等依赖：
# npm
npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
npm install -D @astryxdesign/cli
# pnpm
pnpm add @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
pnpm add -D @astryxdesign/cli
# yarn
yarn add @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
yarn add -D @astryxdesign/cli
你也可以全局一次性安装 CLI，这样任意目录都可以直接调用 astryx命令，所有编码智能体都能识别 Astryx；但在项目内执行时，依然会使用该项目本地版本：
npm i -g @astryxdesign/cli
项目本地安装、全局安装，还是两者都装？
astryx docs global/project-global-or-both文档对比了三种方案（推荐两者同时安装）；astryx docs global讲解全局模式工作原理。
最简配置只需要几行 CSS 引入 + 主题提供者组件，不需要构建插件、不需要 PostCSS / Babel 配置。完整教程（Next.js、Tailwind、Vite、CDN 接入方案）见 core 包的快速开始文档。
为了保证 AI 助手、新同学调用 CLI 时路径稳定不出错，可以在 package.json增加脚本：
"scripts": {
"astryx": "node node_modules/@astryxdesign/cli/clients/cli/bin/astryx.mjs"
}
之后这样使用：npm run astryx -- component --list
软件包说明
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@astryxdesign/lab：实验性组件，仅内部用于 Storybook 和沙盒，不会发布到 npm @astryxdesign/vega（Vega/Vega-Lite 图表封装）、@astryxdesign/charts（图表组件）仅以
@canary标签发布，暂无稳定版
设计原则
这是 Astryx 对使用者做出的承诺：
- 引导优先，而非强制约束
组件提供能力，而不是用限制规则阻碍开发。设计主张放在文档和示例里；只要你传入合法属性值，组件就会正常渲染。 - 清晰完备的规范约定
所有组件遵循统一的命名、属性、组合规则，配套完善文档。掌握少量组件后，就能举一反三；人和 AI 都可以预判陌生组件的行为。 - 同一套系统服务人类与 AI
API、规范、文档、CLI 统一设计，人和 AI 使用同一套范式开发。所有为 AI 优化的改动，同时也降低了人的开发成本。 - 基于实测迭代
规范不是拍脑袋定的，会做验证测试；结论保持开放，遇到新场景证明原有方案不合适时就重新调整。
架构
基础层 Foundation
保障界面视觉统一、满足无障碍要求的底层能力：排版、色彩、布局、无障碍规范。
组件层 Components
150+ 可复用 UI 组件库，完整 TypeScript 类型支持。
模式层 Patterns
经过线上验证的通用交互与工作流方案：列表页、详情页布局、分步表单、导航模式、数据录入流程等。
项目目录结构
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
参与贡献
欢迎提交贡献！完整指南查看 CONTRIBUTING.md。 有疑问或者 PR 需要协助，可以加入 Discord 社区。
规范与评审标准放在 Wiki：包含 API 规范、设计规范、组件生命周期、贡献模板、博客评审打分标准。提交 PR 前请阅读对应评审规则。
贡献者快速环境准备：仓库要求 Node 22+（长期支持版）、pnpm 11。 直接安装 pnpm，或者开启 Corepack，自动安装锁定版本的 pnpm：
corepack enable
pnpm install
如果缺少 corepack，可以手动安装 pnpm 或者 Corepack，故障排查见贡献文档。
主题展示 DOM 测试，共用 ui 项目的 DOM 与 StyleX 测试配置。在仓库根目录执行：
pnpm exec vitest run --project ui apps/docsite/src/__tests__/theme-showcase/
许可证
MIT
横向对比表
|
|
|
|
|
|
|---|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
✅ 对比小结： Astryx 最大差异不在组件多少，而在于把 AI 智能体当成一等公民；传统组件库是给开发者复制粘贴，Astryx 是让 AI 智能体也能理解这套设计规范，自动生成合规 UI。代价是目前版本还处于 Beta，生态不如 MUI、AntD 成熟。
补充说明
- swizzle
源于 React 生态（如 Docusaurus）术语，指 “弹出组件源码”，把封装好的组件源码导出到业务目录自由修改； - codemod
JS/TS 代码批量迁移脚本，用于版本升级、API 变更自动改代码； - peer dependency（对等依赖）
不由包自动安装，要求宿主项目自行安装对应版本； - StyleX
Meta 自研的编译型 CSS-in-JS 方案； - agent / AI assistants
这里特指编码智能体、AI 编程助手