我做了一个 Vibe Coding 术语学习站：VibeHub

最近两天，用 Vibe Coding 的方式做了一个专门用来学习 Vibe Coding 术语的网站：vibe-hub.org。

上线第一天，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 就能装上：

vibe-hub.org/skill

Skill 可以让 Agent 拿到网站上的术语信息，也能拿到准确链接，在回复里内联，或者在内置浏览器里打开。另外还带了一个本地练习框架，Agent 可以参考术语和你的学习需求，定制小练习。

第一版之后又改了什么

第一版时间太赶，文案有点 AI 味儿。昨天把词条样式和文案又打磨了一遍，示例和演示图更清楚一些，读起来也更顺。性能也做了一轮优化。

如果有缺少的词条，欢迎反馈补充。后续还会做更友好的学习路径规划。

链接

• 网站：vibe-hub.org
• Skill：vibe-hub.org/skill

希望 VibeHub 真的能帮到你。