78 个组件 + 92 个 Agent 模式，cult/ui 怎么成了设计工程师的新弹药库

大家好，我是若风。

5493 个 Star，78 个 UI 组件，92 个 AI Agent 模式。

这是 nolly-studio/cult-ui 现在的账面数字。说真的，一年前你要是给我推一个「又一个 shadcn 风格的组件库」，我大概率会直接划走。这类项目在 GitHub 上没有一百也有八十，长得都差不多。

但 cult/ui 不太一样。

它用一种很特别的姿势，卡在了一个交叉点上，那就是设计工程（design engineering）和 AI Agent 产品的交汇处。今天想拆一下这个项目。不全是冲着 star 数来的，更多的是因为它代表了一种正在成型的趋势，前端组件库正在从 Material 和 shadcn 那套「干净的默认」里跳出来，去服务一类很具体的人，做 AI 产品的设计工程师。

一句话定位

cult/ui 是一个面向设计工程师的组件库，基于 Tailwind CSS 和 Framer Motion（motion），完全兼容 shadcn 的 registry 协议，复制粘贴即用。它的核心审美不是「通用、克制、可访问性优先」，而是动效、纹理、和视觉质感。

最近这一年，它在原本的视觉组件之外，又长出了一块全新的东西，面向 Vercel AI SDK 的 92 个 Agent UI 模式，外加 4 个全栈 Agent 模板。

所以严格说，它现在已经是两个产品叠在一起了。一个面向设计师的视觉组件库，一个面向 AI 开发者的 Agent UI 模式库。

为什么 shadcn 还不够用

要理解 cult/ui 的价值，得先回到一个很基础的问题。shadcn/ui 已经这么强了，为什么还会有人再造一个轮子？

其实吧，shadcn 解决的是「干净默认」的问题。它给你一组足够通用、足够克制、可以无限改的组件，让你不用担心审美跑偏。这套打法在常规业务系统、后台、文档站里几乎是完美的。

但问题在于，做 AI 产品的这群人，需求不太一样。

你想想看，一个 AI 产品要让人觉得「智能」，光靠模型能力是不够的。用户对一个产品的智能感知，很大一部分来自界面本身的反馈，打字机效果、流式 token 的逐字出现、卡片在思考时的呼吸感、结果出来时的 pop 动画。这些东西 shadcn 默认不会给你，你得自己拿 Framer Motion 一点点堆。

cult/ui 就是来填这个空白的。它的 text-animate 组件，内置了 fadeIn、popIn、whipIn、calmInUp 这些专门为「AI 回答浮现」设计的入场动画。它的 animated-number、typewriter，几乎就是你做 Agent 对话界面会反复用到的基础积木。

省下来的不是几行代码，是一整套动效审美决策。

核心机制，registry 模型才是真正的护城河

很多人会忽略 cult/ui 最聪明的一个设计决策，它没有把自己做成 npm 包。

这一点很重要。传统的组件库分发方式是 npm install，你拿到的是编译后的产物，想改源码就得 fork，想升级就得处理 breaking change，版本一旦锁死就动弹不得。

cult/ui 完全继承了 shadcn 的 registry 思路，组件代码直接住进你的代码库里。你通过 CLI 把某个组件拉下来，拿到的是一份完整的、带注释的 .tsx 源码，就在你的 components/ 目录下，想怎么改怎么改。

我看了一下它的 registry 定义文件 apps/www/registry/ui.ts，每个组件的结构是这样的。

{
  name: "cosmic-button",
  type: "registry:ui",
  dependencies: ["@radix-ui/react-slot"],
  files: [
    {
      path: "registry/default/ui/cosmic-button.tsx",
      type: "registry:ui",
    },
  ],
  description:
    "Animated button/link with cosmic gradient border effect",
}

注意几个细节。第一，dependencies 字段会告诉 CLI 这个组件依赖哪些 npm 包，拉组件的时候自动装好。第二，registryDependencies 用来声明组件之间的依赖关系，比如 texture-card-demo 依赖 texture-card 和 texture-button，CLI 会递归地把它们一起拉下来。第三，组件类型走的是 shadcn 官方的 schema 协议，registry:ui、registry:block、registry:example 这些枚举值和 shadcn 完全一致。

