保姆级教程+指令！教你从零到一创建AI组件库！

一、全文速览图

我在之前的文章中介绍过 shadcn/ui 组件库是相对于现有的传统组件库（比如 AntD、TDesign）来说更加符合 AI 应用需求的组件库。那么作为代码小白的设计师或者产品人，该如何用 shadcn/ui 组件库来生成自己的个性化组件库呢？本文就来教你从 0 到 1 搭一套既能自己维护、又方便 AI 协作生成页面的 AI Friendly 组件库，主要有两种方式：一是手动调节参数；二是 AI 生成代码。

二、方式一：手动调节参数

‍‍‍‍‍‍shadcn/ui 提供的组件可扩展性很少，官方仅支持几种基础样式作为组件的风格设定：

shadcn/ui 官网（https://ui.shadcn.com/）

如果你需要定制属于自己业务风格的组件，就需要使用第三方开发的 shadcn/ui 组件库的调整编辑器。目前比较主流的两款编辑器是 shadcn Studio 和 tweakcn，前者大部分功能需要收费，且上手成本较高，所以这里我们以 tweakcn 为例讲讲 AI 组件的具体设置方法：

进入 tweakcn 官网（https://tweakcn.com/）后，你可以先从预设主题里选一个与你目标气质最接近的预设模版，点击下方的滚动轮播卡片，就能够看到整个主题的预览效果，很直观。点击主按钮就可以直接创建，这样比从纯空白开始效率更高：

点击“开始”按钮，进入手动设置参数页面：左侧为调整面板，右侧是组件的实时效果预览面板，即时生效，同时生成该主题所对应的暗色模式主题：

到这里，你会发现上手真的非常非常简单，但是，我试过之后发现有几个重要的注意事项：

1. 渐变色

tweakcn 暂时不支持生成渐变色主题色，因为 CSS Variables 的 primary color 只能是一个纯色值，渐变色对其来说更像是一个图案，不是颜色。如果你有代码基础，后续可以在代码层中进行手动编写渐变色值（教程我日后会给出），对于现阶段的产品设计来说，纯色值应该也是够用的。

2. 不透明度

为了方便 AI 更好的理解和调用色值，在 tweakcn 和 shadcn/ui 的体系里，都不建议在全局基础色彩变量里带透明度，这也意味着你的组件库基础色板中的颜色必须都是实色。透明度只在写具体组件时可以手动调节代码使用，这一点和 AntD 这类传统组件库的设计规则不同。如下图，本来应该带有透明度背景色会直接呈现为实色：

再举个实际应用时的例子，对于 AI 来说：

❌ 这样做是错误的：你在设定了一个叫 Card-bg 的基础色，直接设置了 80% 透明度。这样做相当于你直接在 token 层面就对这个颜色做了限制，会导致 AI 以后应用和调整这个颜色时变得复杂，因为 AI 要先同时处理颜色的色值和透明度。

✅ 这样做是正确的：你设定了一个纯色的叫做 Card-bg 的基础色，然后在画卡片时，对于卡片 A，你可以让 AI 把背景图层的透明度调成 80%；对于卡片 B，你可以让 AI 把背景图层的透明度调成 50%。这样 AI 只需要根据你的指令来精准调节包括透明度在内的其他参数，对于组件的可控性就会更高。

3. 字体设置

tweakcn 中可以选择大部分主流英文字体，如 Roboto、Inter 等，但没有预置 PingFang SC（苹方）等中文友好字体。如果有需要，后续可以在导出的代码层中进行手动编写，追加字体：

另外，tweakcn 中暂时只支持对于字间距的设置，不支持对于行间距的设定，行间距采用默认值，这个下文会具体提到。

4. 单位转换

tweakcn 中默认的圆角和间距大小的单位并不是传统的 pt 或者 px，而是使用 rem 这个单位概念：

rem 是相对于 html 的根元素来计算大小的一种方式，rem 和 px 的区别是：

1. px：是绝对单位，比如，你的圆角在设计稿中是 12px，那在代码里就是 12px，数值完全对应且不会跟随你设置 html 浏览器界面的预览大小进行变化。
2. rem：是相对单位，比如你在 html 浏览器把字号调大，以 rem 为单位的元素会跟着等比变大，体验会更好。

其实很多用 Tailwind 来写的页面的字号、间距、圆角都已经默认全用 rem 来作为单位了，tweakcn 以及 shadcn/ui 都遵循浏览器默认设置：1rem = 16px（浏览器默认根字号），所以 tweakcn 里 rem 的换算公式是：1px ÷ 16 = 1rem，比如：

4px  = 0.25rem

8px  = 0.5rem

12px = 0.75rem

16px = 1rem

这种设置方式对于 AI 来说也是更易控制和调用的。同样的道理，tweakcn 中默认的字体间距使用的是 em 这个单位概念：

