你明确要学一个主题
用具体页面学懂视觉层级
只有主题明确，而且页面有助于理解时，Agent 才会打开课程。
为独立创作者准备把想法变成
把想法变成
可以分享的作品
先观察两种信息层级，再亲手调整标题、留白和次要信息。
免费开始Vibe-Hub Skill
使用任何 Agent
学懂 Vibe Coding 术语
看不懂 Agent 回复里的专业说法，可以直接让它结合当前任务用大白话解释。 也可以找术语、学主题、结合项目练习，或者推荐下一步。
198个可视化术语
18条项目学习路线
5项核心能力
这个 Skill 能帮你做什么
看懂 Agent 的说法开发过程中遇到陌生术语，直接让 Agent 结合当前任务用大白话解释。
- 找到术语描述想实现的效果，Agent 告诉你它叫什么。
- 学习一个主题解释概念、对比差异，需要时再打开课程。
- 结合项目学习根据当前页面和代码，只讲下一步需要的知识。
- 推荐下一步不知道从哪开始时，Agent 主动给出几个具体方向。
一分钟安装
复制这段话，发给你的 Agent
Agent 会打开 GitHub 仓库并完成安装。
https://github.com/oil-oil/vibe-hub-skill帮我安装这个仓库里的 skills/vibehub Skill。开发中随时可用
看不懂 Agent 的回复，直接让它用大白话解释
不用先知道哪个词是术语。VibeHub 会从原话里找到关键概念， 结合当前任务说明它为什么出现、负责什么，以及你接下来可以怎样回复。
- 01 · Agent 原话
“这个表单需要把 loading、错误和提交结果放进状态管理。”
- 02 · 通俗解释
状态管理就是把页面正在提交、失败还是成功这些变化记住， 界面才能在正确的时间显示加载和错误反馈。
- 03 · 继续推进
“先列出这个表单现有的状态，再只改提交反馈。”
具体怎么学
看看两种具体的学习过程
明确学习一个主题时，可以打开课程；带着项目学习时，练习会根据当前页面生成。
你正在做自己的项目
本地生成结合当前首页练习视觉层级
题目、选项和反馈会根据当前项目生成。
学习主题 · 视觉层级先决定首屏
先决定首屏
最重要的信息
Agent 会用当前页面生成问题、选项和反馈。
“这个首页看起来不够精致，我该先改什么？”
先比较两种首屏，再说说你希望用户第一眼看到什么。
互动文件保存在本机。Agent 如何处理项目内容，以所用产品的设置为准。
开始使用
安装后可以直接这样说
看不懂 Agent 的回复、不知道术语，甚至不知道该学什么，都可以直接开始。
Agent 说这个表单需要做状态管理。用大白话解释一下，它为什么和当前页面有关？
Agent 会结合当前任务解释含义和边界，并告诉你接下来怎样判断或回复。
我想让设置改完立刻生效，这种控件叫什么？
Agent 会找到对应术语，并说明它适合什么情况。
我想学视觉层级，用一个页面例子带我看懂。
主题明确后，Agent 才会按需要打开课程或互动。
看看当前首页，告诉我下一步最值得学的一个概念。
Agent 会结合当前项目讲解，并帮你应用和验证。