这意味着什么？意味着你已经在用 shadcn 的项目，可以零成本地把 cult/ui 当成它的扩展来用。同一套 CLI，同一套 schema，同一个 components.json 配置。

这才是真正的护城河，不是组件多好看，而是它把自己长在了 shadcn 已经铺好的管道上。

92 个 Agent 模式，这块才是真刀刃

如果说视觉组件是 cult/ui 的基本盘，那 AI Agent 模式就是它的未来式。这是我看完整个项目最想聊的部分。

README 里主推的 aisdkagents.com 上挂着 92 个 Agent 模式，我挑几个有代表性的说一下。

Competitor Research Agent，竞品分析 Agent。输入一个竞品 URL，用 Firecrawl 做站点地图抓取和并行爬取，分析对方的定位、定价、功能、技术栈，最后输出一张销售对战卡。这个模式的价值不在 UI，在于它把「抓取 → 结构化 → 分析 → 产出」这条链路的工程拆解公开了。

Data Analysis Agent，数据上传 CSV/JSON，AI 做模式识别、相关性分析、异常检测，输出带置信度分数的可视化洞察。典型的「对话式数据探索」范式。

Accessibility Audit Agent，用 Firecrawl 抓任意网站，按 WCAG 2.1 标准做可访问性审计，按严重程度归类问题，检查色彩对比度，验证标题层级。

更有意思的是 Cult Pro（付费版）里的几个 Agent 架构模式，这些是真正值得抄进自己项目里的设计模式。

Orchestrator Pattern，一个主 Agent 负责调度，把复杂项目拆成子任务，分发给专门的 worker Agent，再跟踪交付物。这是典型的多智能体编排思路。

Evaluator-Optimizer Pattern，Agent 先用专门的工具评估内容质量，发现问题后自动修复，形成一个自我迭代的闭环。

Routing Pattern，用 AI SDK v5 的流式分类能力，把用户请求路由到最合适的专家 Agent，适合做客服类的多 Agent 系统。

Multi-Step Tool Pattern，Agent 按顺序串联使用多个工具，搜索、新闻、分析、决策，每一步都带类型安全。

坦白讲，这些模式本身在 Anthropic 的 Building Effective Agents 那篇文章里都有更深入的理论论述。但 cult/ui 的价值在于，它把这些理论落成了可以 copy-paste 的 Next.js 代码，带 AI SDK 的类型安全，带真实的工具调用实现，带可以直接跑的 artifact 流式渲染。

对正在做 Agent 产品的人来说，这是省下几天踩坑时间的现成参考实现。

组件审美，动效与纹理的极致

回到视觉组件本身，cult/ui 的审美立场非常鲜明。我看了一圈它的 78 个组件，大致可以分成几类。

动效类是它的看家本领。text-animate、animated-number、typewriter、terminal-animation，几乎覆盖了 AI 产品里所有「文字应该怎么动」的场景。

纹理类是它最出圈的部分。dither-image（最新的，4 月 21 日刚加的）做抖动效果，shader-lens-blur 做着色器模糊，distorted-glass 做扭曲玻璃，texture-button 和 texture-card 做带纹理叠加的按钮和卡片。这类组件的共同特点是，它们追求的不是 Material Design 那种干净的扁平，而是一种偏 retro、偏 Brutalist、带噪点和质感的「设计工程师审美」。

我特别喜欢 cosmic-button 这个组件，可以贴一下它的实现思路。

