本文仅供参考，不旨在提供法律或财务建议，也不应被视为法律或财务建议。如果您对此主题有疑问，请咨询您自己的法律或会计顾问。

在Flex，我们是一个小型的工程团队，以小博大，并且非常注重行动力。经过几年的快速产品迭代和方向调整，我们积累了大量的用户体验债，这导致用户体验开始变得笨拙。 

我们仍然需要快速交付，但对质量的要求更高，并且对“质量”的真正含义有共同的理解。然而，当有人向我提出创建设计系统的想法时，我内心有点恐慌。

之前构建过两个设计系统，我深知它们可能带来的陷阱：不必要的定制工作、无谓的争执、过时的文档等等。我们没有时间或资源去陷入设计系统可能带来的包袱中。 

需求

问题很快就变成了， “我们如何才能实施一个‘轻量级’的设计系统——一个既能带来价值又不会拖慢我们速度的系统？”

我们首先要做的是评估一个全面的设计系统需要什么，以及我们计划构建的轻量级系统与之有何不同。

常规的、全面的设计系统

• 定制组件（按钮、模态框、表格等）
• 定制工具（Storybook配置、内部基础设施）
• 变更流程/治理
• 高昂的维护成本

轻量级设计系统

• 仅包含最常用的组件和模式
• 易于采用——文档和代码存在于开发人员日常工作的地方
• 利用现有库而非从头构建（在可能的情况下）
• 具备展示用法的标准

我们的约束：小团队，大目标。

我们从一系列优雅的设计开始，这些设计涵盖了从原子级组件（如按钮、输入框等）到常见布局和多步骤流程。 

在整个过程中，我们竭尽全力 不 除非绝对必要，否则不创建任何新组件。充分利用我们选择的工具至关重要。我们是一家每周交付大量工作的小公司；我们最不需要的就是因为自定义组件的定制问题而陷入细节泥潭。

尽管视觉上的不一致性显而易见，但我在Flex注意到的一个更深层次的问题是，我们缺乏构建常见UI（如表单）的统一方法。你可以查看代码库，发现我们有五种不同的方式来实现表单UI。显然，我们需要一套标准。

创建一系列统一标准

我们之前曾为开发人员着手创建一个“备忘单”部分，其中包含一系列可供复制/粘贴的最佳实践。这成为了展示我们新兴设计系统的绝佳场所。我们可以利用这个区域（后来更名为“Playground”）让开发人员查看并使用我们最常见UI的标准，从而快速启动他们的工作，同时也让设计师看到他们所构建的东西确实得到了应用。最后，将其嵌入到我们自己的Web应用程序中（而不是通过Storybook等外部平台），有助于确保其使用率。

然而，故事才刚刚开始。我们首先需要解决几个棘手的问题：

1. 我们被锁定在我们所选UI库的旧版本中 并且升级将是一项相当艰巨的任务。这一改变将涉及我们面向客户的应用程序和内部工具Alfred的全部。
2. 我们需要合并代码库，以便将我们的内部应用和Web应用放在一起 以确保跨应用设计系统的使用。

完成这些里程碑后，我们重新设计了这两个应用的主题，以匹配新设计，势头也开始逐渐形成。

增效器

在重新设计我们的内部工具Alfred和Web应用的主题后，我们开始在Playground中创建一系列最佳实践。随着时间的推移，Playground包含了我们80%的用例——一个集组件、布局和共享实用工具于一体的一站式平台。

‍

‍

尽管我们知道Playground对开发人员复制/粘贴组件以快速启动工作很有益，但这套标准最终也完美地帮助大型语言模型（LLM）理解如何生成UI代码。

隆重推出：Cursor

在我们开始构建Playground后不久，我们的前端团队开始使用 Cursor AI。我们创建了Cursor规则参考演练场，以便在生成任何基于UI的代码时将其用作起点：

• 有关如何使用我们设计系统组件的示例，请查看位于`src/areas/playground`的演练场。
• 在实现抽屉、表格、向导、布局等新组件时，请复制演练场中已实现的相应文件，并将其用作您正在处理的区域的起点。
• 大多数情况下，您不会更新`src/areas/playground`中的任何文件，而只是将那里的组件用作起点，复制到`src/areas`中的新文件夹中。

我们之前的重新主题化工作在这里取得了巨大成功，它为Cursor构建与我们设计系统一致的UI铺平了道路，而无需查阅任何样式指南。

为了进一步明确“Flex的前端质量意味着什么”，我们将UI团队之前达成一致的标准进行了编纂。Cursor除了参考演练场的规则外，还会参考这些标准，这样大型语言模型（LLM）不仅能理解要构建什么，还能理解如何结合我们各种工具和约定来构建它。以下是我们如何从Cursor规则文件中引用当前UI库Mantine的片段：

• 请使用Mantine作为您的基础React组件库。
• 充分利用Mantine库，包括来自`@mantine/core`的组件、来自`@mantine/hooks`的钩子以及使用`@mantine/form`的表单。
• 对于组件，始终优先使用我们`components/core`或`components/composites`文件夹中的组件，否则，尽可能使用Mantine核心组件。
• 避免使用内联样式或类——首先，始终尝试使用Mantine的props来设置颜色、背景色、间距和大小等样式。
• 对于颜色，始终使用我们的Mantine主题颜色（例如 `theme.colors.yourColorHere[index]`）。
• 对于间距和大小，优先使用Mantine的`rem()`函数，而不是像素或数值，例如 `gap={rem(12)}`。

Flex成果

将AI与我们的设计系统结合使用，在各个方面都带来了颠覆性的改变，提高了速度和质量的标准，并有助于维持这一标准。我们最近的应收账款功能在三周内就完全构建完成了！ 

同样，将演练场用作组件和模式的坚实集合，提升了我们对质量的标准，无论是对开发人员还是大型语言模型（LLM）而言。在追求更轻量级的设计系统构建方法时，我们成功避开了设计系统常伴的诸多陷阱，同时保留了其一致性和方向性的优势。

最近，我们已将演练场用作教育资源，以展示开发人员如何使用替代方案来取代我们正在积极弃用的状态管理工具。在不久的将来，我们计划将演练场标准纳入我们的CI构建流程，以进一步确保其被采纳。

对其他团队的启示

如果您处于早期阶段，我们建议如下：

• 从小处着手: 专注于你最常用的UI组件
• 避免定制化工作: 大多数现代UI组件库都可以用来快速启动你的设计系统工作。将定制化工作留给更复杂的组件和工作流程。
• 明确“好”的标准: 确保你的团队对UI工具和编码规范有一套商定的标准，以便你可以通过AI工具将其规范化。
• 让你的团队一目了然: 将你的设计系统嵌入产品中，以确保其得到使用。
• 让大型语言模型（LLM）易于访问: 确保你的AI工具能够轻松引用你的设计系统和标准，以在生成代码前确保一致性。

总结

你可能不需要一个定制的或完整的UI设计系统。你需要一个实用的。

在Flex，我们的设计系统已成为工程、产品和设计团队的倍增器。它帮助我们以更高的质量标准更快地推进工作。

对于那些注重速度和AI工具的早期团队来说，这可能是你能做出的最明智的基础设施投资之一。

‍