Frontend, what users see

AI asks: What should this screen look like?

The first time an AI tool you are working with asks you this question, the most common reaction is to freeze. You came to talk about your idea, not about screens, and now suddenly you are being asked to make design decisions you do not feel qualified to make.

Here is the secret. You are qualified. You have been using software your entire adult life. You know what a good screen feels like to use and what a bad screen feels like to use. The only thing you might be missing is the vocabulary, which is what today fixes.

What "frontend" actually means

The frontend is everything users see and touch. The buttons, the text, the colors, the way the page lays itself out on different screen sizes, the way it animates when you scroll, the way it reacts when you tap.

If you remember Day 4, the frontend is the client side of the journey: the part that runs locally on the user's device, that translates a tap into a request and turns a response back into pixels.

There are three different things working together to make the frontend happen, and any time you have seen the words "HTML, CSS, JavaScript" mentioned together, this is what they are.

• HTML is the structure. The skeleton of the page. "Here is a heading, here is a paragraph, here is a button, here is an image."
• CSS is the appearance. The clothes on the skeleton. "The heading is dark forest green, the buttons are rounded, the image takes up the full width on phones."
• JavaScript is the behavior. What happens when the user interacts. "When the button is tapped, animate the heart to red and send a like to the server."

You will never write any of these. You need to know that the frontend is always some mixture of structure, appearance, and behavior.

UI versus UX, the distinction that pays for itself

These two abbreviations get used interchangeably in conversation, and they shouldn't be.

UI is "user interface," the surface of the screen. The colors, the buttons, the typography, the spacing. UI is what an Instagram screenshot of your product would look like.

UX is "user experience," what it actually feels like to use the thing over time. The journey from sign-up to first value. The places where users get stuck. The number of taps it takes to do the most common thing.

A product can have beautiful UI and terrible UX. (Think: a meditation app that takes nine taps to start a session.) A product can also have ugly UI and excellent UX. (Think: Craigslist.) The two are related, but they are not the same job.

When AI asks you "what should this screen look like," it is asking a UI question. When AI asks you "what should the user do first when they sign up," it is asking a UX question. They are both valid questions, and you will be asked both, and you should not let them blur into each other.

How to answer the screen question, confidently

When AI asks you to specify a screen, the format that works is to describe three things in order: who is on the screen, what they are trying to do, and what is on it.

For a marketing landing page it might sound like this. The visitor is a stranger who clicked through from a tweet, they want to know if this is worth their time, and the screen should have a one-sentence pitch, a single hero visual, two calls to action (start the thing, read more), and a small section explaining who we are.

That is a sufficient answer. The AI will produce a first draft, you will react to it, and the second draft will be closer. Day 18 will come back to this when we walk through your own build.

A small vocabulary sweep

• Component. A reusable piece of UI. A button is a component, a navigation bar is a component, a comment thread is a component. Modern frontends are built out of components stacked together.
• Responsive. Behaves correctly across different screen sizes. A responsive design rearranges itself on phones, tablets, laptops, and desktops without anyone having to design four different versions by hand.
• Accessibility (often shortened to a11y). The set of practices that make your frontend usable by people with disabilities (screen readers, keyboard-only navigation, high-contrast vision). Most regulations require a baseline of this. Day 20 will come back to it.
• Design system. A pre-built set of components, colors, and typography that you can compose your screens from. Big companies have whole teams that do nothing but maintain theirs.

Forward references

Day 9 opens the backend, which is the other half of the journey from Day 4. Day 11 covers data, which is what most frontends are actually displaying. Day 19 returns to "never trust user input" with a five-item guardrail checklist you can run on every build.

Day 8 wrap

The thing you can now say plainly. The frontend is everything users see and touch, built from three things stacked together: HTML (structure), CSS (appearance), and JavaScript (behavior).

The thing you can now do. When AI asks you to specify a screen, answer in three parts: who is on the screen, what they are trying to do, and what is on it.

The guardrail to remember. UI is the surface, UX is the experience over time, and the two are related but they are not the same job.

See you on Day 9, where we go behind the screen.