How do I describe a UI change to an AI when I don't know the names of the components?

When you don’t know the technical names for UI components, the best approach is to describe them based on what they look like and what they do.

Here is a simple framework to help the AI understand exactly what you mean:

1. Describe the Appearance

Use physical characteristics. Common terms for UI elements include:

• Containers: "The box," "the panel," "the sidebar," "the card" (a standalone block of content), or "the header/footer."
• Buttons: "The clickable pill," "the icon-only button," "the floating action button" (usually a circular button that floats over the content), or "the toggle switch."
• Lists: "The dropdown menu," "the list of items," or "the grid" (items arranged in rows and columns).
• Text: "The headline," "the body text," "the caption," or "the input field" (where you type).

2. Describe the Behavior

Explain what happens when you interact with it:

• "When you click it, a new window pops up..."
• "It stays pinned to the top even when I scroll..."
• "It expands to show more options..."
• "It highlights or changes color when I hover over it..."

3. Use Relative Positioning

Use your screen as a map:

• "In the top-right corner..."
• "To the left of the main content area..."
• "Underneath the 'Submit' button..."
• "Centered in the middle of the screen..."

4. Use Comparisons

If you aren't sure how to describe it, compare it to a well-known app.

• Example: "I want a navigation bar at the bottom that works just like the one in Instagram," or "I want the settings menu to slide in from the right like a drawer."

An Example of how to phrase your request:

"I want to change the part of the screen where I enter my email. Right now, it's just a white line. I want to replace it with a larger, rounded box that sits in the center of the page and has a button next to it that turns blue when I start typing."

Pro-tip: If you have the ability to take a screenshot, describing the image ("The element in the top left with the three lines") is often more effective than trying to guess the industry term. If you’re unsure if you’ve described it well enough, you can always ask the AI: "I'm referring to the [description], is there a common name for that element?"