Astryx 是 Facebook（Meta）内部孵化并开源的一套现代化设计系统，它不是简单的组件库，而是一套真正“可协作、可定制、可演进”的 UI 基建。它专为当下人机协同的开发范式而生——既服务人类工程师与设计师的精细控制需求，也天然适配 AI 编程助手（如 Copilot、Cursor、Claude Code）的语义理解与代码生成能力。当你需要一套不绑架技术栈、不牺牲可维护性、又能快速落地高质量产品的设计系统时，Astryx 提供了一种更自由、更透明、更可持续的答案。
核心功能
- 150+ 开箱即用的无障碍组件：覆盖按钮、表单、卡片、导航、数据表格等全场景 UI 元素，全部通过 WCAG 2.1 AA 标准验证，支持键盘导航、屏幕阅读器及高对比度模式。
- 真正的“开放内部”架构：所有组件都以细粒度方式导出（如
Button.Root、Button.Label），支持任意层级组合；更可通过npx astryx swizzle命令一键“弹出”任意组件源码，彻底掌控实现逻辑，无需封装 wrapper。 - 零样式绑定，无缝融入现有工程：底层使用 Meta 自研的 StyleX 进行样式优化，但对使用者完全透明——你仍可用 Tailwind、CSS Modules、SCSS 甚至原生 CSS 覆盖样式，无需学习新 DSL 或引入额外构建插件。
- 品牌级主题系统 + 深色模式一键切换：通过标准 CSS Custom Properties（CSS 变量）定义主题，仅需修改几行变量即可完成整站视觉风格迁移；深色/浅色模式自动适配系统偏好，并支持手动强制切换。
- 开箱即用的模板与 CLI 工具：内置登录页、仪表盘、文档站点等生产级模板；配套 CLI 支持项目初始化、组件生成、主题导出、无障碍检测等高频操作，大幅提升团队启动效率。
- AI 友好型设计语言：组件命名语义清晰（如
Dialog.Trigger、Toast.Provider），Props 类型严格且文档完备，极大提升 LLM 理解准确率与代码生成质量，让 Copilot 类工具真正“懂你的 UI”。
适合哪些人用
如果你是以下角色之一，Astryx 值得你认真试用：
• 前端工程师：厌倦了被封装死的 UI 库，渴望在保持一致性的同时拥有最大定制自由；
• 设计系统负责人：需要一套可扩展、可审计、可渐进式落地的企业级方案；
• 产品团队 & 初创公司：希望快速搭建专业 UI，又不愿被某家厂商的技术栈绑架；
• 正在探索 AI 编程工作流的团队：需要一套能让 AI 助手“看得懂、写得准、改得稳”的 UI 基础设施。
快速上手
只需三步，5 分钟内接入项目：
- 安装依赖：
npm install @astryx/react @astryx/style - 导入全局样式（推荐放在
index.tsx或_app.tsx中）：import '@astryx/style/css' - 直接使用组件：
<Button variant="primary">点击我</Button>—— 不需要配置 Babel 插件，不修改 webpack/vite 配置，无运行时样式注入。
更多高级用法（如主题定制、组件弹出、CLI 使用）详见 官方文档。
项目信息
An open source design system that’s fully customizable and agent ready
编程语言：TypeScript｜GitHub Star 数：2124｜开源协议：MIT｜GitHub 项目地址
这不是又一个“好看但难改”的 UI 库，而是一套把控制权交还给团队、把协作权开放给 AI 的下一代设计系统基础设施——如果你相信设计系统不该是黑盒，而应是可读、可学、可共创的公共契约，那么 Astryx 就是你等待已久的那个答案。
