Frontend Terms for Vibe Coding

People keep talking about the frontend and backend. What's the difference?

The document AI wrote is full of # signs and asterisks. What is that, and can it turn into nicely formatted text?

The code AI wrote has a bunch of angle brackets and English words. What are those for?

Add a button that saves the content when someone clicks it.

Make this text clickable so it takes people to another page.

Add a field where people can enter their email address.

People need to write a longer message here, so one line won't be enough.

Only let people enter numbers for the quantity, with plus and minus controls if possible.

These options should be mutually exclusive—choosing one should clear the last one.

These options don't conflict, so people should be able to choose more than one.

Make this work like a phone setting: flip it on, then flip it off again.

I want a draggable slider for setting the price range.

Let people rate the product with stars.

There are too many choices to show all at once. Put them in a dropdown people can open and pick from.

When someone types the first few letters, show suggestions and let them click one to finish the entry.

For the address, let people choose state, then city, then neighborhood one level at a time.

The options are nested, so people need to expand a level before choosing from it.

Give people a calendar to choose a date instead of making them type it in.

Let people choose the time instead of typing it themselves.

Let people upload their own images.

Build a sign-up page where people fill in their information and submit it.

Let people choose their own theme color instead of hard-coding one.

Put a clear label in front of every field so people know what to enter.

This order data is a mess. Lay it out in a table with one order per row.

Just stack these items in a consistent list, one after another.

Make each product a clickable card with the image on top and the name and price underneath.

Label each article as a tutorial or news item so people can tell them apart at a glance.

Show a little red number on the message icon for how many messages are unread.

Show an avatar in the comments so people can see who's speaking.

On the details page, list the name, date, and status clearly, one field at a time.

Put a few big numbers on the homepage, like total users and sales.

There's too much content here. Split it into tabs so people can switch views with a click.

Put two or three choices side by side so people can tap one to switch, like the iPhone control.

There are a lot of questions. Show just the question first, then let people open it to see the answer.

Show the shipping updates in time order so people can tell where the package is.

Make it work like folders: click the little arrow to expand the next level.

I want several hero images to rotate automatically, with left and right arrows too.

When there's no data, show an image and tell people what they can do next instead of leaving the page blank.

Let me add images to the article, and make sure they don't get distorted on phones.

For uploaded attachments, show the filename and size and let people remove them.

Add a small icon to the button so people can tell what it does without reading.

Pull out this person's exact words and make it stand out, with their name attached.

Put a video on the page that people can play with one click.

Keep a yellow warning at the top of the page to let people know their account is about to expire.

Show a little 'Saved' message in the corner that disappears after a couple of seconds.

Clicking the bell in the top right should show all of someone's system notifications.

Click the button to show a dialog in the middle of the screen and dim the background.

Open a details panel from the right, but keep the list behind it visible.

On delete, ask 'Are you sure?' next to the button instead of opening a big dialog.

Click an avatar to show a small profile card beside it.

When someone hovers over this icon, show a short label explaining what it does.

Show upload progress so people don't think the file upload is stuck.

While the page is loading, show gray placeholder blocks instead of a spinner the whole time.

After payment succeeds, show a clear success page instead of immediately sending people somewhere else.

Show a loading spinner when things take a while, or people will think the page is broken.

There are too many features now. Add a menu so people can find their way around.

This page is buried pretty deep. Show where I am at the top, with links back up the path.

There are too many items for one page. Add page numbers at the bottom.

Checkout has three steps. Show people which step they're on at the top.

When someone hovers over their username, show a dropdown with Settings and Sign out.

This page is long. Add a small table of contents on the right that jumps to each section.

After someone scrolls way down, show a button in the bottom right that takes them back to the top.

Keyboard users have to press Tab too many times to reach the main content. Can they jump there directly?

Use the classic layout: a navigation bar on top and all the content below it.

Put the feature menu in a left sidebar and show the content in a big area on the right, like an admin dashboard.

Put everything on one long page so people can just scroll through it.

Lay this out like documentation: navigation on the left, the article in the middle, and this page's outline on the right.

Show the content as cards in a grid, with more columns on wide screens and wrapping on narrow ones.

Keep the content in a narrow column with space on both sides instead of stretching it across the whole screen, like a blog.

Everything feels piled together. Adjust the spacing so related things stay close and separate things have room.

This block is too close to the one next to it. Add a little more space between them.

The text is pressed right against the edge of the box. Add some breathing room inside it.

Put these buttons in one row with even spacing and center them vertically.

Arrange these cards in a clean grid that switches to two columns on narrower screens.

This dialog is getting covered by other content. Make sure it stays on top.

Keep the navigation pinned to the top while people scroll down.

Pin this little icon to the top-right corner of the card so the rest of the layout doesn't affect it.

Can you center this box both horizontally and vertically? Why is that always so hard?

All the text on this page runs together—separate the headings, body copy, and notes so the important stuff stands out.

Use a serif font with a little character for the headings, then keep the body text clean and simple.

If a title is too long, cut it off and show an ellipsis at the end.

These two sections feel cramped. Add a subtle line between them.

Round the sharp corners on these cards a bit so they feel softer.

Add a light shadow under the card so it feels like it's floating above the page.

This image is stealing too much attention. Make it a little transparent.

Instead of a solid background, let the color fade from blue into purple.

Make the corner rounding consistent across the site—some parts are square and some are round.

Make the navigation bar translucent so the content behind it blurs as it scrolls past.

The button color changes too abruptly. Can it ease into the new color?

Make this icon loop through a subtle motion, like gently floating up and down.

This animation feels choppy. Can it speed up and slow down more naturally?

Give the dialog a small springy bounce when it appears.

When the content changes, fade the old content out and the new content in.

Change the button color on hover so people know they can click it.

When someone presses the button, make it feel like it's being pushed in.

I can't tell where I am when I use Tab. Can you add a clear focus outline?

Let people drag these cards to rearrange them.

Keep the submit button gray and unclickable until the form is complete.

Change the cursor to a pointer when it moves over something clickable.

Change the text highlight color to our brand color when people select text.