VibeHub Is a Browseable Glossary That Teaches Non-Engineers the Right Words for AI Coding
Over the past couple of days, I vibe-coded a website for learning Vibe Coding terminology: https://vibe-hub.org
On its first day online, combined traffic from Google Analytics and Vercel Analytics reached over 2,000 visits. Thank you all for your support.
What problem it solves
Vibe Coding is enabling more and more people from different professional backgrounds to participate directly in product creation. But when stepping outside their own field, they often get stuck on a very practical problem: knowing what they want to make, but not knowing how to say it precisely.
When backend developers work on frontend tasks, they might say things like "make this more premium" or "make the interaction smoother," without being able to specify whether they need a card grid, a drawer, a sticky navigation, a skeleton screen, or a page transition.
When designers and product people work on data-related features, they may not know how to describe APIs, authentication, databases, or deployment processes. The vaguer the expression, the more the AI has to guess, and the harder it is for the result to match the original idea.
These are situations I often encounter in my own sharing and consulting. So VibeHub aims to help Vibe Coding users from different backgrounds describe their requirements more accurately when crossing professional boundaries, communicate better with AI, and understand more clearly what product they are building.
What's inside the site
The site organizes commonly used Vibe Coding terminology, covering frontend components, page layouts, visuals and interactions, CSS and web fundamentals, backend and networking, data and accounts, deployment and debugging, Git, and design styles.
Each concept comes with a corresponding interface example, usage scenario, and common boundaries, helping you move from "I want this kind of feeling" toward articulating "what I specifically need."
After entering an entry, you can continue swiping left and right to quickly browse between adjacent concepts. It doesn't require you to sit down and study systematically, nor is it only useful when you're stuck.
You can open it and browse whenever you have time: see what a component looks like, learn about a design style, or follow an unfamiliar concept further. With repeated exposure, these originally abstract terms gradually become expressions you can recognize and use.
After feedback, I added the VibeHub Skill
After launch, I received a lot of feedback: people wanted AI agents to be able to directly read the information on the site, handing this knowledge over to the agent so they could learn more smoothly themselves.
So I quickly added vibe-hub-skill. Copy the installation command on the Skill page and install it on any supported AI agent:
The Skill lets the agent access the terminology information on the site, as well as accurate links, which it can inline in replies or open in its built-in browser. It also comes with a local practice framework, where the agent can reference the terminology and your learning needs to customize small exercises.
What changed after the first version
The first version was rushed, and the copy had a bit of an AI flavor. Yesterday I polished the entry styles and copy again, making the examples and demo images clearer and the text smoother to read. I also did a round of performance optimization.
If there are missing entries, feel free to contact me through any channel at the bottom of the page to suggest additions. I'll also work on friendlier learning path planning later.
Links
- Website: https://vibe-hub.org
- Skill: https://vibe-hub.org/skill
I hope VibeHub can truly help you.