Meta八年内部打磨的设计系统开源了
- 公众号：GitHubStore
- 发布时间：2026-07-03T18:52:57+08:00
- 微信链接：https://mp.weixin.qq.com/s/YAntPMH1T6sxvdxrbNYxTA
- RSS ID：3916483328-2247495664_1
- Feed ID：MP_WXS_3916483328
- Glance 当前首页可见：是
Meta（即Facebook）开源了他们内部用了八年的设计系统 Astryx。看到名字可能有点陌生，但它曾经是 Meta 内部最大、最核心的设计系统，支撑了上万个应用。
项目简介
过去几年，大家用得最多的开源设计系统基本就是 Material、Ant Design、Chakra、Mantine 这些。它们各有特色，但也都有明显短板：要么定制成本高，要么样式锁定严重，要么对 AI 工具不友好。
Astryx 试图解决这些痛点。
它直接说自己是“为人和 AI 智能体共同构建时代而生”的设计系统。这个定位听起来有点大胆，但看完它的设计思路后，你会发现它确实在很多细节上做了前瞻性思考。
它是一个开源设计系统，在 Meta 内部经历了八年的发展，成为公司内使用最广泛、规模最大的设计系统——支撑了 13,000+ 个应用，由每天依赖它的工程师、设计师和产品团队共同塑造。
它以一套完整系统提供 150+ 个可访问组件、品牌级主题、暗黑模式、即开即用的模板以及 CLI 工具。你只需引入预构建的 CSS 并使用类型化的 React 组件——无需构建插件、无需采用额外的样式库，人和 AI 智能体都能使用相同的工具进行构建。
核心优势
- 真正的“可定制”而非“能改”
很多设计系统号称支持主题定制，实际操作起来要么得重写样式，要么得包一层组件。Astryx 的做法简单粗暴：主题就是一组 CSS 自定义属性。
设计师想改颜色、圆角、间距？直接改 CSS 变量就行，完全不用碰组件源码。这对品牌定制场景特别友好。
- 不锁死你的技术栈
Astryx 内部用 StyleX 写样式，但对外完全透明。你可以用 className 随便覆盖，支持 Tailwind、CSS Modules、原生 CSS……你项目里原来怎么写，现在还是怎么写，不需要迁移成本。
- 开放的组件架构
这可能是它最打动我的地方。
大多数设计系统把组件做成“黑盒”，你只能用顶层 API。Astryx 反其道而行之：基础构建块全部导出，需要深度定制时，还可以通过 CLI 一键把组件完整源码“swizzle”（导出）到你的项目里，彻底拥有它。
这对中大型项目，尤其是需要强品牌定制的项目来说，简直是救星。
- 为 AI 时代准备的 API 和文档
这一点很有意思。
Astryx 的文档、API 设计、CLI 工具，都是同时考虑人和 AI 的使用习惯。据官方说法，每一个让 AI 更好用的改动，最终也让人类开发者体验更好。
这在当下 Cursor、Claude、Windsurf 大行其道的时代，显得格外务实。
快速上手体验
安装非常简单：
npm install @astryxdesign/core @astryxdesign/theme-neutral npm install -D @astryxdesign/cli 引入几行 CSS + 一个 Theme Provider 就能跑起来，不需要任何构建插件配置。
目前提供 neutral（中性）、butter、chocolate、matcha 等七个现成主题，都支持暗黑模式。
组件数量目前 150+ 个，覆盖常用场景，TypeScript 支持完整， accessibility 也做得不错（毕竟在 Meta 内部经过多年验证）。
安装 Astryx 和一个主题：
npm
npm install @astryxdesign/core @astryxdesign/theme-neutral npm install -D @astryxdesign/cli
pnpm
pnpm add @astryxdesign/core @astryxdesign/theme-neutral pnpm add -D @astryxdesign/cli
yarn
yarn add @astryxdesign/core @astryxdesign/theme-neutral yarn add -D @astryxdesign/cli 最简单的接入方式是引入少量 CSS 并使用主题 Provider——无需构建插件、无需 PostCSS 或 Babel 配置。完整指南（包含 Next.js、Tailwind、Vite 和 CDN 用法）请参阅 @astryxdesign/core 的 README。
推荐的 CLI 使用方式：为保证 CLI 可靠调用，建议在 package.json 中添加脚本：
“scripts”: { “astryx”: “node node_modules/@astryxdesign/cli/bin/astryx.mjs” } 然后使用 npm run astryx — component —list。这样可以避免 AI 智能体或新开发者直接调用时出现路径错误。
项目地址
https://github.com/facebook/astryx
如果你觉得这篇文章不错，别忘了点赞、在看、转发给更多需要的小伙伴哦！
预览时标签不可点