Meta 推出了自己的 shadcn (Astryx)
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00这是 Asterix，Meta 自家的 ShadCN 版本，构建于我们的样式解决方案 StyleX 之上。
00:00:05它完全支持主题定制，采用 MIT 许可协议，Meta 表示他们在内部
00:00:09已经在 13,000 个应用程序中打磨了 8 年。如果你不喜欢 Tailwind 或 ShadCN，
00:00:15这个方案绝对会让你感兴趣；即使你喜欢 ShadCN，
00:00:18我们也来看看是否有理由切换。
00:00:24说实话，它发布时所包含的组件和功能数量真的让我非常印象深刻，
00:00:29这确实证明了他们已经在内部使用多年了。
00:00:32这里有超过 150 个基于 React 构建的无障碍组件，与其逐一查看列表，
00:00:37最好的展示方式可能是通过我们的模板，因为它展示了它们如何协同工作。
00:00:41我们这里有一个带有状态栏和下拉菜单的组合表格。
00:00:44我们还有一个支付表单，你可以看到你需要的所有独立表单元素，
00:00:48以及用于错误消息等情况的表单状态。
00:00:50你可以用它构建一个拖拽式看板，或者搭建一个带有标签页和侧边栏的 IDE。
00:00:56电子商务网站，它也能轻松搞定。
00:00:58甚至是一个 AI 聊天站点，它也完全没问题，还可以配合 markdown 组件来渲染返回的响应。
00:01:03它也有一个订阅按钮。
00:01:05等等，那是 YouTube，但如果你喜欢我们在这里做的事情，请点击订阅，这真的很有帮助。
00:01:10如你所见，Asterix 确实能满足你几乎所有的组件需求，
00:01:14而且所有这些组件都来自同一个核心库。
00:01:16所以使用它和使用任何其他组件一样简单，你可以查看文档以了解组件的所有可用选项。
00:01:23例如，按钮可以带有图标、尾部内容、尺寸、变体，总之，几乎是你所需的一切。
00:01:30但现在让我们来看看为什么要使用它。
00:01:32Meta 的观点是，设计系统一直强迫你在两个糟糕的选择中做决定。
00:01:36选项一是采用大型公司系统（如 Material UI），结果所有的应用看起来都像 Google 产品，且自定义空间有限。
00:01:44选项二是选择像 ShadCN 这样的方案，把组件复制粘贴到你的项目中，但现在代码归你自己所有，
00:01:50这意味着每个项目都有自己的一套组件分支，上游的修复变得难以追踪，因为更新它们变成了你的工作。
00:01:57有些人不喜欢为所有的组件代码负责，所以 Asterix 声称终结了这种权衡。
00:02:03在 Asterix 中，系统控制行为、无障碍性和质量，而主题控制外观，
00:02:08并在令牌层面进行自定义，涵盖颜色、字体、圆角、运动效果等，无需重写任何组件即可满足一切需求。
00:02:14这里是我使用 Asterix 网站上的一些模板制作的应用程序，
00:02:18这也是所有组件在未提供主题时的默认外观，所以它确实自带了一个基础主题。
00:02:24要创建我们自己的主题，我们可以使用 defineTheme 函数，
00:02:27它确实带有一些很棒的功能。
00:02:29第一个是颜色选项。
00:02:31有时你知道你的主要品牌色应该是什么，对我来说是鲜绿色，
00:02:35但你并不想手动生成背景色、强调色，也不想过多考虑所有那些单独的颜色。
00:02:40使用 Asterix，如果我按下保存，你可以看到它自动帮我生成了这些，
00:02:44所以我仅凭一个十六进制颜色就能得到一个非常好的起点。
00:02:48颜色之后，我们还有排版选项。
00:02:50这很容易理解，我们在这里使用 into，但我们也确实有一个缩放比例。
00:02:54所以我的文本基础大小将是 14，
00:02:57比例系数为 1.2。
00:02:59这意味着我们的文本大小每升一级，比如选择大号文本时，
00:03:03它就会用基础值乘以 1.2，这就是我们各个级别的文本大小，
00:03:08它正在为我们生成所有这些标记。
00:03:10之后，我们还可以控制圆角。
00:03:12这个也很直观。
00:03:14如果我想让按钮圆角化，我可以把它设置得很大，
00:03:17如果想让所有东西都直角，我可以把它设为零。
00:03:21最后，我们还有一个辅助选项，即运动效果，
00:03:23这本质上只是控制悬停和点击等动作的动画速度。
00:03:27所以只需定义几个变量，你就能通过自定义主题实现非常丰富的效果，
00:03:31而且它会为你生成所有的令牌。
00:03:34但是如果你不喜欢它选择的某些标记怎么办？
00:03:36比如，如果我想改变它为我的次要按钮选定的颜色，
00:03:40我们可以进入这里的令牌部分，
00:03:42这个主题以及令牌部分一个非常酷的地方是，一切都是类型安全的，
00:03:47所以它知道我们可以定义的具体令牌，
00:03:49这就是为什么在 JavaScript 或 TypeScript 文件中操作比 CSS 更好，
00:03:53因为我们可以获得类型安全。
00:03:55那个次要按钮的背景色是由 color neutral 令牌定义的，
00:03:58所以我只需要将其设置为一个数组，其中一个是浅色模式，另一个是深色模式。
00:04:03对我来说，它们用同一种颜色就行。
00:04:05如果我现在点击保存，你会看到它改变了我的次要按钮颜色，
00:04:08但出现了一个问题，文本看起来不对劲，
00:04:11因为我改变了颜色。
00:04:12所以我想要把文本颜色改成黑色，
00:04:15但问题是它实际上是由 color text primary 变量定义的，
00:04:18所以如果我保存这个操作，
00:04:19你会看到屏幕上很多文本都变成了黑色，
00:04:22而不是我想要的只有按钮上的字变色。
00:04:24所以不要全局更改该令牌，
00:04:26我真正可以做的是只针对该组件进行修改。
00:04:28这就是我们可以使用组件部分的地方。
00:04:30我说我想更改这里的按钮。
00:04:32我提供变体类型，比如我的次要按钮，
00:04:35然后我就可以在这里放入任何我想要的 CSS 变量。
00:04:37我只想把颜色设为黑色。
00:04:39现在如果我保存这个，
00:04:40可以看到我们的次要按钮有了黑色的文字，
00:04:42而其他地方都没有变。
00:04:44它仅限于这个组件。
00:04:46组件部分的另一个酷炫之处
00:04:47是你还可以定义自己的自定义变体。
00:04:50假设我想要一个名为“我的按钮”的变体。
00:04:52我可以在这里设置文本颜色为黑色，背景颜色为红色，
00:04:56当我去使用“我的按钮”时，
00:04:57它是类型安全的，
00:04:58它知道我的按钮是一个有效的变体。
00:05:00你可以看这边，
00:05:01我们现在有一个订阅按钮。
00:05:02所以仅通过主题配置你就能实现很多功能，
00:05:05完全可以调整每个组件的每个部分，
00:05:07或者仅仅是调整应用整体的风格。
00:05:09甚至还有一些预构建的主题，
00:05:10如果你想从一个好的基础开始。
00:05:12你可以看到这些文件中有很多定制内容，
00:05:15你甚至可以扩展主题，
00:05:16这样你就可以在现有主题的基础上构建，
00:05:18而不是每次都从头制作一个全新的。
00:05:20所有这些主题也可以构建用于生产环境。
00:05:23所以它能在 Next.js 这样的服务器端渲染应用中正常工作。
00:05:26它将静态生成所有必需的 CSS 和 JavaScript。
00:05:28拥有这样一个统一的主题存放处的一大好处是，
00:05:31它有助于确保你的品牌一致性。
00:05:34这实际上是我见过的一种反对 Tailwind 的观点，
00:05:36因为开发人员可以编写任何类，
00:05:38或者 AI 可以编写任何类，
00:05:40有时你会得到一些风格略有偏差的组件，
00:05:42因为有人决定使用他们自己的 Tailwind 类。
00:05:45当你有了这样一套固定的主题时，
00:05:46就更容易跟踪，因为它都在同一个地方发生。
00:05:49如果你想查看主题中的变化，可以轻松进行差异比对，
00:05:53而且 AI 不需要考虑它可以使用的 Tailwind 类，
00:05:56它只是使用提供的令牌和组件。
00:05:58虽然我必须说，你其实可以用 Tailwind 和 ShadCN
00:06:00实现类似的效果，
00:06:01你可以将所有内容定义为令牌，
00:06:03尽管它不是类型安全的，
00:06:05所以执行起来会困难得多。
00:06:06现在除了主题之外，
00:06:07如果你想进行更改，还可以直接为组件设置样式，
00:06:09而且实际上有几种方法可以做到这一点。
00:06:10推荐的方法可能是使用 X-Style，
00:06:12因为它使用了 StyleX，
00:06:14这是基于 StyleX 构建的，
00:06:16也是 Meta 显然制作的东西。
00:06:17你也可以使用其他库，如 Tailwind、
00:06:19Panda 等各种库，
00:06:21或者只是普通的 CSS 类名。
00:06:22所以你可以看到这里，
00:06:24我在 StyleX 中定义了覆盖样式。
00:06:25我有一些称为主要按钮的样式，
00:06:27我定义了一些名为“主要按钮”的样式，
00:06:29我想让它的颜色为白色，
00:06:30如果我现在只想改变页面上的一个按钮，
00:06:32我只需要给它 X-Style 属性，
00:06:34并传入我的 StyleX 样式，
00:06:36如果我保存这个操作，
00:06:38你可以看到我的主要按钮现在应用了这些样式。
00:06:39这就是你如何设置某样东西的样式，
00:06:42如果你只想做一次性的修改，
00:06:43而不想改变所有的主要按钮。
00:06:45你可以在文档中看到
00:06:46所有设置组件样式的不同方法。
00:06:47它非常灵活，
00:06:48但我想要指出的一个非常酷的功能是这个 Tailwind 支持。
00:06:51他们实际上通过所谓的“Tailwind 桥”实现了这一点。
00:06:52因此，这让你能够继续使用 Tailwind，
00:06:53但它将你在 Asterix 中设置的主题中的所有设计令牌
00:06:55映射到那些 Tailwind 工具类。
00:06:56通过他们所谓的 Tailwind 桥接。
00:06:58这让你能够继续使用 Tailwind，
00:07:00都是由 Asterix 的主题定义的，
00:07:01但 Tailwind 可以通过 Tailwind 类名来使用它们。
00:07:03不过对我来说，
00:07:06我可能会继续使用 StyleX，
00:07:07因为 Asterix 就是围绕它构建的，
00:07:07而且我觉得混合使用这些库
00:07:08只会带来不必要的混乱。
00:07:10但抛开样式不谈，
00:07:11Asterix 的另一个出色功能
00:07:13是它与 AI 的结合非常紧密。
00:07:13但对我来说，我大概还是会继续使用 StyleX
00:07:15但它主要不是供人类使用的，
00:07:17而是专门为 AI 设计的。
00:07:18它包含诸如获取每个组件的所有文档的命令，
00:07:20将其加载到上下文，
00:07:21只是为了帮助你的代理更好地使用该组件，
00:07:22它甚至可以填充你的 agents.md
00:07:24以提供更多指导。
00:07:26在我的所有演示中使用这个工具时，我发现
00:07:28它做得非常出色，
00:07:29我发现像 Fable、GPT 等模型，
00:07:30它们都能与 Asterix 配合使用，
00:07:31尽管它是一个相对较新的库。
00:07:33总的来说，
00:07:34你可以看到 Asterix 是一个功能非常强大的设计系统，
00:07:36我刚才只是介绍了基础知识。
00:07:38我强烈建议查看它的文档，
00:07:40因为文档写得非常好，
00:07:41而且大多数组件
00:07:42甚至包含最佳实践部分，
00:07:43这对大语言模型非常有帮助，
00:07:45还有一个演练场，
00:07:45如果你想在没有项目的情况下试用它。
00:07:47你会使用这样的东西吗？
00:07:49在下方评论区告诉我，
00:07:49你可以看出 Asterix 确实是一个
00:07:51功能极其丰富的设计系统，
00:07:52而且我只介绍了其中的基础部分。
00:07:54这是 Asterix，Meta 自家的 ShadCN 版本，构建于我们的样式解决方案 StyleX 之上。
00:07:55它完全支持主题定制，采用 MIT 许可协议，Meta 表示他们在内部
00:07:57已经在 13,000 个应用程序中打磨了 8 年。如果你不喜欢 Tailwind 或 ShadCN，
00:07:58这个方案绝对会让你感兴趣；即使你喜欢 ShadCN，
00:08:00我们也来看看是否有理由切换。
00:08:02说实话，它发布时所包含的组件和功能数量真的让我非常印象深刻，
00:08:03这确实证明了他们已经在内部使用多年了。
00:08:04这里有超过 150 个基于 React 构建的无障碍组件，与其逐一查看列表，
00:08:06最好的展示方式可能是通过我们的模板，因为它展示了它们如何协同工作。
00:08:07我们这里有一个带有状态栏和下拉菜单的组合表格。
00:08:08我们还有一个支付表单，你可以看到你需要的所有独立表单元素，
00:08:09以及用于错误消息等情况的表单状态。
00:08:10你可以用它构建一个拖拽式看板，或者搭建一个带有标签页和侧边栏的 IDE。