Facebook 发布 Astryx：开源设计系统，面向人类与 AI 智能体协同构建

一个开源设计系统，完全可定制，并为我们当前的构建方式而生——由人和与他们协同工作的智能体共同构建。

当前为 Beta 版 · 基于 React 和 StyleX 构建

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

它在一个统一的系统中交付了 150 多个无障碍组件、品牌级主题定制、暗色模式、开箱即用的模板和 CLI 工具。你只需导入预编译的 CSS 并使用类型化的 React 组件——不需要构建插件，也无需采用特定的样式库——无论是人还是 AI 助手，都可以使用相同的工具进行构建。

Astryx 的与众不同之处：

• 内部开放。 组件的设计允许在任意层级进行组合，而不是被封闭的顶层 API 锁定。你需要的基础构件会直接导出；而当需要深入定制时，swizzle 功能会将组件的完整源码弹出到你的项目中，让你完全掌控。
• 无样式锁定。 Astryx 使用 StyleX 编写样式，但对使用者完全透明。你可以使用 Tailwind、CSS modules 或原生 CSS，通过 className 进行覆盖——无论你的项目已经在使用哪种方式。
• 无需包装即可定制。 主题是一组 CSS 自定义属性的覆盖项，因此设计师完全可以将 Astryx 打造成独一无二的风格，而无需 fork 或包装组件源码。
• 为人和智能体而构建。 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 时出现路径错误。

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

以下是 Astryx 向构建者做出的承诺。

• 引导而非强制。 组件给予你能力，而非与你对抗的护栏。设计观点体现在文档和示例中——只要你传入了某个值，组件就会将它渲染出来。
• 强健且文档化的约定。 每个组件都遵循相同的命名、属性和组合规则，而且每个组件都有详尽的文档——因此，掌握了少数几个组件之后，其余的都会感到熟悉，无论是人还是 AI，都能预测一个陌生组件的行为。
• 为人类和 AI 设计的同一套系统。 API、约定、文档和 CLI 被作为一个整体设计，让人和 AI 助手以相同方式构建。每一个让 Astryx 对 AI 更友好的改动，也让它对人更友好。
• 依靠度量来赢得信任。 我们测试约定而不是断言约定，对结果保持开放态度，并在新的情况证明它们错误时重新审视。

用于构建视觉统一且无障碍界面的基础构件：排版、颜色、布局和无障碍。

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

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

我们欢迎贡献！完整指南请见 CONTRIBUTING.md。

贡献者快速上手：本仓库通过 Corepack 使用 pnpm 10。只需启用一次，正确的 pnpm 版本就会自动安装：

corepack enable
pnpm install

MIT

An open source design system that's fully customizable and built for how we build now — by people and the agents working alongside them.

Currently in Beta · Built on React and StyleX

Astryx is an open source design system that grew inside Meta over the last eight years, where it became the most-used and largest design system in the company — powering 13,000+ apps and shaped by the engineers, designers, and product teams who depend on it every day.

It ships 150+ accessible components, brand-level theming, dark mode, ready-to-ship templates, and a CLI as one cohesive system. You import pre-built CSS and use typed React components — no build plugin, no styling library to adopt — and both people and AI assistants build with the same tooling.

What makes Astryx different:

• Open internals. Components are built to be composed at any level, not locked behind a closed top-level API. The building blocks you'd reach for are exported directly, and when you need to go deeper, swizzle ejects a component's full source into your project to own.
• No styling lock-in. Astryx authors its styles with StyleX, but that's invisible to consumers. Override with className using Tailwind, CSS modules, or plain CSS — whatever your project already uses.
• Customize without wrapping. A theme is a set of CSS custom property overrides, so a designer can make Astryx unmistakably theirs without forking or wrapping component source.
• Built for people and agents. The API, docs, and CLI are designed together so a person and an AI assistant build the same way, from the same reference.

Install Astryx and a theme:

# 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

The simplest setup is a few CSS imports plus a theme provider — no build plugin, no PostCSS or Babel config. See the @astryxdesign/core README for the full guide (Next.js, Tailwind, Vite, and CDN).

For reliable CLI access, add a script to your package.json:

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

Then use it as npm run astryx -- component --list. This avoids path errors when AI assistants or new developers invoke the CLI directly.

@astryxdesign/lab (experimental components) and @astryxdesign/vega (Vega/Vega-Lite chart wrapper) are used internally for Storybook and the sandbox; they are not yet published to npm.

These are the promises Astryx makes to the people building on it.

• Guidance over enforcement. Components give you capability rather than guardrails that fight you. Design opinions live in docs and examples — if you pass a value, the component renders it.
• Strong, documented conventions. Every component follows the same naming, prop, and composition rules, and every one is thoroughly documented — so once you've learned a few, the rest feel familiar, and both people and AI can predict how an unfamiliar component behaves.
• One system for humans and AI. The API, conventions, docs, and CLI are designed together so people and AI assistants build the same way. Every change that made Astryx easier for AI made it easier for people too.
• Earned by measurement. We test conventions rather than assert them, hold the results loosely, and revisit them when a new situation proves them wrong.

The building blocks for visually cohesive and accessible interfaces: typography, color, layout, and accessibility.

A library of 150+ reusable UI building blocks with full TypeScript support.

Battle-tested design solutions for common interactions and workflows: table pages, detail page layouts, form wizards, navigation patterns, data entry flows.

We welcome contributions! See CONTRIBUTING.md for the full guide.

Quick start for contributors: this repo uses pnpm 10 via Corepack. Enable it once and the right pnpm version installs automatically:

corepack enable
pnpm install

MIT