# 我们读了 150 个 shadcn/ui 项目。一模一样的不是紫色。

《解构》第一期。GitHub 上收藏数最多的 shadcn/ui 项目几乎只用两种字体，主色是灰色。大家归咎的紫色渐变，另有来源。

https://laithjunaidy.com/zh/writing/taken-apart-shadcn-defaults
作者 Laith Aljunaidy. 发布于: 2026-09-25.

---

![收藏数最多的 150 个 shadcn/ui 仓库：88% 使用 Geist 或 Inter，75% 的主色为中性色](https://laithjunaidy.com/writing/taken-apart-1/chart.png)

用 AI 做过产品的人都认得这种样子：同一种字体、紫色渐变、一模一样的柔和卡片。通常被怀疑的是 shadcn/ui，因为太多这类应用都建在它之上。所以我不再猜测，直接去读代码。

## 我测量了什么

2026 年 9 月 25 日，我取了 GitHub 上带 `shadcn-ui` 标签、收藏数最多的 150 个仓库。每个仓库我都读了决定外观的文件：根布局、Tailwind 配置和全局样式表，并记录两件事。

- **字体**：来自 `next/font` 导入、Google Fonts 链接和 `font-family` 声明。
- **主色**：来自样式表中第一个主色值，按色相分为中性、Blue、紫色和其他。

读不出信号的仓库记为不可读，从不猜测。最后有 67 个仓库能读出字体，87 个能读出主色。

## 两种字体选其一

能读出字体的 67 个仓库中，59 个使用 **Geist 或 Inter**，即 88%。Geist 出现在 34 个里，Inter 出现在 28 个里，有些两者都加载。只有 8 个选了别的字体，分散在 DM Sans、Manrope、Sora、Montserrat 等少数几种之间。

这才是真正的同质。这并不是糟糕的选择，两种字体在屏幕上都很出色，但这意味着读者看到的第一样东西，在几乎所有这些产品里都一样。

## 主色是灰，不是紫

能读出的 87 个主色中，65 个是**中性色**：接近黑色或灰色，直接来自 shadcn 自带的基础色板，即 75%。Blue 11 个，占 13%。紫色只有 5 个，占 6%。

所以紫色并非来自 shadcn/ui。原封不动时，它是灰色的。如果你的产品是紫色，那是有人选了它，或者有什么替你选了它。

## 如果你用 AI 做设计，这意味着什么

组件库不是你品牌的问题。它有意给你结构和中性的底色。同质从两个地方混进来：没人改过的字体，以及在没人指定时由工具填上的强调色。

两者各只是一个决定。选一款能承载你风格的字体，设定你自己的主色，在模型动笔之前把两者交给它。这就是全部的解决办法，也是设计系统必须先行的原因。

## 方法与数据

扫描脚本、规则和原始结果都已公开：[scan_shadcn.py](https://laithjunaidy.com/writing/taken-apart-1/scan_shadcn.py) 与 [results.json](https://laithjunaidy.com/writing/taken-apart-1/results.json)。色相分类使用 HSL（紫色 240 到 300 度）和 OKLCH（紫色 265 到 320 度），饱和度低于 12% 或彩度低于 0.05 的都算中性，shadcn 的 slate 和 zinc 基色正落在这里。样本是该标签下收藏数最多的 150 个仓库，既有应用也有组件库，中位数约 1,700 个收藏。

这是第一期**《解构》**：一个设计问题，手工测量，方法公开。想让我数点什么，[告诉我](https://laithjunaidy.com/zh/contact)。