Open the interactive UI vocabulary map
Why UI vocabulary matters
When a non-technical founder asks an AI coding tool to "make the page better," the result is usually generic. The AI does not know whether the person means the header, navigation, hero section, call-to-action, card layout, form, footer, modal, or mobile menu.
The fastest upgrade in vibe coding is not learning every programming concept. It is learning enough interface language to describe what you want with precision.
The first screen: names you should know
Header: the top identity area of a page. It usually contains the logo, navigation, theme switcher, contact button, or account menu.
Navigation bar or navbar: the group of links that helps users move between main pages. On a portfolio site this might be Home, About, Ventures, Speaking, Insights, Media, and Contact.
Hamburger menu: the three-line menu icon used mostly on mobile. It opens a hidden navigation drawer or menu panel.
Hero section: the first major section of a page. It tells the user what this page is about and why they should care. A good hero has a clear headline, supporting copy, and one primary action.
CTA button: call-to-action button. Examples: Book a session, Read essay, Download worksheet, Contact me, Start audit.
Common layout elements
Card: a contained block used for repeated items such as posts, services, features, testimonials, or case studies. Cards work best when each card has the same structure: label, title, short description, and action.
Grid: a layout that places items in rows and columns. Use it for cards, logos, services, or frameworks.
Section: a full-width content area with one clear purpose. Avoid putting everything into floating cards; a professional page uses sections to create rhythm.
Sidebar: a side column used for navigation, filters, contents list, admin menus, or supporting information.
Footer: the bottom area of the site. It usually repeats important links, contact details, social links, copyright, and credibility signals.
Interaction elements
Back button: returns the user to the previous page or parent page. In articles, "Back to insights" is clearer than a generic arrow.
Dropdown: a compact control that reveals options. Use it for filters, account menus, or grouped actions.
Tabs: switch between related views on the same page, such as All, Featured, Workshops, Articles, and Tools.
Modal: a dialog that appears above the page. Use it for focused tasks such as editing, confirming, uploading, or collecting a short form. Do not use modals for long reading experiences.
Tooltip: a small explanation that appears on hover or focus. Use it for icons or controls that are not obvious.
States that make an interface feel professional
Beginners often ask AI to design only the happy path. Professional interfaces also include states:
Empty state: what users see when no data exists yet.
Loading state: what appears while content is being fetched or generated.
Error state: what happens when something fails, with a useful next step.
Success state: confirmation that the action worked.
Disabled state: controls that cannot be used yet, with a reason if needed.
A better prompt for AI coding tools
Instead of saying: "Make this dashboard look better."
Say: "Improve the dashboard layout. Keep the existing data. Add a compact header with page title and primary CTA, a left sidebar for navigation, metric cards in a responsive grid, a filter bar above the table, clear empty/loading/error states, and a footer note with last updated time. Use restrained spacing, consistent typography, and mobile-friendly behavior."
How to review AI-generated UI
Can a new user understand the page in five seconds?
Is the primary action visually obvious?
Are labels specific, or are they generic words like Submit and Learn more?
Does the mobile menu work?
Do long titles fit without breaking the layout?
Are empty, loading, error, and success states handled?
Does the design match the audience: student, entrepreneur, executive, admin, or public visitor?
Research anchors
This vocabulary is consistent with mature design systems and accessibility guidance such as GOV.UK Design System components, Material Design components, Apple Human Interface Guidelines, and MDN navigation accessibility guidance.
The practical takeaway
Vibe coding becomes much more powerful when you can name the interface you want. Clear UI vocabulary turns vague taste into an actionable instruction. That is how a founder moves from "make it nice" to "build a usable product screen."
Resource link
Open the companion visual: Interactive UI vocabulary map. It shows the header, navbar, hamburger menu, hero section, cards, states, and footer in one animated reference.