Astryx

项目简介

Astryx 是开源设计系统，基于 React 19+ 和 StyleX，过去八年在 Meta 内部成长，已支持 13,000+ 应用。它把可访问的 React 组件、主题、模板和 CLI 工具整合在一起，让人员与 AI 助手使用同一套系统构建界面。

核心功能

• 150+ 可访问且可主题化的 React 组件，支持 TypeScript 和暗色模式。
• 主题以 CSS 自定义属性覆盖实现，并提供七套现成主题：neutral、butter、chocolate、matcha、stone、gothic、y2k。
• 不锁定样式方案：可用 className 配合 Tailwind、CSS modules 或普通 CSS 覆盖样式。
• 开放内部实现，并支持通过 swizzle 将组件完整源码弹出到项目中掌控。
• CLI 与 MCP 支持脚手架项目、浏览模板、生成主题和获取面向智能体的文档。
• 提供可用于常见页面的生产就绪模板，填入项目内容即可使用。

适用场景

• 使用一致的组件库构建可访问的 React 应用界面。
• 在不 fork 或包装组件源码的情况下创建品牌专属主题。
• 借助模板与模式搭建表格页、详情页布局、表单向导、导航和数据录入等常见页面。
• 支持人员与 AI 助手基于同一组件参考和 CLI 协作构建。

快速开始

• 安装 @astryxdesign/core、@astryxdesign/theme-neutral 与 @stylexjs/stylex，并将 @astryxdesign/cli 安装为开发依赖。
• 最简单配置只需少量 CSS 导入和主题 Provider，不需要构建插件、PostCSS 或 Babel 配置。
• 可选全局安装 @astryxdesign/cli，让 astryx 命令可在任意文件夹使用，并让编码智能体识别 Astryx。
• 为可靠调用 CLI，可在 package.json 中添加运行本地 CLI 的脚本。

部署与要求

• 需要 React 19 或更高版本；react 与 react-dom 是 @astryxdesign/core 的 peer dependencies。
• 最简单配置使用 CSS 导入和主题 Provider，不需要构建插件、PostCSS 或 Babel 配置。

采用前须知

• 许可证：MIT。在使用、修改或分发项目前，请确认其具体条款。