Vibe Coding术语学习站 - VibeHub

最近两天，我通过 Vibe Coding 的方式，搭建了一个专门用于学习 Vibe Coding 术语的网站：vibe-hub.org。

上线第一天，Google Analytics 和 Vercel Analytics 的访问量合计超过 2000 次，感谢大家的关注。

它解决什么问题

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 真的能帮到你。