Chapter 1: The Translation Layer - What Everything Is Actually Called

The Problem Nobody Talks About

You know exactly what you want. You can see it in your head. You might even have a screenshot of a website that does something similar. But when you try to tell an AI agent to build it, the conversation goes like this:

You: “Make that top part sticky when you scroll.” AI: “I’ll add position: sticky to the header.” You: “Wait, what’s a header? And what do you mean by position?”

This is the translation layer problem. You have visual intent but lack technical vocabulary. The AI speaks in components, properties, and states. You speak in “that thing at the top” and “the clicky part.”

This chapter solves that gap. Not by making you technical, but by giving you the minimum vocabulary to communicate what you see and what you want.

The Core Principle

You don’t need to know how things work. You need to know what they’re called.

When I built my first site with AI help, I spent 20 minutes trying to describe “that space between the boxes.” The AI kept giving me solutions that didn’t work. Finally, someone told me the word: “gap” or “margin.” Once I said “increase the gap between cards to 20 pixels,” the AI immediately understood.

That’s the translation layer in action.

The Essential Visual Vocabulary (25 Terms You Actually Need)

Part 1: Components (The “Things” On Your Page)

Header: The top section of your page, usually contains logo and navigation

When you want it: “Make the header sticky” or “Change the header background color”
Common ask: “Keep the header visible while scrolling” (that’s a sticky header)

Navigation / Nav: The menu that lets users move between pages

When you want it: “Add a navigation menu” or “Make the nav collapse on mobile”
Common variations: horizontal nav, hamburger menu (mobile), dropdown nav

Hero: The big, prominent section at the top of a page (usually with headline and call-to-action)

When you want it: “Create a hero section with a background image”
Usually includes: large heading, subheading, button, and background image

Section: A distinct content area on your page

When you want it: “Add a new section for testimonials”
Think of it like paragraphs, but for page layout

Card: A container that groups related information (often with image, title, description)

When you want it: “Display the products as cards in a grid”
Common uses: product displays, blog post previews, team member profiles

Footer: The bottom section, usually contains links, contact info, copyright

When you want it: “Add a footer with social media links”
Typically appears on every page

Modal / Popup: An overlay that appears on top of your page (you’ve seen these for newsletter signups)

When you want it: “Show a modal when they click the button”
Can be closed, usually darkens the background

Sidebar: A vertical column beside your main content

When you want it: “Add a sidebar with filters”
Common uses: navigation, filters, related content

Button: The clickable element that triggers actions

When you want it: “Add a call-to-action button”
States you might want: default, hover (when mouse is over it), active (when clicked), disabled

Form: Collection of input fields (text boxes, dropdowns, checkboxes, etc.)

When you want it: “Create a contact form”
Common inputs: text field, email field, dropdown/select, checkbox, radio button, text area (multi-line)

Part 2: Layout Concepts (How Things Are Arranged)

Grid: Arrangement of items in rows and columns

When you want it: “Display these cards in a 3-column grid”
Responsive grids change columns based on screen size (3 columns on desktop, 1 on mobile)

Flexbox: A way to arrange items in a row or column with flexible spacing

When you want it: “Center these items horizontally” or “Space these buttons evenly”
The AI knows what this is; you just need to describe the arrangement you want

Container: The wrapper that keeps your content from touching the edges

When you want it: “Constrain the content width” or “Center the content”
Usually has max-width so content doesn’t stretch across huge monitors

Column: Vertical division of space

When you want it: “Split this into two columns”
Common: 2-column layout (content + sidebar), 3-column grid

Row: Horizontal division of space

When you want it: “Stack these in rows”
Often used interchangeably with “flex row”

Part 3: Spacing (The Invisible But Critical Stuff)

Padding: Space inside an element (between content and border)

When you want it: “Add more space inside this button” or “Give the section more breathing room”
Makes things feel less cramped

Margin: Space outside an element (between elements)

When you want it: “Add space between these cards” or “Push this section down”
Creates separation between items

Gap: Space between items in a grid or flex container

When you want it: “Increase the space between grid items”
Simpler than setting margin on every item

Whitespace: Empty space in your design (not necessarily white)

When you want it: “Add more whitespace around this section”
Makes designs feel clean and professional

Part 4: Responsive Design Terms

Breakpoint: The screen width where your design changes

