最近两天，我 Vibe Coding 了一个用来学 Vibe Coding 术语的网站：VibeHub｜Vibe Coding 术语图鉴 · 更准确向 AI 表达需求
上线第一天，Google Analytics 和 Vercel Analytics 加起来访问量到了 2k+。谢谢大家的支持。
它解决什么问题
Vibe Coding 让越来越多不同专业背景的人开始直接参与产品创作。但跨出自己熟悉的领域时，经常会卡在一个很实际的问题上：知道自己想做什么，却不知道该怎么准确说出来。
后端同学做前端时，可能会说「这里再高级一点」「交互更顺滑一些」，却说不清自己要的是卡片网格、抽屉、悬浮导航、骨架屏，还是页面转场。
设计师和产品在做数据相关能力时，也可能不知道该怎么描述接口、鉴权、数据库和部署流程。表达越模糊，AI 就越只能猜，结果也越难贴近最初的想法。
这些是我自己在分享和咨询里常碰到的情况。所以 VibeHub 想帮不同背景的 Vibe Coding 用户，在跨专业边界时，更准确地描述需求、和 AI 沟通，也更清楚自己正在做什么产品。
网站里有什么
网站把 Vibe Coding 时常用的术语整理在一起，覆盖前端组件、页面布局、视觉与交互、CSS 与网页基础、后端与网络、数据与账号、部署排错、Git 和设计风格。
每个概念都有对应的界面示例、使用场景和常见边界，帮你从「我想要这种感觉」，慢慢说清楚「我具体需要什么」。
进入一个条目以后，可以继续左右切换，在相邻概念之间快速浏览。它不要求你坐下来系统学习，也不只在卡住时才有用。
平时有空就可以打开刷一刷：看一个组件长什么样，了解一种设计风格，或者顺着一个陌生概念继续往下看。反复接触以后，这些原本抽象的术语会逐渐变成你能识别、也能用上的表达。
大家反馈后，我加了 VibeHub Skill
上线后收到很多反馈：大家希望 AI Agent 能直接读到站点里的信息，把这些知识交给 Agent，自己学起来也更顺手。
所以我很快补了 vibe-hub-skill。在 Skill 页面复制安装命令，给任何支持的 AI Agent 就能装上：
VibeHub Skill｜用任何 Agent 学懂 Vibe Coding 术语
Skill 可以让 Agent 拿到网站上的术语信息，也能拿到准确链接，在回复里内联，或者在内置浏览器里打开。另外还带了一个本地练习框架，Agent 可以参考术语和你的学习需求，定制小练习。
第一版之后又改了什么
第一版时间太赶，文案有点 AI 味儿。昨天我把词条样式和文案又打磨了一遍，示例和演示图更清楚一些，读起来也更顺。性能也做了一轮优化。
如果有缺少的词条，欢迎在页面底部任意渠道联系我补充。后续我还会做更友好的学习路径规划。
链接
希望 VibeHub 真的能帮到你。