facebook/astryx

来源：https://github.com/facebook/astryx

Astryx

一个完全可定制的开源设计系统，专为当下人机协作的构建方式而生——无论是开发人员还是与其并肩工作的智能体。

当前处于 Beta 阶段 · 基于 React (https://react.dev) 和 StyleX (https://stylexjs.com) 构建

概述

Astryx 是一个开源设计系统，在过去八年里诞生于 Meta 内部，并发展成为公司内部使用最广泛、规模最大的设计系统——支撑着 13,000 多个应用，由每天依赖它的工程师、设计师和产品团队共同塑造。

它提供了 150 多个无障碍组件、品牌级主题定制、暗黑模式、即用型模板以及一个 CLI，作为一套统一的系统。你只需导入预构建的 CSS 并使用带有类型的 React 组件——无需构建插件，无需适配样式库——无论是人还是 AI 助手，都使用同样的工具进行构建。

Astryx 的不同之处：

• 内部结构开放。 组件可以在任何层级进行组合，不受限于封闭的顶层 API。你所需的构建块会被直接导出；如需深入定制，可通过 swizzle 将组件的完整源码弹出到你的项目中由你掌控。
• 无样式锁定。 Astryx 使用 StyleX 编写样式，但对使用者来说这是透明的。你可以使用 Tailwind、CSS modules 或纯 CSS 通过 className 进行覆盖——只要你项目已使用的即可。
• 无需包裹即可定制。 主题是一组 CSS 自定义属性的覆写值，设计师无需分支或包裹组件源码，就能让 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 导入加上一个主题 provider——无需构建插件，无需 PostCSS 或 Babel 配置。请参阅 @astryxdesign/core README 获取完整指南（Next.js、Tailwind、Vite 和 CDN）。

为了可靠的 CLI 访问，在 package.json 中添加一个脚本：

"scripts": {
  "astryx": "node node_modules/@astryxdesign/cli/bin/astryx.mjs"
}

然后使用 npm run astryx -- component --list。这样可以避免当 AI 助手或新开发者直接调用 CLI 时出现路径错误。

包

@astryxdesign/lab（实验性组件）和 @astryxdesign/vega（Vega/Vega-Lite 图表封装）在内部用于 Storybook 和沙盒；它们尚未发布到 npm。

原则

以下是 Astryx 对基于它构建的人们做出的承诺。

• 引导而非强制。 组件为你提供能力，而不是与你对抗的护栏。设计见解体现在文档和示例中——如果你传递了值，组件就会渲染它。
• 强且有文档的约定。 每个组件都遵循相同的命名、属性和组合规则，并且每个组件都有详尽的文档——所以一旦你学会了几个，剩下的就会感觉很熟悉，无论是人还是 AI 都能预测不熟悉的组件的行为。
• 为人类和 AI 设计的统一系统。 API、约定、文档和 CLI 统一设计，使得人和 AI 助手采用相同的构建方式。每一个让 Astryx 对 AI 更容易的改动，也让对人更容易。
• 通过度量赢得信任。 我们通过测试来验证约定，而不是断言它们；对结果保持开放，当新情况证明它们错误时，我们会重新审视。

架构

基础

视觉上一致且无障碍界面的构建块：排版、色彩、布局和无障碍性。

组件

一个包含 150 多个可复用 UI 构建块的库，支持完整的 TypeScript。

模式

经过实战验证的常见交互和工作流设计解决方案：表格页面、详情页面布局、表单向导、导航模式、数据录入流程。

项目结构

贡献

欢迎贡献！请参阅 CONTRIBUTING.md 获取完整指南。

贡献者的快速起步：本仓库使用 pnpm 10（通过 Corepack (https://nodejs.org/api/corepack.html) 管理）。启用一次后，正确的 pnpm 版本会自动安装：

corepack enable
pnpm install

许可证

MIT