最近我上线了一个 Vibe Coding 的术语网站,叫 VibeHub。它帮助大家学习 Vibe Coding 相关的术语,让我们能更准确地跟 AI 描述需求。

举个例子,输入框这种组件,我们可能会跟 AI 说「页面上要有一个填邮箱的地方」,但它的正式名字叫输入框,英文叫 Input。类似这样不知道怎么描述的术语还有很多,可以在 VibeHub 的图鉴里逐个学习。

VibeHub 首页的术语卡片,输入框 Input 写着「页面上要有个填邮箱的地方」

进入每个术语的详情页之后可以左右切换。每一个术语都有具体的演示,还会说明什么时候该用、什么时候不该用。

多行文本域 Textarea 的详情页,包含一句话描述、演示和左右切换按钮

这个网站上线之后传播得很快,不到五天的时间访客量就超过了一万。

Vercel 后台显示 VibeHub 的访客量达到 10,054

这个项目给了我一些心得。

社媒是验证需求的渠道

最开始想做 Vibe Coding 术语这个方向的时候,我只是自己觉得应该会有人需要,但我不笃定它会这么受欢迎。现在 AI 能把做一个项目的时间缩短到一两天,我用两天时间把这个项目上线,然后发到社媒上,发现大家的反馈比我想象的还要好,这是我没想到的。

所以社媒不只是一个推广渠道,它还是一个验证想法的渠道。如果我闭门造车,发完产品就等着用户自己找上门,只能通过一些很小的渠道触达用户,那就永远得不到大家的反馈。

用户在指导我做产品

把产品发到社媒之后,我发现大家会指导我来做这个产品。

虽然做术语网站是我自己的想法,但我是技术出身,这些术语我大部分都了解,所以我不是这个产品最垂直的用户。我的能力可以让我把这个产品做好,但需要真实的用户来纠正我。如果我没有发社媒,很多设计就只是我自己的想法。下面是几个用户反馈带来的改动。

第一个是卡片内容的顺序。之前卡片最上面放的是术语描述,收到反馈之后,我把大家可能会问 AI 的那些问题放到了最上面。

前端 Frontend 的术语卡片,最上面是「老听人说前端、后端,这两个到底有什么区别」

比如链接这个术语,卡片上写的是「这段文字要能让人点,点了跳到另一个页面」。这是我们平时会跟 AI 说的话,放在最上面之后大家一看就有共鸣。

链接 Link 的术语卡片,写着「这段文字要能让人点,点了跳到另一个页面」

第二个是英文语音播放,这是我完全没想到的需求。有同学反馈说术语有英文,但是自己不会读,语音输入的时候想先学一下它怎么读。如果每次都要把单词复制到另一个页面去听,太麻烦了,所以我直接在术语旁边加了语音播放。像 Link 这样简单的词,或者 Minimalism 这样比较复杂的词,都可以点击播放,跟着复述学习。

现代简约 Minimalism 的详情页,英文术语旁边有语音播放按钮

第三个是 VibeHub Skill。我最开始做它,只是想让 Agent 能直接读到网站上所有术语的信息,给用户定制学习路径,因为我觉得 Agent 的规划能力比较强。但发布之后用户的反馈是另一个方向:在 Vibe Coding 的过程中,如果输入了一个含糊的需求,希望 AI 在完成需求的同时,把正确的术语指正出来。

比如跟 AI 说「鼠标放到这个按钮的时候,显示一个小提示告诉用户它是做什么的」。我们知道怎么表述这个需求,但想同时学习它的术语。安装 VibeHub Skill 之后,AI 除了会把功能实现出来,还会告诉我们:鼠标悬停或者键盘聚焦时显示的短提示通常叫 Tooltip,并且附上指向网站对应术语的链接。

VibeHub Skill 页面的演示,Agent 在完成功能的同时指出这种短提示叫 Tooltip

点击回复里的术语链接,就会跳到网站上对应的术语解释。

点击 Tooltip 术语后弹出解释浮层,可以再打开完整词条

安装方式是把下面这段话发给正在使用的 Agent:

https://github.com/oil-oil/vibe-hub-skill

帮我安装这个仓库里的 skills/vibehub Skill。

Skill 页面底部的安装指令,可以一键复制

这些需求都来自用户,相当于用户在指导我怎么做产品,产品自然会越来越符合大家的需要。当然我自己也会筛选,判断用户表达的是不是真正的需求。但前提是入口足够大,自己才有筛选的空间,不然全是一个人在那里猜。

新术语和文案打磨

最近 VibeHub 上线了很多新术语,比如 AI 幻觉,AI 相关的术语新增了一批。

VibeHub 的 AI 术语分类,新增了 Sub-agent、工具调用、ReAct、Agent 循环等条目

除此以外,我还把现有术语的描述重新打磨了一遍。之前的描述有时会用别的术语来解释当前的术语,我觉得这不可取:每一个术语最好是没有任何前置依赖就能学懂。所以这些文案和底下的事例我都认真修改了一次。

提交 Commit 的详情页,描述直接说明它是什么,不依赖其他术语