尧图网页设计 
Astryx安装指南npm、pnpm、yarn、bun四家包管理器一次讲清【免费下载链接】astryxAn open source design system thats fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryxAstryx 是一个完全可定制、面向人类 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二、安装前准备只需两样东西准备项要求说明React 版本React 19react与react-dom是 peer 依赖低于 19 会装不上包管理器npm / pnpm / yarn / bun 任选其一四种装法本文全部给出Astryx 安装需要拉取 4 个包缺一不可包名角色astryxdesign/core组件、主题系统与工具函数核心包astryxdesign/theme-neutral主题可换成其余 6 套stylexjs/stylex运行时 peer 依赖astryxdesign/cli开发工具dev 依赖查文档、生成模板三、四家包管理器安装命令一次讲清npm 安装步骤默认选择npm install astryxdesign/core astryxdesign/theme-neutral stylexjs/stylex npm install -D astryxdesign/clipnpm 安装步骤官方仓库同款Astryx 官方仓库自身就用 pnpm 11 管理见CONTRIBUTING.md可视为最顺滑的路径pnpm add astryxdesign/core astryxdesign/theme-neutral stylexjs/stylex pnpm add -D astryxdesign/cliyarn 安装步骤yarn add astryxdesign/core astryxdesign/theme-neutral stylexjs/stylex yarn add -D astryxdesign/clibun 安装步骤⚠️ dev 参数是小写-dbun 的 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 --listpnpm 项目pnpm dlx astryxdesign/cli component --listyarn 项目yarn dlx astryxdesign/cli component --listbun 项目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 为例引入 3 份 CSS顺序不能错在globals.css中依次引入astryxdesign/core/reset.css→astryxdesign/core/astryx.css→astryxdesign/theme-neutral/theme.css包一层主题 ProviderTheme theme{neutralTheme}包裹应用开写组件import {Button} from astryxdesign/core/ButtonNext.js、Vite、Tailwind、CDN 各场景的完整配置见packages/core/README.md的 Quick Start 章节CLI 全部命令说明见packages/cli/README.md。六、安装常见问题速查问题原因与解法安装报 peer 依赖冲突检查react是否为 19Astryx 暂不支持 React 18CLI 提示找不到命令使用npx astryxdesign/cli等完整作用域名或按第四节加脚本页面样式没生效检查 3 份 CSS 引入顺序CDN 场景还需在html上加data-astryx-theme想参与 Astryx 源码开发仓库要求 Node 22 与 pnpm 11corepack enable pnpm install到这里Astryx 安装就全部完成了四家包管理器任选其一4 个包、3 份 CSS、1 个 Provider即可在 150 组件上开始搭建界面。想继续深入可看packages/core/组件核心源码与packages/themes/各主题实现。【免费下载链接】astryxAn open source design system thats fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryx创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Astryx安装指南：npm、pnpm、yarn、bun四家包管理器一次讲清
Astryx安装指南npm、pnpm、yarn、bun四家包管理器一次讲清【免费下载链接】astryxAn open source design system thats fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryxAstryx 是一个完全可定制、面向人类 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二、安装前准备只需两样东西准备项要求说明React 版本React 19react与react-dom是 peer 依赖低于 19 会装不上包管理器npm / pnpm / yarn / bun 任选其一四种装法本文全部给出Astryx 安装需要拉取 4 个包缺一不可包名角色astryxdesign/core组件、主题系统与工具函数核心包astryxdesign/theme-neutral主题可换成其余 6 套stylexjs/stylex运行时 peer 依赖astryxdesign/cli开发工具dev 依赖查文档、生成模板三、四家包管理器安装命令一次讲清npm 安装步骤默认选择npm install astryxdesign/core astryxdesign/theme-neutral stylexjs/stylex npm install -D astryxdesign/clipnpm 安装步骤官方仓库同款Astryx 官方仓库自身就用 pnpm 11 管理见CONTRIBUTING.md可视为最顺滑的路径pnpm add astryxdesign/core astryxdesign/theme-neutral stylexjs/stylex pnpm add -D astryxdesign/cliyarn 安装步骤yarn add astryxdesign/core astryxdesign/theme-neutral stylexjs/stylex yarn add -D astryxdesign/clibun 安装步骤⚠️ dev 参数是小写-dbun 的 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 --listpnpm 项目pnpm dlx astryxdesign/cli component --listyarn 项目yarn dlx astryxdesign/cli component --listbun 项目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 为例引入 3 份 CSS顺序不能错在globals.css中依次引入astryxdesign/core/reset.css→astryxdesign/core/astryx.css→astryxdesign/theme-neutral/theme.css包一层主题 ProviderTheme theme{neutralTheme}包裹应用开写组件import {Button} from astryxdesign/core/ButtonNext.js、Vite、Tailwind、CDN 各场景的完整配置见packages/core/README.md的 Quick Start 章节CLI 全部命令说明见packages/cli/README.md。六、安装常见问题速查问题原因与解法安装报 peer 依赖冲突检查react是否为 19Astryx 暂不支持 React 18CLI 提示找不到命令使用npx astryxdesign/cli等完整作用域名或按第四节加脚本页面样式没生效检查 3 份 CSS 引入顺序CDN 场景还需在html上加data-astryx-theme想参与 Astryx 源码开发仓库要求 Node 22 与 pnpm 11corepack enable pnpm install到这里Astryx 安装就全部完成了四家包管理器任选其一4 个包、3 份 CSS、1 个 Provider即可在 150 组件上开始搭建界面。想继续深入可看packages/core/组件核心源码与packages/themes/各主题实现。【免费下载链接】astryxAn open source design system thats fully customizable and agent ready项目地址: https://gitcode.com/GitHub_Trending/as/astryx创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考