facebook / astryx

查看原文 / View Original 编辑 / Edit

Facebook / Astryx

Astryx 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 一个开源设计系统，具有高度可定制性，专为当下的开发模式而构建——既服务于人类开发者，也服务于与他们协作的 AI 智能体。目前处于 Beta 阶段，基于 React 和 StyleX 构建。

Overview 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.

概述 Astryx 是一个在 Meta 内部成长了八年的开源设计系统。它已成为该公司内部使用最广泛、规模最大的设计系统，支撑着超过 13,000 个应用程序，并由每天依赖它的工程师、设计师和产品团队共同塑造。它作为一个统一的系统，提供了 150 多个无障碍组件、品牌级主题、深色模式、开箱即用的模板以及 CLI 工具。你只需导入预构建的 CSS 并使用类型化的 React 组件，无需引入构建插件或特定的样式库，且人类开发者与 AI 助手可以使用相同的工具进行构建。

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.

Astryx 的独特之处：

  • 内部结构开放。 组件被设计为可在任何层级进行组合，而非锁定在封闭的顶层 API 之后。你所需要的构建块会被直接导出；当你需要深入定制时，可以使用 swizzle 将组件的完整源代码提取到你的项目中进行管理。
  • 无样式锁定。 Astryx 使用 StyleX 编写样式，但这对使用者是透明的。你可以使用 Tailwind、CSS Modules 或原生 CSS 通过 className 进行覆盖——无论你的项目当前使用什么方案。
  • 无需封装即可定制。 主题是一组 CSS 自定义属性的覆盖，因此设计师无需分叉（fork）或封装组件源码，即可打造出具有独特品牌风格的 Astryx。
  • 为人与 AI 智能体而生。 API、文档和 CLI 经过协同设计，确保人类开发者和 AI 助手能够以相同的方式、参考相同的文档进行构建。

Getting Started 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

快速开始 安装 Astryx 及主题： （代码见上方）

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).

最简单的设置只需导入几个 CSS 文件并添加一个主题提供程序（Theme Provider）——无需构建插件，也无需 PostCSS 或 Babel 配置。请参阅 @astryxdesign/core 的 README 获取完整指南（涵盖 Next.js、Tailwind、Vite 和 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.

为了确保 CLI 访问的稳定性，请在 package.json 中添加以下脚本： （代码见上方） 然后通过 npm run astryx -- component --list 来使用它。这可以避免 AI 助手或新开发者直接调用 CLI 时可能出现的路径错误。

Packages

  • @astryxdesign/core: Components, theme system, and utilities
  • @astryxdesign/cli: CLI tooling: component docs, templates, scaffolding, themes, and codemods
  • @astryxdesign/build: Build plugins for StyleX source builds
  • @astryxdesign/theme-*: Seven ready-made, fully customizable themes (neutral, butter, chocolate, matcha, stone, gothic, y2k)
  • @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.

包说明

  • @astryxdesign/core: 组件、主题系统和实用工具
  • @astryxdesign/cli: CLI 工具：组件文档、模板、脚手架、主题和代码转换（codemods）
  • @astryxdesign/build: 用于 StyleX 源码构建的插件
  • @astryxdesign/theme-*: 七种现成且完全可定制的主题（neutral, butter, chocolate, matcha, stone, gothic, y2k）
  • @astryxdesign/lab: （实验性组件）和 @astryxdesign/vega（Vega/Vega-Lite 图表封装）目前仅在内部用于 Storybook 和沙盒环境，尚未发布到 npm。

Principles 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.

设计原则 这是 Astryx 对开发者的承诺：

  • 引导优于强制。 组件提供的是能力，而不是束缚你的护栏。设计理念体现在文档和示例中——如果你传入一个值，组件就会渲染它。
  • 强大且文档化的规范。 每个组件都遵循相同的命名、属性和组合规则，并且都有详尽的文档记录。因此，一旦你掌握了几个组件，其他的也会感到熟悉，人类和 AI 都能预测陌生组件的行为。
  • 人机统一的系统。 API、规范、文档和 CLI 经过协同设计，确保人类和 AI 助手以相同的方式构建。每一个让 Astryx 对 AI 更友好的改进，同时也让它对人类开发者更友好。
  • 基于测量验证。 我们通过测试来验证规范，而不是武断地设定它们；我们对结果保持开放态度，并在新情况证明其不适用时进行重新审视。

Architecture

  • Foundations: The building blocks for visually cohesive and accessible interfaces: typography, color, layout, and accessibility.
  • Components: A library of 150+ reusable UI building blocks with full TypeScript support.
  • Patterns: Battle-tested design solutions for common interactions and workflows: table pages, detail page layouts, form wizards, navigation patterns, data entry flows.

架构

  • 基础（Foundations）: 构建视觉统一且无障碍界面的基石：排版、颜色、布局和无障碍性。
  • 组件（Components）: 包含 150 多个可复用 UI 构建块的库，提供完整的 TypeScript 支持。
  • 模式（Patterns）: 经过实战检验的常见交互和工作流设计方案：表格页面、详情页布局、表单向导、导航模式、数据录入流程。

Project Structure

  • apps/: Example apps, the docsite, and Storybook
  • packages/: Published packages: core, cli, build, themes
  • internal/: Internal tooling: test utilities, eslint plugin, vibe tests

项目结构

  • apps/: 示例应用、文档网站和 Storybook
  • packages/: 已发布的包：core, cli, build, themes
  • internal/: 内部工具：测试实用程序、eslint 插件、vibe 测试

Contributing 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 then pnpm install.

贡献指南 我们欢迎贡献！请参阅 CONTRIBUTING.md 获取完整指南。贡献者快速入门：本仓库通过 Corepack 使用 pnpm 10。只需启用一次，正确的 pnpm 版本就会自动安装：运行 corepack enable 然后执行 pnpm install。

License MIT

← 返回新闻列表 / Back to news list