Astryx
一个开源设计系统，完全可定制，专为当下构建方式而打造——由人类及其协作的智能体共同构建。 目前处于 Beta 阶段 · 基于 React 和 StyleX 构建
概述
Astryx 是一个开源设计系统，在过去八年中在 Meta 内部成长壮大，成为公司内使用最广泛、规模最大的设计系统——为 13,000 多个应用提供支持，并由每天依赖它的工程师、设计师和产品团队共同塑造。它作为一个统一的系统，提供了 150 多个无障碍组件、品牌级主题、深色模式、可直接使用的模板以及一个 CLI。你只需导入预构建的 CSS 并使用带类型的 React 组件——无需构建插件，也无需采用新的样式库——无论是人类还是 AI 助手，都使用相同的工具进行构建。
Astryx 的与众不同之处：
- 开放的内部结构。 组件设计为可在任意层级组合，而非被封闭在顶层 API 之后。你常用的构建块可以直接导出，当需要深入定制时，swizzle 功能可将组件的完整源码释放到你的项目中，由你完全掌控。
- 无样式锁定。 Astryx 使用 StyleX 编写样式，但对使用者来说完全透明。你可以通过 className 使用 Tailwind、CSS modules 或纯 CSS 进行覆盖——无论你的项目使用何种方式。
- 无需包装即可定制。 主题是一组 CSS 自定义属性覆盖，因此设计师无需 fork 或包装组件源码，就能让 Astryx 拥有独一无二的风格。
- 为人类和智能体而构建。 API、文档和 CLI 协同设计，使得人类和 AI 助手能够基于同一参考，以相同的方式进行构建。
快速开始
安装 Astryx 和一个主题：
# npm
npm install @astryxdesign/core @astryxdesign/theme-neutral
npm install -D @astryxdesign/cli
# pnpm
pnpm add @astryxdesign/core @astryxdesign/theme-neutral
pnpm add -D @astryxdesign/cli
# yarn
yarn add @astryxdesign/core @astryxdesign/theme-neutral
yarn add -D @astryxdesign/cli最简单的设置只需几个 CSS 导入加上一个主题提供者——无需构建插件，无需 PostCSS 或 Babel 配置。完整指南（Next.js、Tailwind、Vite 和 CDN）请参见 @astryxdesign/core 的 README。
为了可靠地使用 CLI，请在 package.json 中添加一个脚本：
"scripts": {
"astryx": "node node_modules/@astryxdesign/cli/bin/astryx.mjs"
}然后使用 npm run astryx -- component --list 运行。这可以避免 AI 助手或新开发者直接调用 CLI 时出现路径错误。
包
| 包 | 描述 | README | |---|---|---| | @astryxdesign/core | 组件、主题系统和工具 | README | | @astryxdesign/cli | CLI 工具：组件文档、模板、脚手架、主题和 codemods | README | | @astryxdesign/build | StyleX 源码构建的构建插件 | README | | @astryxdesign/theme-* | 七个现成、完全可定制的主题（neutral、butter、chocolate、matcha、stone、gothic、y2k） | README |
@astryxdesign/lab（实验性组件）和 @astryxdesign/vega（Vega/Vega-Lite 图表包装器）在内部用于 Storybook 和沙盒；尚未发布到 npm。
原则
以下是 Astryx 对其构建者做出的承诺：
- 引导而非强制。 组件提供能力，而非与你对抗的护栏。设计观点存在于文档和示例中——如果你传递一个值，组件就会渲染它。
- 强大且文档化的约定。 每个组件都遵循相同的命名、属性和组合规则，并且每个组件都有详尽的文档——因此一旦你学会几个，其余的就会感到熟悉，无论是人类还是 AI 都能预测一个陌生组件的行为。
- 为人类和 AI 提供同一系统。 API、约定、文档和 CLI 协同设计，使得人类和 AI 助手以相同的方式构建。每一个让 Astryx 对 AI 更友好的改动，也让它对人类更友好。
- 通过度量赢得信任。 我们通过测试来验证约定，而非断言它们；我们灵活对待测试结果，并在新情况证明约定有误时重新审视它们。
架构
基础
构建视觉协调且无障碍界面的基础模块：排版、色彩、布局和无障碍性。
组件
150 多个可复用的 UI 构建块库，完全支持 TypeScript。
模式
经过实战检验的设计解决方案，适用于常见交互和工作流程：表格页面、详情页面布局、表单向导、导航模式、数据录入流程。
项目结构
| 目录 | 用途 | |---|---| | apps/ | 示例应用、文档站点和 Storybook | | packages/ | 已发布的包：core、cli、build、themes | | internal/ | 内部工具：测试工具、eslint 插件、vibe 测试 |
贡献
我们欢迎贡献！完整指南请参见 CONTRIBUTING.md。
贡献者快速入门：本仓库通过 Corepack 使用 pnpm 10。启用一次后，正确的 pnpm 版本会自动安装：
corepack enable
pnpm install许可证
MIT