Astryx Design System

Astryx Design System 是一款开源设计系统，提供可复用组件、主题、模板、文档和 CLI，支持高度自定义，适合 agent 辅助快速搭建 UI。

AI网站设计

AI设计助手

AI开发者工具

访问网站

什么是 Astryx？

Astryx 是一款开源设计系统，用于构建用户界面，提供共享组件库、主题以及配套的开发工具。该站点将其描述为完全可定制且可供 agent 使用，并提供面向人工开发者和 AI 编码工具的设置指导。

入门流程展示了一条实用路径：安装核心包、主题和 CLI；运行 `npx astryx init`；然后从特定入口导入组件，并通过全局 CSS 应用主题。该系统还包含示例应用以及用于发现组件、模板和文档的 CLI。

主要能力

广泛的组件库

该库按多个组件类别组织，包括按钮、表单、导航、覆盖层、表格、布局、反馈和数据展示，并为每种变体、状态和模式提供可直接复制的示例。

按组件划分的入口

组件从 `@astryxdesign/core` 包安装，并通过按组件划分的子路径导入，这使导入更明确，也有助于减小打包体积。

基于主题的 token 系统

入门指南展示了主题包和全局 CSS 导入，主题通过 CSS 自定义属性提供颜色、间距、圆角和排版等设计 token。

多种样式工作流

Astryx 支持多种样式方案，从纯 CSS 和 className 到 Tailwind 和 CSS-in-JS，并记录了使用 `xstyle` 进行样式覆盖的 StyleX 路径。

用于文档与发现的 CLI

CLI 提供了列出组件、查看文档主题以及检查模板和 token 参考的命令，使项目中的探索和规范化更容易。

参考应用配置

提供了 Next.js 和 Vite 的示例应用，包括结合主题 CSS、StyleX、Tailwind 或源代码导入的设置。

Astryx 的常见用法

使用可复用组件构建产品 UI
当你需要一套现成的 UI 原语和产品界面模式，并为你添加的每个组件提供明确导入时，可以使用核心库。
应用统一的视觉系统
当你需要在整个应用中应用一致的视觉语言，并控制颜色、间距、圆角和排版等 token 值时，可以使用主题包和全局 CSS 导入。
标准化设置与文档
当你需要为团队引导上手、查看可用组件，或从命令行发现模板和 token 参考时，可以使用 CLI 和生成的文档。
基于参考应用启动实现
当你想要一个 Next.js、Vite 或 StyleX、Tailwind 等特定样式设置的可运行参考时，可以把示例应用作为起点。
查看组件行为和用法
当你需要在接入项目之前，为特定变体、状态和模式查看可直接复制的示例时，可以使用可在浏览器访问的组件目录。

Pros and Cons

Pros

开源设计系统，设置路径清晰。
在一个包生态中涵盖组件、主题、模板、文档和 CLI。
主题以 CSS 自定义属性提供设计 token，使全局主题化更直接。
支持多种样式方法，包括 StyleX。
提供 Next.js 和 Vite 的示例应用，帮助团队从可运行的参考开始。

Cons

所抓取页面仅显示其为开源，但未展示价格、套餐或许可详细信息。
收集到的证据中的文档覆盖并不完整，因此某些实现细节仅通过示例展示，而不是完整的端到端指南。

FAQ

Astryx 是用来做什么的？

Astryx 被定位为一款开源设计系统，包含组件、主题、模板、文档和 CLI。入门流程展示了 npm 安装以及用于 agent 文档和入门模板的设置命令。

如何开始使用 Astryx？

源内容显示需要安装 @astryxdesign/core、如 @astryxdesign/theme-neutral 之类的主题包，以及 @astryxdesign/cli，随后运行 `npx astryx init` 来设置 agent 文档并选择入门模板。

Astryx 组件如何导入？

组件通过按类别划分的子路径入口导入，例如 `@astryxdesign/core/Button` 或 `@astryxdesign/core/Layout`，这样有助于保持包体积更小，并使用法更明确。

Astryx 可以定制以匹配现有设计系统吗？

Astryx 支持多种样式处理方式，包括原生 CSS、className、Tailwind、CSS-in-JS，以及通过 `xstyle` 与 StyleX 的更深度集成。

Astryx 是否提供 CLI 或示例应用？

网站突出展示了一个用于组件、token、模板和文档的 CLI，而入门指南则指向了 Next.js 和 Vite 的示例应用。这些是源内容中展示得最清晰的实现路径。

Quick Facts

类别: 设计系统
主要用途: 使用主题和配套文档构建界面组件
安装方式: npm 包加 `npx astryx init`
样式: CSS、className、Tailwind、CSS-in-JS、StyleX
包命名空间: @astryxdesign/core 及相关包
源域名: astryx.atmeta.com