When you want it: “Change to 1-column layout at mobile breakpoint”
Common breakpoints: mobile (< 768px), tablet (768-1024px), desktop (> 1024px)

Mobile-first: Designing for small screens first, then adding complexity for larger screens

When you want it: Usually the AI suggests this approach
Modern best practice

Responsive: Design that adapts to different screen sizes

When you want it: “Make this responsive” (means: works on all devices)
Should be default for everything you build

Part 5: States & Behaviors

Hover: What happens when you move your mouse over something

When you want it: “Change button color on hover”
Visual feedback that something is interactive

Active: The state when something is clicked/pressed

When you want it: “Show which nav item is active”
Often means “currently selected”

Focus: The state when an element is selected (especially for keyboard navigation)

When you want it: Usually automatic for accessibility
Important for forms and keyboard users

Disabled: When an element can’t be interacted with

When you want it: “Disable the submit button until form is valid”
Usually shown with reduced opacity or grayed out

Sticky: Element that stays visible while scrolling

When you want it: “Make the header sticky” or “Keep this sidebar visible when scrolling”
Common for navigation and important CTAs

How to Use These Terms

Instead of this:

“Make the top thing stay when I scroll down”

Say this:

“Make the header sticky when scrolling”

Instead of this:

“Put space between those box things”

Say this:

“Add gap between the cards” or “Increase margin between sections”

Instead of this:

“Make it work on phones”

Say this:

“Make this responsive” or “Adjust the grid to 1 column on mobile breakpoint”

Real Examples From My Projects

Cleaning Business Site - The Navigation Issue

What I wanted: The menu to turn into a hamburger icon on phones What I first said: “Make the menu smaller on mobile” What worked: “Create a hamburger menu for mobile breakpoint that expands to show navigation items”

The difference? Specific vocabulary (hamburger menu, mobile breakpoint, navigation items).

Directory Site - The Card Layout

What I wanted: Designer profiles in a Pinterest-style layout What I first said: “Make them look like that site where they’re in boxes” What worked: “Display the designer profiles as cards in a 3-column grid on desktop, 2 columns on tablet, 1 column on mobile”

The difference? I described the component (cards), the layout (grid), and responsive behavior (column changes at breakpoints).

Pomodoro Timer - The Button States

What I wanted: Start button to show it’s clicked What I first said: “Make the button look different when you press it” What worked: “Add an active state to the start button with a darker background color”

The difference? I named the state (active) and the property change (background color).

The Description Pattern That Works

When describing what you want, use this structure:

Component/Element: What thing you’re talking about (header, button, card, section)
Location/Context: Where it is or when it appears (on mobile, in the hero, when scrolling)
Property/State: What aspect you want to change (color, size, spacing, hover state)
Value/Behavior: What you want it to be (sticky, 3 columns, 20px gap, blue background)

Example: “Make the navigation (component) on mobile (context) collapse (behavior) into a hamburger menu (value)“

Common Translation Mistakes

Saying “bigger/smaller” without units

Don’t say: “Make the text bigger”
Do say: “Increase font size to 24px” or “Make the heading text 1.5x larger”

Using color names ambiguously

Don’t say: “Make it blue”
Do say: “Change background color to navy blue” or better yet, “Change background to #1e40af”

Vague positioning

Don’t say: “Move it over there”
Do say: “Align this to the right” or “Add 40px margin to the left”

Unclear scope

Don’t say: “Make them white”
Do say: “Change all button backgrounds to white” (specifies what “them” means)

The Cheat Sheet

Keep this open while working with your AI agent:

I want to change spacing:

Inside element: padding
Between elements: margin or gap
General breathing room: whitespace

I want to arrange things:

In rows and columns: grid
In a line with flexible spacing: flexbox
As separate blocks stacked: sections or rows

I want it to respond to screen size:

Change layout at certain widths: responsive breakpoints
Different mobile/desktop layouts: responsive design
Mobile menu: hamburger menu

I want interactive feedback:

Mouse over: hover state
Currently selected: active state
When clicked: click or active state
Can’t click: disabled state

What You Just Learned

You now have the 25 essential terms that cover 90% of what you’ll need to communicate with AI agents. You don’t need to memorize these. Keep this chapter open and reference it when you’re stuck describing something.

The goal isn’t vocabulary mastery. The goal is eliminating the friction between “I can see what I want” and “I can describe what I want.”

Next up: Chapter 2 gives you the prompt formulas for actually building things once you know what to call them.