企业官网建设流程全解析

Astryx安装指南：npm、pnpm、yarn、bun四家包管理器一次讲清

【免费下载链接】astryxAn open source design system that's fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryx

Astryx 是一个完全可定制、面向"人类 + AI 智能体"的开源设计系统（Astryx 安装）：内置 150+ 无障碍 React 组件、品牌级主题与配套 CLI。本文用最短篇幅讲清 Astryx 安装全流程——npm、pnpm、yarn、bun 四种包管理器命令一次对齐，装完 3 步即可跑起来。

一、30 秒认识 Astryx：为什么要装它

Astryx 脱胎于 Meta 内部八年打磨的设计系统，曾驱动 13,000+ 应用。它把组件库、主题系统、页面模板和 CLI 打包成一套完整体系：

• 150+ 无障碍组件：Button、Dialog、Table、Chat……覆盖常见交互场景
• 7 套开箱主题：neutral、butter、chocolate、matcha、stone、gothic、y2k，源码位于packages/themes/
• 无样式锁定：内部用 StyleX 写样式，但你仍可用 Tailwind、CSS Modules 或普通 CSS 覆盖
• 人机同构：人与 AI 智能体使用同一套文档和 CLI

二、安装前准备：只需两样东西

Astryx 安装需要拉取 4 个包，缺一不可：

三、四家包管理器安装命令，一次讲清

npm 安装步骤（默认选择）

npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex npm install -D @astryxdesign/cli

pnpm 安装步骤（官方仓库同款）

Astryx 官方仓库自身就用 pnpm 11 管理（见CONTRIBUTING.md），可视为最顺滑的路径：

pnpm add @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex pnpm add -D @astryxdesign/cli

yarn 安装步骤

yarn add @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex yarn add -D @astryxdesign/cli

bun 安装步骤（⚠️ dev 参数是小写-d）

bun 的 dev 依赖参数是小写-d，写成大写-D会报错，这是四家中唯一需要特别注意的地方：

bun add @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex bun add -d @astryxdesign/cli

💡 换主题只需把@astryxdesign/theme-neutral换成对应主题包（如@astryxdesign/theme-matcha），其余命令完全一致。

四、装完不生效？用 30 秒验证 CLI

包管理器装完后，先确认 CLI 可用。四家的"临时执行"命令各不相同：

• npm 项目：npx @astryxdesign/cli component --list
• pnpm 项目：pnpm dlx @astryxdesign/cli component --list
• yarn 项目：yarn dlx @astryxdesign/cli component --list
• bun 项目：bunx @astryxdesign/cli component --list

能打印出组件列表即说明安装成功 ✅。若想长期稳定调用（尤其让 AI 助手调用时不踩路径坑），官方建议在package.json里加一个脚本：

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

之后用npm run astryx -- component --list即可，该写法见根目录README.md的 Getting Started 一节。

五、安装成功后的最小配置（3 步跑起来）

Astryx 自带预构建 CSS，不需要任何构建插件。以 Next.js / Vite 为例：

1. 引入 3 份 CSS（顺序不能错）：在globals.css中依次引入@astryxdesign/core/reset.css→@astryxdesign/core/astryx.css→@astryxdesign/theme-neutral/theme.css
2. 包一层主题 Provider：<Theme theme={neutralTheme}>包裹应用
3. 开写组件：import {Button} from '@astryxdesign/core/Button'

Next.js、Vite、Tailwind、CDN 各场景的完整配置，见packages/core/README.md的 Quick Start 章节；CLI 全部命令说明见packages/cli/README.md。

六、安装常见问题速查

到这里，Astryx 安装就全部完成了：四家包管理器任选其一，4 个包、3 份 CSS、1 个 Provider，即可在 150+ 组件上开始搭建界面。想继续深入，可看packages/core/（组件核心源码）与packages/themes/（各主题实现）。

【免费下载链接】astryxAn open source design system that's fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryx