Meta把内部设计系统开源了:支撑内部13000+应用,专为Agent调优
一套设计系统如何让AI与开发者协作?Astryx通过统一组件和工具,实现高质量前端代码的生成,解决了产品工程中的规范问题。
核心内容:
- Astryx的设计理念:作为AI Agent的一等用户,统一人与AI的开发语言
- 系统核心能力:提供150+组件、多套主题、灵活技术栈与CLI工具
- 实际价值:解决AI生成前端代码的规范问题,提升产品统一性与可维护性
用AI写前端其实不缺组件库。
开发者想快速搭一个页面,选择已经很多了。
现在大家基本都在用AI,但AI写出的页面问题也很明显,能帮你把按钮、表单、弹窗做出来,却不一定能帮你把一个真实产品做得统一、稳定、可维护,不像是一个很专业的产品,经不起推敲。
其实就是设计上没有一套规范。
最近开源了一套设计系统Astryx,进行了大更新,改造成了Agent适配的设计系统。
Astryx已经在内部演进了8年,是内部使用规模最大的设计系统之一,支撑了13000+个应用。

项目简介
Astryx是开源的React设计系统,提供150+可访问、可主题化的UI组件,并配套主题、模板、CLI和AI Agent友好的开发工具。
Astryx想解决更完整的产品工程问题,怎么让设计规范、组件实现、主题系统、模板和 AI 编程工具使用同一套语言。
设计系统明确把AI Agent当成设计系统的一等用户。

Astryx让人和AI使用同一套组件、同一套文档、同一套CLI工具。
AI写前端代码,不只是生成HTML和CSS,更要理解产品界面该怎么组织、控件该怎么组合、主题该怎么继承、交互状态该怎么处理。
设计系统会成为AI生成高质量前端的基础设施。
DEMO
我仔细看了组件库,里面的这些组件都是现在大家做软件比较常用的,而且是非常常用的。

有这样的一套设计标准其实是非常爽的,一般的小公司其实都没有太完善的设计标准,做出来的产品就会很不自然。

再来看看我随便测试了下,让AI用这个设计系统做了个前端页面。
这看起来就很标准了。

功能特点
组件足够完整
Astryx提供150+UI组件,覆盖按钮、表单、菜单、导航、布局、数据展示等常见场景。
这类设计系统的价值在于团队能不能用同一套组件持续构建大量页面。
产品级方案

Astryx提供多套官方主题,比如neutral、butter、chocolate、matcha、stone、gothic、y2k。
它的主题不是简单换颜色,而是通过CSS custom properties进行系统化覆盖,这样开发者可以快速获得一套完整视觉风格,也可以根据品牌继续定制。
技术栈
Astryx内部使用StyleX,但你不需要强制接入 StyleX。
你可以继续用Tailwind、CSS Modules或普通CSS,通过className去覆盖样式。这对已有项目很重要,因为很少有人愿意为了一个组件库推翻现有工程体系。
它有CLI,不只是组件
Astryx 提供CLI,可以用来查询组件、搜索模板、查看 tokens、初始化项目、构建主题、运行codemod。
对AI来说,CLI很关键,因为AI可以通过结构化命令读取组件信息、查找模板和生成代码,减少胡写API的概率。
项目链接
Astryx作为设计系统,从根本上解决了AI生成前端代码的规范问题,让产品统一性与可维护性得到显著提升。