em 与 px 的主要区别是：

- em 具备“字间距跟随字号缩放”的功能， 你可以理解为字间距的 em = 相对于当前字体大小的比例，也就是说字越大，字间距也等比变大，字间距会自动随字号缩放，视觉上始终保持协调。举个例子：你的字号 16px，设定间距是 0em，那就意味着实际字间距为该字体的默认字间距（0%），无额外间距设置；如果你的设定间距是 0.02em，那就相当于你将实际字间距设定为该字体的默认字间距（2%）：

- em 具备“父级继承”的功能，你可以理解为假设当前文字内容没有设置字间距的属性，它就默认跟随它上一级的字号的间距属性来走，以此来确保所有的界面中出现的所有的元素间距都在掌控中。

5. 无障碍设计校验

tweakcn 中内置了 WCAG 对比度检查，会直接显示合格或者不合格和数值，点击顶部工具栏的 Contrast（对比度）按钮。会弹出一个面板，展示所有“文字 + 背景”颜色对比度校验结果，你可以按照结果进行调整和修改：

所有设置都调整完毕之后，可以点击“Save（保存）”：点击之后按钮会变成“发布（Publish）”，一般用不上，除非你想把自己调好的主题公开分享给社区里的其他开发者。你可以用 “Share（分享）”或者“Code（代码）”功能，把你的组件库风格链接发送给其他需要使用的同组设计师或者前端开发，就可以直接用来做项目 coding了：

我做好的组件库效果预览：

三、方式 2：AI 生成组件代码

手动一点点的进行参数设置，会很慢，也很容易出错，所以 tweakcn 也支持通过与 AI 对话生成对应的组件设计，你可以通过上传图片和描述需求完成组件的生成，但是 Free 版本生成次数有限，需要多次生成要付费购买：

另外，tweakcn 目前无法直接基于其他外部组件库官网或者 github 的链接直接生成组件库，其本身也不支持把 Figma 组件库的画稿直接变成 shadcn/ui 组件代码，目前仅能根据图片、文字描述等设计素材生成。

这就导致组件在生成的过程中会存在一定的色值误差，而且有限的对话次数也不足以让你将组件细节调整到位。为了避免你踩坑，我将我调试过后的组件生成指令分享给你，你可以复制下文，根据你需要的组件样式，替换掉蓝色文案，或者根据模板添加其他需求，直接发给 AI 就好：

“请帮我生成一份 shadcn/ui 主题配置，具体要求如下： 
1. 颜色映射（需包含浅色/深色两套主题）：    
- 主色 (Primary): 浅色 # 0064fa / 深色 # 3370ff；
- 背景 (Background): 浅色 # ffffff / 深色 # 16161a；
- 文本 (Foreground): 浅色 # 1d2129 / 深色 # e6e8ea；    
- 边框色 (Border): 浅色 # e3e5e9 / 深色 # 2e2e33；   
- 卡片 (Card): 浅色 # ffffff / 深色 # 16161a；
- 成功 (Success): # 3bb346；    
- 警告 (Warning): # fc8800；
- 错误 (Destructive): # f93920；
- 禁用文本 (Muted): rgba(28, 31, 35, 0.35)。
2. 字体排版：
- 字体使用 Inter；
- 字号从 12px 起步，最高至 32px，支持 200~700 多级字重。 
3. 圆角与阴影：
以下数值请帮我自动换算成 rem：
- 基础交互组件的圆角（radius）设定为 3px；
- 容器或卡片中等圆角（radius-medium）设定为 6px；
- 阴影色值：rgba(28, 31, 35, 0.4) 。
4. 间距：
以下数值请帮我自动换算成 rem：
采用基于 4px 步进的间距系统，例如紧凑间距为 8px，中等间距为 16px。 
5. 其他要求：
- 请直接输出包含 :root 和 .dark 的完整 globals.css 代码，便于复制和直接在 AI IDE 工具中使用。
- 同时，帮助我做一个色值的换算： 
把这一套色值中的含有透明度的颜色，如禁用文本的颜色，直接转换成与之在白色背景（light mode）和黑色背景（dark mode）上看到视觉效果一致的颜色。
   - light mode 压到白底 # FFFFFF；
   - dark mode 压到黑底 # 16161A。”

tweakcn AI 会基于以上内容为你自动生成相关的组件样式：

不过，毕竟有一些数值是 AI 基于你给的信息进行相应的换算，所以还是会在细节上存在一定的偏差，因此一定要在组件库生成之后进行人工核对和校验。

另外，除了使用 tweakcn 自带的 AI 工具，如果你已经有了 Figma 组件库，你还可以用 Cursor 等 AI IDE 工具做 Figma 组件库的 css 代码转换，再将转换后的代码直接导入到 tweakcn 中，这样生成的组件样式也会更加精准：

欢迎关注作者微信公众号：「长弓小子」