SuperAPI AI 工具集

astryx

前端与建站

查看项目

更新于 10-15 21:55

技能介绍

Astryx 是 Meta 的 React 19 设计系统,用于构建可访问、可主题化的界面,内置间距、深色模式和 StyleX 样式。核心包 @astryxdesign/core 提供组件库;配套 StyleX、CLI 和多种预设主题(neutral、butter、chocolate、gothic、matcha、stone、y2k)。

用途:使用 Astryx 组件构建 React UI、用 defineTheme 创建定制主题、通过 xstyle、Tailwind 或 className 设置样式、从 CLI 模板搭建页面、迁移既有 Tailwind/shadcn/Radix 应用、用 CLI 查询组件文档与令牌、连接 MCP 服务器辅助 AI 发现组件、按系统规范校验代码。

安装示例:npm install @astryxdesign/core @stylexjs/stylex @astryxdesign/theme-neutral @astryxdesign/cli,并在全局样式表引入 reset.css、astryx.css 和主题 theme.css。主题 Token 为 CSS 自定义属性,使用 var(--color-*) 语义令牌而非硬编码颜色。布局建议由外向内搭建,用 AppShell、Layout、LayoutPanel 等。

主要能力:组件库、主题系统、StyleX/Tailwind 双支持、CLI(component、docs、template、theme、search、doctor、init 等命令,支持 --json/--dense/--detail)、MCP 服务器、迁移指南、validate.py 校验脚本。

限制:需 React 19;级联层顺序需显式声明;Swizzled 组件需 StyleX 编译器;覆盖 --color-accent 不会重定向 --color-on-accent;Astryx 不加载字体文件,仅设置 font-family。建议用 uv run scripts/validate.py 校验代码。收费与价格信息暂未提供。