靠前端组件库，一个月赚8w？

大家好，我卡颂。

组件库应该是前端同学最熟悉的开源形式了。

我们很难将组件库与赚钱联系在一起。毕竟，知名如Element UI、Antd，也没有很好的商业化。

而我今天要介绍的一款开源组件库Aceternity UI，他甚至没有Github仓库，NPM周下载也只有1.6k。

但他背后的小团队可以做到8w刀/月的收入。

他是如何办到的？

欢迎围观朋友圈、加入人类高质量前端交流群，带飞

以什么角度聊组件库？

当我们聊组件库时，最常聊的是什么？

• 端：PC、移动，还是native...
• 风格：企业后台风格、简约风格...
• UI边界：是否是headless UI...
• 适用框架：React、Vue，还是框架无关（web component）...

不管是上述哪种角度，都是从工程师的视角出发。

从工程师视角发展的项目，可能很极客、性能很好，但通常不赚钱。

在正式介绍Aceternity UI前，我想先简单讲讲其作者Manu Arora的经历。

从作者的经历中，我们能看到从商业化的视角发展的组件库是什么样的。

Manu的经历

作者Manu大二时（16年）开始自学web开发，并在一年后完成了自己第一个外包活儿，赚了2w卢比（约1690人民币）。

他就读的学校是个三本（是的，印度三本），大部分学生只是为了混一个能找工作的文凭。

既然自己已经能靠外包赚钱了，为什么还要在学校浪费时间？

想通了这一点，Manu就辞职创业了。

说是创业，其实就是开了个工作室接各种外包活儿，其中又以Sass为主。

说白了，工作性质就是做企业后台项目的外包前端。

在业余时间，Manu做了个组件库Tailwind master kit。

这个组件库与传统组件库（比如Antd）有很大区别 —— 他没有布局系统，也没有配置灵活的复杂组件（比如Table、DatePicker）。

他将商业网站常见的模块封装成组件，比如价目表、团队介绍...

再将这些组件封装成页面模版，比如落地页、联系方式页...

最后，以79刀的买断价售卖模版。

这套组件库的受众很明确 —— 希望快速上线产品网站的小企业、小团队。

可以说，这是个完全遵循商业视角开发的闭源组件库（如果你从技术视角出发，很难理解为什么会有人花79刀买页面模版）。

虽然最后没有赚多少钱，但这段经历为后面Aceternity UI的成功埋下了伏笔。

Aceternity UI的经历

让我们继续从商业视角分析产品网站 —— 除了希望快速上线外，受众还有哪些痛点？

经过调研，Manu发现 —— 受众对各种酷炫UI有需求。

为了满足这一需求，Manu尝试写博客讲解“如何用React、Tailwind CSS、framer motion实现酷炫的UI组件”。

但慢慢的他发现，大家想要的不是学会，而是直接拿来用。

于是，Manu开发了Aceternity UI。与其说这是个开源组件库，不如说他是一个酷炫UI展示网站。

在Aceternity UI中，Card组件是有3D透视效果的：

Tooltip组件是会跟随鼠标指针左右摆动的：

那么，Aceternity UI如何赚钱呢？

答案是 —— 不赚钱。

作为开源项目，Aceternity UI有两个作用：

1. 作为吸引流量的入口
2. 作为作者秀肌肉（技术、设计能力）的舞台

先聊第一点，大部分开源组件库为了通用性以及保持所有组件统一基调，在设计组件时会偏向保守。

Aceternity UI完全没有上述束缚。

翻看他的组件列表，没有统一的设计语言、没有组件分类，所有组件都是怎么酷炫怎么来。

简而言之，市面上大部分组件库作者考虑的是用户怎么用，而Aceternity UI更多考虑的是这个组件怎么做比较酷炫。

这种差异化竞争使他比其他组件库更吸引眼球，很多知名编程Youtuber都做了视频介绍。

除此之外，Manu在Discord与Twitter的营销也做的很不错（推有2w粉）。

这些流量都导给了Aceternity UI Pro，这个网站包括两类收入来源：

1. 卖基于Aceternity UI的各种网站模版（类似之前的Tailwind master kit）
2. 三种粒度的外包服务

这里主要讲讲外包服务。

上面谈到，Aceternity UI的第二个作用是作者秀肌肉的舞台。

这会吸引一些没有技术能力，又想做酷炫网站的小公司、小团队来购买外包服务。

如果你想外包实现一些酷炫的组件，收费为3499刀/月。

要想外包完整的产品落地页，收费为4995刀/月。

如果想开发复杂的多页应用，收费为1.2w刀/月。

这是一种很灵活的外包报价方式。比如，我以1.2w刀/月的费用外包实现了一个多页应用。

应用上线后，不再有大规模改动，但还想新增一些功能，将付费模式改为3499刀/月即可。

完整的流量转化路径如下：

当前，Aceternity团队包括6个人：2个前端、1个全栈、1个设计师、1个运营、1个产品。

平均每月的收入在6～10w刀。

总结

Aceternity UI作为一款开源组件库，能够取得商业化成功，离不开如下几点：

1. 角色定位：将开源组件库作为引流入口、秀肌肉的舞台
2. 明确场景：只针对产品网站场景，这样带来的流量才精准
3. 后续转化：后续流量导给已经被验证过能赚钱的业务，即卖模版、技术外包
4. 发展顺序：明确先有鸡还是先有蛋

解释下第四点 —— Aceternity UI的经历告诉我们，要想靠开源赚钱，你得：

1. 先找到一个可行的商业模式
2. 围绕这个商业模式打造开源项目，让项目为商业赋能

也就是互联网的免费思维 —— 羊毛出在狗身上，猪买单。