<span className="absolute inset-[-200%] animate-cosmic-spin
  bg-[conic-gradient(from_0deg,#adfa1b,#c9ff63,#efffb7,#8cd413)] opacity-95" />

它用一个 inset-[-200%] 超大尺寸的元素做旋转的 conic-gradient 边框，配合 hover 时 inset-[-3px] 的外扩动画，再加一层 mix-blend-soft-light 的噪点叠加，最后是带内外阴影的内层背景。三层叠出来的效果是，一个会呼吸、会旋转、带宇宙感的渐变按钮。

这个写法没什么黑科技，全靠对 Tailwind 工具类和 CSS blend mode 的熟练组合。但它体现的是一种能力，把高级的视觉效果拆解成可维护、可定制的原子组件的能力。

这就是设计工程师这个词的真正含义。不是会画 Figma，是把设计意图工程化。

诚实的边界

讲了一堆好的，得说说它的问题，不然这篇文章就成了软文。

第一，这是一个事实上的单人项目。贡献者一共 7 个人，但 Jordan-Gilliam 一个人提交了 98 次，第二多的 nolly-studio 是 26 次，剩下 5 个人各只有 1 次。这意味着项目的 bus factor 基本是 1，维护节奏完全取决于作者一人的精力。

第二，它最近一次提交是 2026 年 5 月 21 日，从那到现在有一个多月的空窗。不算停滞，但也没有特别活跃的社区接力。你在生产环境重度依赖它之前，得有「这个组件出了问题我自己能改」的心理准备。

不过话说回来，因为它走的是 registry 模式，代码本来就在你自己的仓库里，这个问题的影响被大大稀释了。组件一旦拉下来，cult/ui 这个上游项目就算停更，你也不受影响。这恰恰是 copy-paste 模式相对于 npm 包的核心优势。

第三，它 README 开头写的「Accessible and customizable」，我得打个问号。看实际的组件实现，可访问性并不是它的第一优先级。很多动画组件没有 prefers-reduced-motion 的处理，按钮组件的焦点态也不够完整。如果你做的产品有合规要求（比如政府、医疗），用它之前得自己做一轮 a11y 审计。

第四，Cult Pro 是付费的。免费版能拿到所有视觉组件和一部分 Agent demo，但完整的全栈 Agent 模板和高级模式在 pro 里。这是合理的商业模式，但你得清楚，这个项目背后是有商业化动机的，不是纯粹的慈善开源。

工程层面的几个亮点

抛开组件本身，cult/ui 的工程组织也值得拆一下。

它用的是 pnpm + turbo 的 monorepo 结构，虽然现在实际上只有一个 apps/www，但保留了扩展空间。构建走 turbo 的 task pipeline，lint、typecheck、format、test 都能并行跑。

技术栈是前沿的。Tailwind CSS v4（@tailwindcss/postcss 4.1.13），Next.js 15.5，React 19.2 的类型定义，motion（Framer Motion 的新包名）。这套组合说明作者一直在跟进最新生态，不是停在两年前的老栈。

CI 也很完整。我数了一下 .github/workflows，有 code-check、test、prerelease、release、issue-stale 五个流程，还用 changeset 管版本。对一个看起来是单人维护的项目来说，工程纪律算很到位了。

还有一个小细节让我觉得作者很懂。__index__.tsx 这个文件开头写着「This file is autogenerated by scripts/build-registry.ts. Do not edit this file directly.」，用 React.lazy 做组件的按需加载，配合 @/registry/default/ui/xxx.tsx 的路径别名动态 import。这是把 registry 既当成数据源，又当成运行时的组件加载器来用，设计上很统一。

这个项目对读者的启发

拆完之后，我想提炼几个对正在做产品的人有价值的点。

如果你是前端工程师，重点学的不是它的组件代码，是它的 registry 模型。把自己公司内部的业务组件也做成 shadcn 兼容的 registry，团队内部用 CLI 分发，比维护一个私有 npm 包灵活太多了。cult/ui 已经证明了这条路跑得通。

如果你在做 AI Agent 产品，那 92 个 Agent 模式值得花一个下午过一遍。不需要直接拿来用，关键是看别人怎么把「理论上的 Agent 架构」落成可运行的 Next.js 代码，工具调用怎么接，artifact 怎么流式渲染，多 Agent 怎么编排。这些经验比任何 PPT 都实在。

如果你是独立开发者，cult/ui 的商业化路径也值得研究。从开源的视觉组件积累声誉，再用 Pro 版的 Agent 模板变现，开源和付费之间的边界划得很清楚。这是一种很健康的「开源引流 + 高阶付费」模式。

最后说一句我自己的判断。cult/ui 代表的「设计工程师」这个角色，在未来两三年会越来越值钱。原因是 AI 把功能实现成本压到了接近零，剩下的差异化几乎全在前端体验上。当人人都能用 v0 和 Lovable 生成一个能跑的应用时，真正能把一个产品做得「有质感、有审美、有灵魂」的人，就会成为稀缺资源。

cult/ui 给这群人准备了一套趁手的弹药。至于弹药怎么打得准，还得看你自己。

项目地址放在下面，感兴趣可以自己去看，挑几个喜欢的组件拉下来玩玩。

https://github.com/nolly-studio/cult-ui