22,088
Stars
0
Forks
0
Watchers
0
Open Issues
未知
许可证
TypeScript
语言
创建时间
最近更新
项目能做什么
一个完全可自定义的开源设计系统，基于 React 19 和 StyleX 构建，专为人机协同开发打造。
来源：AI 基于仓库事实生成
· 内容以仓库实际 README 为准
使用说明 查看原始 README 原仓库文档
项目简介
Astryx 是由 Meta 开源的设计系统，目前处于 Beta 阶段。它在 Meta 内部历经 8 年打磨，支持了超过 13,000 个内部应用。该项目基于 React 19+ 与 StyleX 构建，提供了一套高度可定制、开箱即用的 UI 解决方案，不仅适合人类工程师使用，还专为 AI 编码助手（Agents）协同开发进行了深度优化。
核心功能
- 丰富的组件库与模板：提供 150+ 个无障碍（accessible）组件、开箱即用的模板和开箱即用的暗黑模式。
- 开放内部结构（Open Internals）：组件设计支持多层次组合，底层积木直接导出；支持通过 swizzle 功能直接将组件完整源码弹出（eject）到项目中自由修改。
- 无样式绑定（No styling lock-in）：组件样式底层使用 StyleX 编写，但对使用者完全透明。可直接通过
className配合 Tailwind、CSS modules 或原生 CSS 进行覆盖。 - 无需二次封装的主题定制：主题基于 CSS 自定义属性（CSS custom property），设计人员无需 fork 源码或包裹组件即可完成品牌化定制。
- 人机协同设计（Agent Ready）：统一的 API、文档和 CLI 工具，方便开发者和 AI 助手基于同一套标准与参考进行代码生成和开发。
适合谁用
- 正在使用 React 19+ 技术栈的前端开发者；
- 需要在开发流中接入 AI 编码助手（如各类 Coding Agents）协同生成 UI 的团队；
- 需要高可定制性、避免被特定 CSS 方案绑定的企业或个人项目。
安装步骤
环境依赖：Astryx 依赖 React 19 或更高版本（
react与react-dom是@astryxdesign/core的 peer dependencies）。
1. 项目本地安装
安装 Astryx 核心库、基础主题以及相关的 peer dependencies：
# npm
npm install @astryxdesign/core @astryxdesign/theme-neutral @stylexjs/stylex
npm install -D @astryxdesign/cli
# pnpm
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
2. 全局安装 CLI（可选推荐）
全局安装后可在任意目录使用 astryx 命令，同时便于全局 AI 助手识别：
npm i -g @astryxdesign/cli
(官方建议同时在项目本地和全局进行安装)
配置说明
1. 配置 CLI 快捷脚本
为了避免路径错误（特别是 AI 助手或新成员直接调用时），建议在 package.json 中添加如下脚本：
"scripts": {
"astryx": "node node_modules/@astryxdesign/cli/clients/cli/bin/astryx.mjs"
}
添加后可通过如下命令列出组件：
npm run astryx -- component --list
2. 引入样式与主题提供者
最简配置只需引入少量 CSS 并包裹主题 Provider，无需额外的构建插件、PostCSS 或 Babel 配置。（关于 Next.js、Tailwind、Vite 和 CDN 的具体接入细节，README 原文未详细展开，请参考原仓库的 @astryxdesign/core 说明文档）。
常见问题
- 全局安装与项目安装的区别？
可通过运行astryx docs global/project-global-or-both查看两者的对比，或运行astryx docs global了解全局模式的具体运作方式。 - 其他框架（Next.js / Vite / Tailwind）接入及完整使用示例：
此部分原文未说明完整代码，请查看原仓库 packages/core/README.md。
原始 README 摘录（英文原文，节选前 3000 字符）
<!-- SYNC CONTRACT: Architecture changes require documentation updates. --> <div align="center"> <img src="https://lookaside.facebook.com/assets/astryx/Astryx-Banner.png" alt="Astryx" width="100%" /> # Astryx An open source design system that's fully customizable and built for how we build now: <br/> by people and the agents working alongside them. **Currently in Beta** · Built on [React 19+](https://react.dev) and [StyleX](https://stylexjs.com) [](https://www.npmjs.com/package/@astryxdesign/core) [](LICENSE) [](https://github.com/meta/astryx/wiki/Contributing) [](https://astryx.atmeta.com) [](https://astryx.atmeta.com/storybook/) [](https://astryx.atmeta.com/sandbox/) **[Docs](https://astryx.atmeta.com)** · **[Storybook](https://astryx.atmeta.com/storybook/)** · **[Sandbox](https://astryx.atmeta.com/sandbox/)** · **[Contributing](https://github.com/meta/astryx/wiki/Contributing)** · **[Discord](https://discord.com/invite/XnsUcFykEP)** </div> ## Overview Astryx is an open source design system that grew inside Meta over the last eight years, where it became the most-used and largest design system in the company — powering 13,000+ apps and shaped by the engineers, designers, and product teams who depend on it every day. It ships 150+ accessible components, brand-level theming, dark mode, ready-to-ship templates, and a CLI as one cohesive system. You import pre-built CSS and use typed React components — no build plugin, no styling library to adopt — and both people and AI assistants build with the same tooling. **What makes Astryx different:** - **Open internals.** Components are built to be composed at any level, not locked behind a closed top-level API. The building blocks you'd reach for are exported directly, and when you need to go deeper, swizzle ejects a component's full source into your project to own. - **No styling lock-in.** Astryx authors its styles with StyleX, but that's invisible to consumers. Override with `className` using Tailwind, CSS modules, or plain CSS — whatever your project already uses. - **Customize without wrapping.** A theme is a set of CSS custom property overrides, so a designer can make Astryx unmistakably theirs without forking or wrapping component source. - **Built for people and agents.** The API, docs, and CLI are designed together so a person and an AI assistant build the same way, from the same reference. ## Getting Started Astryx requires **React 19** or later (`react` and `react-dom` are peer dependen阅读完整原文
商业机会分析 AI 生成
Astryx 高级商业模板与 Admin Dashboard 套件
| 产品构想 | 基于 React 19 和 Astryx 打造高完成度的 SaaS 仪表盘、AI 对话工作台和电商后台模板，并针对 AI Coding 工具做深度 prompt/schema 优化。 |
| 核心功能 | 开箱即用的响应式管理后台页面、完整暗黑模式与主题预设、适配主流 AI Agent 的页面结构生成 Prompt 规范、多种数据图表集成 |
| 目标用户 | 独立开发者、初创公司全栈工程师、外包交付团队 |
| 难度/周期 | 低至中 · 2 - 4 周 · 成本：开发机器与静态演示站部署成本（极低） |
| 收费模式 | 一次性买断制授权（Gumroad/Lemonsqueezy）、单项目或团队商业授权模式 |
| 竞争风险 | 开源社区内短期可能出现竞品或免费替代模板，需要依赖高质量设计与持续更新保持竞争力 |
| 依据 | 已验证事实 |
可视化主题生成与 Figma-to-Astryx Token 转换工具
| 产品构想 | 针对 Astryx 的 CSS 自定义属性和 StyleX 架构，提供所见即所得的可视化主题设计器，支持将 Figma Tokens 导出为 Astryx 兼容的主题包及 CLI 导入配置。 |
| 核心功能 | 可视化颜色/排版/间距调节、即时组件预览、Figma 变量一键同步为 Astryx Theme、导出标准 npm 兼容包 |
| 目标用户 | UI/UX 设计师、前端架构师、设计系统维护团队 |
| 难度/周期 | 中等 · 4 - 8 周 · 成本：前端托管服务及轻量后端服务器（低） |
| 收费模式 | 免费基础功能 + 高级导出/团队协作按月订阅（Freemium SaaS） |
| 竞争风险 | 官方未来可能推出官方级 Figma 插件或图形化主题工具导致需求被分流（推测） |
| 依据 | 数据支持的判断 |
面向 Coding Agent 的 Astryx 增强提示词与 MCP 服务
| 产品构想 | 构建与 Cursor / Windsurf / Claude 深度集成的 Model Context Protocol (MCP) 服务或知识库，专门为 AI 提供 150+ Astryx 组件的最佳实践、API 定义、代码示例检索与即时 swizzle 生成能力。 |
| 核心功能 | Astryx 专属 MCP 服务器、组件上下文注入、精准组件推荐与自动拼装 prompt、CLI 语法自动校验 |
| 目标用户 | 深度使用 AI 编程工具的前端工程师、AI 原生开发团队 |
| 难度/周期 | 中等 · 2 - 4 周 · 成本：轻量云函数/API 运行费用、测试用 LLM Token 费用 |
| 收费模式 | 付费订阅专业版 MCP/知识库 API、按团队席位收费的 VSCode 插件 |
| 竞争风险 | Astryx 自身定位已包含 Agent-ready，官方文档和 CLI 若持续演进可能会压缩第三方工具空间 |
| 依据 | AI推测 |
AI 基于仓库公开数据分析生成，含推测成分，不构成收益承诺。
报告会保存到 个人中心
竞品与相似项目 GitHub Search 真实检索
| 项目 | 中文简介 | Stars | 语言 |
|---|---|---|---|
| 41rw4lk/Astryx | 带有本地 Web UI 的高性能 Coomer 下载工具。 | 53 | C# |
| rafael-fu2025/minimax-agent | 基于 Astryx 设计系统的流式 Agent 对话机器人，对接 MiniMax API。 | 29 | TypeScript |
| DevRohit06/astryx-svelte | Meta 开源设计系统 Astryx 的非官方 Svelte 5 移植版本。 | 24 | TypeScript |
| devrock07/astryx | 中文介绍暂未生成 | 16 | JavaScript |
| JayashBhandary/astryx_ui | 移植至 Flutter 的 Meta Astryx 设计系统组件库，包含 7 种主题。 | 10 | Dart |
| thedjpetersen/astryx-templates | 中文介绍暂未生成 | 9 | TypeScript |
以上为通过 GitHub 官方 Search API 检索的相似项目，功能差异与优劣势需进一步人工确认，配置 AI 后可生成对比分析。
项目优势与风险
| 技术成熟度 | 创建于 ，最近推送 ，发布过 45 个 Release |
| 社区活跃 | Star 22,088 / Fork 0 / Issue 0（数据支持，可自行核实） |
| 许可证 | 未检测到（需人工确认） |
| 主要风险 | 上游项目方向可能变化；同赛道竞争者较多（见竞品表）；热度与需求不完全等价 |
安装与使用
快速开始（以仓库 README 为准）
git clone https://github.com/meta/astryx.git cd astryx # 请阅读仓库 README 获取确切安装步骤（依赖、配置、启动命令）
术语说明：Docker＝应用容器（把程序和依赖打包运行）；API Key＝调用外部服务的密钥；Git Clone＝把仓库代码下载到本地。常见错误：API Key 未配置 / 端口占用 / 数据库连接失败，多数项目在 README 的 Troubleshooting 章节有说明。