VibeHub

VibeHub 是一个面向 Vibe Coding 用户的术语图鉴网站，主题为”用大白话找准前端、后端、AI 术语”。Vibe Coding 让越来越多不同专业背景的人直接参与产品创作，但跨出自己熟悉的领域时，常出现”知道自己想做什么，却说不清楚”的情况，例如后端开发者说不清自己需要的是卡片网格、抽屉、悬浮导航、骨架屏还是页面转场。VibeHub 将 Vibe Coding 时的常用术语集中整理为图鉴，每个概念配有对应的界面示例、使用场景和常见边界，帮助用户从”我想要这种感觉”逐步理清”我具体需要什么”，更准确地描述需求、与 AI 沟通。据作者介绍，该网站本身以 Vibe Coding 方式搭建。

VibeHub 的核心功能

• 分类术语图鉴： 将 Vibe Coding 常用术语按主题分类整理，覆盖网页基础（Frontend、Component、State、HTML、CSS、DOM、无障碍、语义化标签等）、小程序（Mini Program、WXML、WXSS、rpx、页面生命周期、分包加载）、表单控件（输入框、单选、复选、日期选择、级联选择、上传等）、内容展示（表格、卡片、时间轴、走马灯、图表、筛选等）、弹窗与提示（Alert、Toast、Modal、Drawer、Tooltip、骨架屏等）、导航、页面版块、页面布局、CSS 布局、字体排版、视觉样式、动效与指针交互等十余个分类、一百余条术语，每条术语设有独立详情页。
• 场景化大白话描述： 每条术语均以用户口吻的自然语言描述呈现（如”把这句别人的原话单独突出一下，标明是谁说的”对应引用 Quote），并标注使用场景与常见边界，例如占位符条目说明 Email 标签必须保持可见、不能仅靠占位符提示，帮助用户把模糊表达转成对 AI 的明确指令。
• 相邻概念连续浏览： 进入一个术语条目后，可通过左右切换在相邻概念之间快速浏览；网站定位为不要求系统学习、也不只在使用卡住时才用的资源，支持平时逐条翻看组件样式、设计风格或陌生概念。
• 面向 AI Agent 的 VibeHub Skill： 提供 vibe-hub-skill，在 Skill 页面复制安装命令即可装入支持的 AI Agent；Agent 可获取站内术语信息与准确链接，在回复中内联展示或在内置浏览器中打开，并附带本地练习框架，Agent 可参考术语与用户的学习需求定制小练习。

VibeHub 的适用人群与交付方式

• 跨专业 Vibe Coding 用户： 面向用 AI 参与产品创作但缺少对应领域知识的用户，例如做前端的后端开发者、需要描述接口、鉴权、数据库与部署流程的设计师和产品经理；既可在遇到表达困难时查询术语，也可作为日常浏览学习材料，反复接触后把抽象术语变成可识别、可使用的表达。
• 网页端与双语交付： 以网站形式提供，术语条目分中文与英文双语版本，每条术语对应独立的英文详情页；站点由独立开发者维护并持续补充内容，VibeHub Skill 的安装命令与文档在站内 Skill 页面提供。