我搭建的一站式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 真的能帮到你。