前两天我上线了一个 Vibe Coding 术语网站，叫 VibeHub。在网站上可以学习 Vibe Coding 相关的术语，比如前端的组件、后端的技术名词，还有产品、技术栈和 AI 相关的概念。
点击术语进入详情页之后，可以看到比较详细的图解，还有一些小的练习题。
这个网站上线第一天就有 2000 多个用户访问，我也在社媒上收到了一些反馈。这两天我根据反馈把网站优化了一版，这篇文章讲讲具体改了哪些地方。
列表页的信息密度
第一个反馈是列表页的密度太高，一个卡片上要展示很多信息。这次我把术语名字放得更大，右侧的英文从灰色改成了蓝色，中英文对照起来看更清楚。
第二个改动是卡片上的描述。之前卡片放的是术语的正式描述，但只看描述，大家不一定能联想到自己要找的术语。所以我把它换成了我们平时会跟 AI 描述需求时说的话。比如链接这个术语，卡片上写的是「这段文字要能让人点，点了跳到另一个页面」，看到这句话就知道它对应的术语是链接 Link。
再举一个例子。鼠标放上去的时候让按钮变个色，让人知道它能点，这个操作对应的术语是悬停，英文叫 hover。点进详情页可以看到它的完整介绍和原理，有可以互动的演示，还会讲什么时候可以用、什么时候不要用。
详情页里还会介绍相关的属性，比如哪个元素会触发 hover 效果、反馈是什么样的、过渡时间是多少，以及它的一些常见变体。
术语的可视化示例
除了列表卡片的展示，我还优化了一批术语内部的可视化。之前产品相关的术语介绍比较简单，这次给 PRD 做了可视化的示例，把 PRD 到底是什么讲清楚。
MVP 也是一样，它是一种最小成本的验证，页面里用示例说明了完整产品和 MVP 之间的区别。后端相关的身份认证也有完整的示例，通过图解把概念对应到实际的登录流程上，帮助大家理解。
设计风格分类里的示例也变得更丰富，比如现代简约这个风格，现在提供了更多的示例和反例，方便大家学习。
VibeHub Skill
还有同学反馈，能不能把网站上的知识变成 Agent 能直接读取的信息，比如做成一个 Skill。这次我把这个 Skill 做出来了。
网站的 Vibe-Hub Skill 页面里有安装入口，点击复制安装指令，然后到正在使用的 Agent 里粘贴发送，它就会完成安装。安装指令是下面这段话：
https://github.com/oil-oil/vibe-hub-skill
帮我安装这个仓库里的 skills/vibehub Skill。
我以 WorkBuddy 为例演示了一遍，粘贴发送之后它就自己安装好了。安装完成之后，输入斜杠 vibehub 就可以触发这个 Skill。
这个 Skill 的作用是让 Agent 直接读取网站上的术语信息，网站给它提供了 API，需要哪个条目就读取哪个条目。比如我问它「鼠标变成一个手的交互叫做啥」，它会读取网站上的内容，告诉我这种光标对应的 CSS 写法是 cursor: grab 和 cursor: grabbing，同时区分它和 pointer 的差别。
除了让 Agent 直接讲，回复里也可以带网站的外链。在 Codex 里点击链接，它会用内置浏览器直接打开对应的术语页面。
这样日常开发完一个项目，遇到不了解的名词，可以直接触发这个 Skill，跳到网站上对应的术语里去学习。也可以让 AI 结合这些术语定制一些课程，帮助自己系统地学习。
后续我会继续优化术语的描述，让例子变得更直观，也会补充更多的术语。大家有什么功能需求，可以在社媒上给我评论。