Meta 内部锤炼 8 年，支撑 13,000+ 个应用
为当下的构建方式而生的
开源设计系统
一个完全可定制的系统，由人类设计师与并肩工作的人工智能智能体 (AI Agents) 协同塑造。基于 React 和 StyleX，为你提供打破封装的无束缚定制体验。
无样式锁定 AI 开发者协同 150+ 访问性组件
quick-start.sh
# 安装核心包与 Neutral 主题
npm install @astryxdesign/core @astryxdesign/theme-neutral
# 运行 AI 智能体上下文初始化
npx astryx init
Done! AI documentation setup complete.
支持 npm, pnpm, yarn, bun 等包管理v0.8.2
为什么选择 Astryx？
为开发者和 AI 助手精心设计的核心架构特性，让定制化和协作变得前所未有的简单。
开放内部结构 (Open Internals)
组件可在任意层级进行灵活组合，永远不会被封闭的顶层 API 锁定。你需要的所有构建块都直接对外导出；当面临深度定制时，`swizzle` 命令可一键将组件源码释放进项目，接管完全的控制权。
npx astryx swizzle Button
无样式锁定
使用 StyleX 编写，但对用户绝对透明。你可以随意使用 Tailwind CSS、CSS Modules 甚至原生 CSS，通过 `className` 无缝覆盖，适配你项目中已存在的任何样式方案。
人机协同共建 (AI-Ready)
API 风格、详实文档与 CLI 经过统一设计，使人类开发者与 AI 助手可以遵循同一份文档进行开发。为大模型优化过的 `--dense` 标志和内置 MCP 协议更让 AI 生成效率跃升。
无需封装的主题定制
主题系统是一组极具表现力的 CSS 自定义属性。设计师与开发者无需为了适配新品牌而分叉代码、拆包重写，只需简单覆写设计令牌，就能让 Astryx 打上鲜明的品牌烙印。
NeutralMatchaButterChocolateY2K
探索 7 种品牌主题
在线切换由不同字号倍率、圆角乘数、调色板组成的主题，一窥 Astryx 主题引擎的真正威力。
Astryx 交互式主题沙盒
选择下方主题，观察右侧组件样式、圆角及对比度如何实时适配。
选择品牌主题
Astryx Component
Beta v0.8Neutral Preview
正常运行故障警告
输入同步：AI-Agent 友好型设计系统
规范与反模式
为了保障人与 AI 在混合开发中保障高代码一致性，我们建立了直观的开发红线与推荐准则。
推荐的做法 (Recommended)
1.布局为先：先选好 AppShell 框架及侧边栏，划分预算，最后写内容。
2.语义令牌：始终使用
var(--color-*) 或 Tailwind 语义类，防止色彩碎片化。3.主从结构：在当前页面使用 LayoutPanel / 检查面板展开详情，而不是进行路由离开跳转。
4.受控表单：所有的 Input 表单项严格为受控组件（value + onChange）。
避免的做法 (Avoid)
1.在原生 HTML 元素上使用行内硬编码样式，应当在组件上使用
xstyle 或 Tailwind。2.硬编码色值如
#fff 或间距 16px，导致无法兼容全局亮暗模式和未来设计重构。3.无休止地使用
Card。卡片是自包含小部件，不要将列表中的每一个 Item 用 Card 包装。4.随意硬编码原生
<a> 标签，这会导致 Next.js 等框架路由无法预加载，应使用 useLinkComponent()。准备好开启协同构建了吗？
探索 Astryx 设计系统的所有细节：色彩分层、行高垂直网格对齐、同心圆角、CLI 命令行以及与 AI 并肩开发的细节指南。