Vibe Coding Glossary.
Stop getting confused when developers talk. Browse our A-Z dictionary of core terms you need to know when working with AI.
A
Accordion
A vertical stack of interactive headings used to toggle the display of further information. Keeps the page clean without hiding important content. See Accordion Component
Agentic AI
AI systems that don't just answer questions, but can take actions, use tools (like writing files or searching the web), and follow a plan to achieve a goal autonomously.
AI Orchestration
The practice of using multiple AI agents or models in a coordinated workflow to accomplish complex tasks. See AI Orchestration Guide
Alert
A way of informing the user of important changes, errors, or warnings in a prominent way without completely interrupting their workflow. See Alert Component
API (Application Programming Interface)
A way for two pieces of software to talk to each other. For example, your frontend asking a backend database for user info.
Artifacts
Standalone pieces of content generated by the AI - like a full HTML file, a React component, or a Markdown document. Useful because you can copy them whole instead of picking apart a chat response.
Avatar
A graphical representation of a user: usually a photo, illustration, or their initials. Often found in headers or comment sections. See Avatar Component
B
Backend
The 'under the hood' part of a website or app (databases, servers, logic) that users don't see.
Bento Grid
A layout style inspired by Japanese bento boxes, using a grid of varying-sized rounded rectangles to display content hierarchically and neatly.
Breadcrumbs
A secondary navigation scheme that reveals the user's location in a website or web application. See Breadcrumbs Component
Breakpoint
The specific screen width (like 768px for tablets) where a website's layout changes to fit the device. Critical for Responsive Design.
Button
An interactive element that triggers an action when clicked. See Button Component
C
Call to Action (CTA)
A button or link designed to prompt the user to take a specific action (e.g., 'Sign Up', 'Buy Now').
Codebase
The complete collection of source code for an application or website.
Component
A reusable piece of a user interface, like a button, card, or navigation bar. In vibe coding, you often ask the AI to 'build a hero component.' See First Vibe Components
Context Transfer
The process of moving an AI's working memory or conversation history from one model (e.g., Gemini) to another (e.g., Claude) without losing context. See Transfer Guide
Context Window
The maximum amount of text (tokens) an AI can process in one go. If your prompt is too long or you've been chatting too much, the AI 'forgets' earlier instructions and output quality drops drastically.
CSS Variables (Custom Properties)
Tokens defined in CSS (e.g., --forest: #1C3D2E) that allow you to change colors or spacing globally across an entire site simply by updating one value.
D
Dark Mode
An alternate theme using light text on a dark background. Build it using CSS variables from day one so you don't have to rewrite everything later.
Design System
A comprehensive collection of reusable components, standards, and documentation (like a Style Guide) that define the visual language of a project. See Design System Blueprint
Design Tokens
The variables that define your visual language - colors, spacing, font sizes, border radii. In CSS: --color-primary, --space-md. Tokens make systems scalable and consistent.
DOM (Document Object Model)
The structure of a webpage as the browser sees it. When AI writes JavaScript to change the page, it's manipulating the DOM.
F
Few-Shot Prompting
Providing the AI with a few examples of what you want before asking it to do the task. For example, showing it a button design before asking it to build a full form. Always better than Zero-Shot.
FIRE Framework
A structured prompt engineering framework used to extract high-quality, actionable outputs from AI models. See FIRE Framework
Flexbox & Grid
CSS layout systems. Flexbox is great for 1D layouts (rows or columns), while Grid handles 2D layouts (rows and columns simultaneously). Mention them to get precise layouts from your AI.
Framework
A pre-built structure that makes building websites faster (e.g., Astro, React, Next.js).
Frontend
The part of the website users interact with directly (HTML, CSS, JavaScript). What you mostly vibe code when designing.
G
Glassmorphism
A frosted-glass effect created with background blur (backdrop-filter), semi-transparent fills, and a subtle white border. Makes elements feel layered and modern.
Google Antigravity (AGY)
An advanced agentic coding environment developed by Google Deepmind that allows AI to autonomously build, test, and deploy applications. See Troubleshooting Guide
H
Hallucination
When the AI confidently makes something up. In coding, this often looks like using CSS classes that don't exist in your framework, or calling functions that haven't been written.
Hero Section
The large, prominent banner at the very top of a website, usually containing a headline, a subheadline, and a CTA. It's the first thing users see.
Hover State
The visual change of an interactive element when a user places their mouse cursor over it. (See also Micro-animations)
Humanizer
An AI system or specific system prompt designed to convert stiff, robotic AI-generated text into a natural, conversational, and human-like tone. See Humanizer Skill
K
Keyword Research
The process of finding search terms that users enter into search engines, commonly optimized using AI tools like NotebookLM and Ubersuggest. See AI Keyword Research
L
Lazy Loading
A technique where images or content only load when they are about to appear on screen, improving page load speed.
LLM (Large Language Model)
The AI brain (like Claude, ChatGPT, or Gemini) that you are vibe coding with. It understands your natural language and outputs code.
M
MCP (Model Context Protocol)
A standard protocol that allows AI models (like Claude) to securely connect to external tools, databases, and local file systems. See MCP Setup Guide
Micro-animations
Tiny, intentional transitions - button hover states, fade-ins, slide-ups. They make an interface feel alive without being distracting. 150–300ms is the sweet spot.
Mockup / Wireframe
A visual draft of what a website will look like. Wireframes are basic sketches, mockups are detailed. In vibe coding, you can feed an image of a mockup to the AI (Image-to-Code) to generate the UI.
N
Negative Space
The empty space between and around elements. More whitespace = higher perceived quality. Never fill every pixel - breathing room is a design decision.
Neumorphism
Elements that look pushed into or extruded from the background. Achieved with two-sided box shadows - one light, one dark. Very tactile, best used sparingly.
P
Padding & Margin
Spacing in web design. Padding is space *inside* an element's border, margin is space *outside* it. (See also Spacing System)
PRD (Product Requirements Document)
An essential document that outlines what you are building, who it is for, and how it should function. The foundational blueprint before writing any code. See PRD Blueprint
Prompt Chaining
Breaking a complex task into sequential prompts. Instead of 'build a website', ask it to 'build the HTML', then 'add CSS', then 'add interactions'.
R
README
The front page of your codebase (usually README.md). An essential document that explains what the project does, how to install it, and how to run it locally. See README Blueprint
Repository (Repo)
A storage location for your software project, usually on GitHub. It tracks all changes made to your Codebase.
Responsive Design
A layout that adapts cleanly to all screen sizes using relative units, flexbox, grid, and media queries. Mobile-first is the standard - design small, then scale up.
S
Second Brain
A personal knowledge management system (often built in Notion or Obsidian) that acts as an external digital repository for your ideas and workflows. See Second Brain Setup
Semantic HTML
Using HTML tags that describe their meaning (like <nav>, <article>, <header>) instead of just generic <div>s. Crucial for accessibility and SEO.
SEO (Search Engine Optimization)
The practice of optimizing web pages to rank higher in search engines, which can be heavily automated using AI auditing tools. See AI SEO Auditor
Sitemap
An essential planning document listing all pages on a website, showing their hierarchy and relationships, used for planning site structure and navigation. See Sitemap Blueprint
Spacing System
A set of consistent spacing values (e.g., 4px, 8px, 16px, 24px, 32px). Padding, margins, and gaps should always come from this scale - never random px values.
Style Guide
An essential document detailing the rules for how a brand or project should look, including colors, typography, and logo usage. See Style Guide Blueprint
System Prompt
The overarching set of rules and instructions you give to an AI agent to define its behavior, role, and output format before you start coding. Learn about creating skills.
T
Tailwind CSS
A utility-first CSS framework incredibly popular in vibe coding because AIs are exceptionally good at writing it.
Technical Specification (Tech Spec)
An essential document describing *how* you will build a feature, detailing the architecture, database schema, and tools to be used. See Tech Spec Blueprint
Token Limit
Similar to context window, but specifically refers to the hard limit on the number of tokens (words/pieces of words) the AI can read or generate in a single request.
Typography Scale
A set of font sizes based on a mathematical ratio (e.g., 1.25). Defines h1 through body text so your hierarchy always feels proportional, not arbitrary.
U
UI (User Interface)
The visual elements users interact with—buttons, menus, layouts, and typography.
User Flow / Flowchart
An essential planning document or diagram showing the path a user takes through an app or website to complete a specific task. See User Flow Blueprint
UX (User Experience)
How a person feels when interacting with a system. Is it intuitive, fast, and delightful?
V
Vibe Coding
The act of using natural language to direct AI agents to build software for you. You provide the 'vibe' (the design intent, the logic flow), and the AI handles the syntax. Check out the Vibe Coding Kit
W
White Space
Often used interchangeably with Negative Space.
Wispr Flow
A fast, privacy-focused voice dictation tool used to seamlessly translate spoken thoughts into text, heavily utilized in Vibe Coding. See Wispr Flow Setup
Workflow Automation
Connecting multiple apps and AI tools (via platforms like Zapier or Make) to run tasks automatically without human intervention. See Automation Guide
Y
YourLife OS
A comprehensive digital life management system designed to track habits, goals, and weekly reviews. See YourLife OS Workflow
Z
Zero-Shot Prompting
Asking the AI to do a task without giving it any examples. It relies entirely on its pre-trained knowledge. Good for simple tasks, risky for complex designs.