创始人的设计系统：你不需要设计师

创始人的设计系统，让AI构建的产品无需设计师也能显得专业：设计令牌、你自己拥有的组件库，以及AI能遵守的规则。我构建了1,480个生产级组件，却从未从零设计过其中任何一个。

仪表盘、表单、表格、弹窗、图表、多步骤向导。每一个看起来都属于同一个产品。每一个都支持深色模式。而这一切并非来自设计天赋，而是来自把每个设计决策只做一次——然后让AI把它复用1,480次。

为什么创始人的设计系统很重要：AI构建的应用会逐渐失去一致性

用AI构建，最难的部分不是代码，而是一致性。AI能为你做出一个漂亮的界面。但它能和前面的一百个界面保持一致吗？同样的颜色，同样的间距，同样的按钮形状？

没有系统，就做不到。在三个不同的日子要三个按钮，你会得到三种不同的蓝、三种不同的内边距、三种不同的圆角。单看每一个都不错。放在一起就大喊“原型”。这就是设计债，它的累积方式和技术债一模一样：每个新界面都是一次新的设计决策，而每一次新决策都是一次新的跑偏机会。

设计师会靠强加品味来解决这个问题。设计系统则通过彻底取消决策来解决它。

设计令牌：决定一次，处处复用

设计令牌是你产品外观的常量——一份简短的、经过批准的取值清单，每个界面都必须使用。不再是“某种蓝”，而是那个品牌色。不再是随意的间隔，而是一套间距刻度。不再是随心所欲的字号，而是一套字体排印刻度。

重点不在审美，而在于令牌把设计从一种主观判断变成了一次查表。而AI极其擅长查表。一旦令牌建立起来，“让它好看”就变成了“使用令牌”，这是AI真正能遵守的指令。

shadcn/ui：你自己拥有的专业组件

令牌给了你原料。至于组件本身，我用的是shadcn/ui——原因专属于AI开发。它不是那种你安装后就成了密封黑盒的传统组件库。它把77个设计精美、完全无障碍、可直接用于生产的组件的实际代码交给你——按钮、表单、对话框、表格、标签页、提示条——你把它们复制到自己的项目里。它们归你所有。你可以修改它们。

这为什么重要：当组件是个黑盒时，AI看不到里面，于是会围着它自己发明样式。当组件代码就在你的项目里，AI会读取它、学会模式，并构建出与之匹配的新组件——相同的结构、相同的令牌、相同的行为。我的设置花了15分钟。这77个基础组件成了全部1,480个功能组件的地基，无障碍和深色模式从第一天起就已处理好。

12 周企业职业生涯从来都不是计划申请加入 Solopreneur Accelerator。立即申请 →

变体：把你的规则教给AI

最后一块拼图是变体——为每种情形准备的、每个组件的命名版本。按钮不是临时设计样式的；它有一份固定的清单：默认、次要、描边、幽灵、危险。小、中、大。仅此而已。

回报是，语言取代了样式设计。当我告诉AI“创建一个删除按钮”，它就知道要用危险变体。没有人去选哪一种红。没有人去选内边距。决策在定义变体时就做出了一次，产品里的每个删除按钮从此永远一模一样。

同样的“只决定一次”原则贯穿整个代码库，而不只是界面——数据这一侧的做法见一种模式如何扩展到633个服务。它还与视觉打磨的另一半相配：处理加载、错误和空状态，这是每个界面都需要的。系统加状态，才让AI构建的应用像一个产品。

如何向AI交代你的设计系统

系统建立之后，每次组件请求都遵循同样的形态：指明要照抄的模式，指明要用的令牌，指明要处理的状态。大致像这样：

创建一个成功案例卡片。遵循现有指标卡片的模式。使用标准的卡片令牌、标准的标题和正文字号，图标背景使用品牌色。像参考组件一样，包含深色模式和键盘无障碍支持。

AI第一次就生成了与你的产品匹配的组件——因为你没有让它去设计，而是让它去遵守。你是架构师；这套系统就是你的建筑规范。

为了保持严谨，我每个月做一次简短的审查：搜索本该是令牌的硬编码颜色、本该落在刻度上的随机间距、缺少深色模式对应样式的浅色模式样式，以及本该变成变体的重复一次性样式。每月三十分钟，就能让1,480个组件看起来像一个系统。

还有一个没人告诉你的复利效应：你的组件库就是你的AI的训练数据。每一个构建良好的组件，都在教它你的模式。100个组件之后，它的构建方式就像你。1,000个之后，跑偏就彻底消失了。

本书The Solopreneur RevolutionLuis Gonçalves 讲述如何在不辞职的情况下用 AI 打造独立创业者事业。获取本书 →

常见问题

我的SaaS需要雇设计师吗？

独立构建的产品不需要。设计系统——令牌、你自己拥有的组件、命名的变体——能让你在没有设计技能的情况下得到专业、一致的界面。设计师在之后才值得请，用于品牌和营销工作，而不是用来保证你的按钮是同一种蓝。

用大白话说，设计令牌是什么？

一份简短的、经过批准的设计取值清单：你的颜色、间距大小、字号、圆角程度。每个界面都必须从清单里挑选，而不是自己发明取值。它把“让它好看”变成了AI可以机械遵守的规则。

shadcn/ui是什么，为什么适合AI开发？

它是一套包含77个可用于生产的界面组件的集合，你把它们的代码复制到自己的项目里，而不是作为密封的库去安装。因为代码是可见的，AI可以读取并复刻这些模式——于是新组件会与旧组件匹配，而不是发明新样式。

如何阻止AI发明新样式？

用引用，别用描述。每次请求都指明一个现有组件作为模式，并指明要使用的令牌——“遵循指标卡片的模式”胜过任何形容词。然后每月审查硬编码颜色和偏离刻度的间距，并把重复的样式归并成命名的变体。