我最近做了一个 Vibe Coding 术语网站：VibeHub。它处理的是一个很具体的表达问题：我们知道页面上哪里需要调整，却不知道那个模块叫什么，很难把需求准确地告诉 AI。
我之前参与过一些线下分享，发现很多人跟 AI 表达需求的时候，不知道某个模块具体叫什么。比如官网里常见的首屏、行动号召 CTA、用户声音、页头这些模块，我们想调整它，却不知道它的名字。所以我把这些常用组件和 Vibe Coding 相关的术语汇总在一起，做成了这个小网站。
先把术语放回实际页面
只给术语和定义还不够，真正修改页面时，我们还要知道它在什么场景出现、由哪些部分组成。因此打开一个术语，比如首屏，页面上方会先展示示例，下面再说明：
- 什么时候可以用，什么时候不用；
- 组成结构，比如首屏由主标题、副文案、CTA 按钮、主视觉组成；
- 常见的变体有哪些；
- 经典的使用场景，比如 SaaS 产品首页、个人作品集、App 下载落地页。
在详情页按左右两侧的按钮，可以切换到下一张卡片。比如切到行动号召，它会说明 CTA 是让用户清楚下一步可以执行什么操作，什么时候要用——一个页面只留一个 CTA，按钮底下补一句消除顾虑的话。
我以前会去查看组件库的规范，确认一个组件适合什么情况。比如复选框适合几个条件自由组合、需要多选或者批量操作的场景；选项互斥时不适合使用，选完需要立即生效时应该换成开关。VibeHub 把这些判断放进详情页，查询一个词时也能看到它的使用边界。
一个术语会带出下一个问题
学习过程中经常会从一个词遇到另一个词。比如复选框的说明里提到开关，点击关联术语就会进入开关的详情页。页面顶部的面包屑会保留来源，看完以后还能回到复选框继续阅读。这种双向关联让术语之间形成连续的浏览路径。
范围从页面延伸到开发流程
Vibe Coding 里的表达问题不只出现在页面组件。项目开始运行以后，还会遇到域名、DNS 解析、网址、API 请求、HTTP 请求和 JSON 数据，所以网站里也加入了后端分类。
我之前参加直播时，很多同学问 Git 到底怎么使用。刚开始尝试 Vibe Coding 时，修改可能覆盖之前的版本，遇到问题以后也不知道怎么回滚。为了解释这些操作，网站里还整理了版本控制、提交和分支等 Git 常用术语。
参考设计也需要准确描述
还有一类情况是看到了喜欢的参考页面，却不知道怎么描述它的风格。网站为这些视觉方向单独设置了设计风格分类。
打开一个风格，比如现代简约，底下会讲它的设计原则，还有一段提示词，可以复制过去直接给 AI 使用。
像 B2B 企业官网这类网站范式也有收录，同样给出了示例和设计原则。
VibeHub 目前先覆盖前端组件、后端、Git 和设计风格。每个术语都提供示例、使用场景、组成结构和相关概念，可以在实际描述需求时查询。后续我还会继续补充不同编程语言和 AI 相关的技术名词。