Astryx 介绍
Astryx 是 Meta 于 2026 年 6 月 18 日开源的 AI 协作型设计系统，目前处于 Beta，基于 React 19+ 与 StyleX。开发者可从 170+ 可访问组件或页面模板起步，用 CLI 搜索组件、查看属性、文档与设计 Token；AI Agent 也能经 CLI 或 MCP 获取同一套资料，CLI 还可把组件索引写入 AGENTS.md、CLAUDE.md 等 Agent 文档。品牌样式可逐层调整颜色、字体、间距、动效与单组件细节，必要时用 Swizzle 把完整源码复制进项目继续改。最终既可直接引入预编译样式，也可从 TypeScript + StyleX 源码构建，把设计规范、AI 编码与前端落地接在同一条链路里。
Astryx 需求人群
AI 编程用户：让编码 Agent 按 Astryx 的真实组件、属性和模板资料搭建 React 页面，减少接口靠猜带来的返工。
前端开发者：从现成组件与页面模板快速搭建后台、表格、表单、设置页、内容页等产品界面。
设计系统团队：统一管理颜色、字体、间距、动效和组件样式，把品牌规范落到整套 React UI。
内部工具团队：复用成熟的组件、布局和交互模式，减少不同项目重复维护同类基础界面。
Astryx 主要功能
React 组件库：提供 170+ 可访问、可换主题的 React 组件，覆盖导航、表单、表格、弹层、数据展示等常见产品界面。
页面模板库：直接浏览完整页面与区块模板，并在 Playground 中预览、修改，CLI 也能把模板注入项目继续开发。
Agent 开发接入：通过 CLI、MCP 和 Agent 文档把组件、属性、Token 与模板资料交给 AI 编码助手，让模型沿着现有设计系统继续写代码。
品牌主题定制：统一调整颜色、字体、间距、圆角、动效及组件细节，明暗模式随主题一起管理，也能构建成生产环境样式。
组件源码接管：常规修改可从 Token、className 与 CSS 逐层深入，需要完全控制时用 Swizzle 将完整组件源码复制进自己的项目。
Astryx 产品特色
人和 Agent 共用同一参考系：组件 API、设计约定、文档与 CLI 一起设计，人类开发者看到的规则也直接提供给 AI，避免额外维护一套容易过时的 AI 专用说明。
定制控制逐级放开：从直接使用组件，到改主题 Token、加自有样式、深入 CSS，再到完整接管源码，项目无需一开始就 Fork 整套组件库。
8 年内部产品沉淀：Astryx 源自 Meta 内部设计系统，经过 8 年持续使用，目前公开信息显示已支撑超过 13,000 个应用。
用 Vibe Test 检查 AI 适配：团队持续让 Agent 在不同设计方案与组件体系下完成同类任务，再从正确性、可访问性、代码质量等维度评估结果，用真实生成表现反推系统设计。