术语学习示例
先看懂什么是视觉层级
Agent 会用具体页面展示差异，再解释术语。
为独立创作者准备把想法变成
把想法变成
可以分享的作品
先观察两种信息层级，再亲手调整标题、留白和次要信息。
免费开始Vibe-Hub Skill
使用任何 Agent
学懂 Vibe Coding 术语
说出你想做什么，Agent 会从 VibeHub 找到相关术语， 用解释、学习路径或当前项目里的互动帮助你理解。
189可视化术语
18项目学习路径
∞适配任何 Agent
你想学习什么？
- 了解一个术语说出想做的效果，Agent 帮你找到对应的名称。
- 比较相似概念放在真实场景里对比，看看它们分别适合什么情况。
- 安排学习路径说出最终目标，Agent 帮你安排学习顺序。
- 结合项目学习围绕正在做的项目，只学习下一步需要的知识。
安装
把这段话发给你的 Agent
Agent 会读取仓库并安装 Skill，不需要你手动复制文件。
https://github.com/oil-oil/vibe-hub-skill帮我安装这个仓库里的 skills/vibehub Skill。安装后的效果
Agent 会根据问题选择学习方式
简单的问题直接解释；需要比较时生成互动；目标较大时，再安排学习路径。
项目学习示例
安装后生成结合当前首页理解视觉层级
Agent 会根据当前项目重新编写问题、选项和反馈。
正在学习 · 视觉层级先决定首屏
先决定首屏
最重要的信息
Agent 会根据当前页面重新组织问题、选项和反馈。
“这个首页看起来不够精致，我该先改什么？”
先比较两种首屏，再说说你希望用户第一眼看到什么。
互动文件保存在本机。Agent 如何处理项目内容，以所用产品的设置为准。
开始使用
安装后可以直接这样说
说清楚目标就可以，不需要先知道术语。
我想让设置改完立刻生效，这种控件叫什么？
Switch 和 Checkbox 有什么区别？给我一个可以直接比较的例子。
我想从零做出并部署一个网站，帮我安排需要理解的术语。
继续做这个首页。每次只告诉我下一步最值得理解的知识。