🎨 Why the default looks generic

New here? Front end it’s the part of a website or app that a person sees and interacts with on screen—buttons, colors, text, layout. It’s different from the “back end,” the engine behind it (database, business rules) that no one sees directly. When this module talks about “the website the agent produces,” it means the front end.

You’ve probably seen this before: a white or very light gray background, a large centered heading, a blue button with rounded corners labeled “Get Started” or “Learn more,” generic icons, system fonts. No matter what the site is about—a cake recipe, a résumé, a clothing store—the default result from an AI agent without visual instructions tends to have the SAME look. People who work with AI have a nickname for this: "AI feel" (in the original English, "AI slop" or "AI smell") — the look that gives away at first glance that no one has worked on it.

New here? One AI model (the “brain” that interprets your request and generates the result) was built using a process called training: showed it millions of real examples — in this case, millions of front-end pages written by people around the world — and it learned the patterns that appear most often in those examples. It didn't "memorize" a specific site; it learned statistically what tends to come after what.

This has a direct consequence: when you ask for something vague ("make a beautiful website"), the model has no basis for choosing—so it converges on the most likely answer, which is the statistical average everything it has ever seen. And the average across millions of frontend sites tends toward the same thing: blue (the most widely used color for CTA buttons worldwide), white (the safest and most common background), system font (the one that always works without configuring anything). It’s not model laziness—it’s probability doing exactly what it was trained to do.

Caption: above, the vague request falls toward the average of everything the model has seen and comes out generic; below, a visual reference fills in the gaps with your style instead of the average — that’s the difference modules 5.2 and 5.5 will teach you to build.

There’s a second cause, just as important as the first: the agent that write a website’s code doesn’t necessarily see the result. A prompt (the text request you type to the agent) describes what you want in words—but text isn’t an image. Unless someone makes the agent take a screenshot and look at it the way a designer would, it’s working “blind”: writing technically correct HTML and CSS, but without checking whether it looks good, balanced, and has the right personality.

Put the two causes together and you understand the whole problem: (1) without a brand reference, colors, or a visual example, the model fills in the gaps with what is statistically “safe” in its training data; (2) without someone — or something — pushing for a critical look at the result, nothing corrects that first instinct. Together, the two causes explain the “AI smell” — and both have a solution, which is exactly the rest of this track.

To make this concrete, look at the same task — "create a landing page for a neighborhood bakery" — requested in two different ways. The text below describes what each request would produce, point by point, exactly as a designer would describe two wireframes (simplified layout sketches, without final details) placed side by side.

Caption: same task, two results. On the left, without a reference color, font, or photo, the model falls back to the average (blue, rounded, generic icon). On the right, with the bakery’s terracotta and cream palette and a real product photo included in the request, the result starts with its own identity — no need for “more creativity,” just more information.

The best way to internalize this module is to experience the phenomenon firsthand once, before learning how to avoid it. Objective: confirm, in your own Claude Code, that a vague front-end request really follows the generic pattern described above — with no style, color, or brand instructions.

Create an HTML/CSS landing page for 
with a contact form and a testimonials section. Don't give me any colors, fonts, or
style reference — choose the look yourself.

Typical result: white/light gray background, centered bold title, rounded blue button labeled something like “Get Started” or “Contact us,” testimonial cards that all look identical, system font. If your result matches this description—as it does in the vast majority of cases—you’ve just reproduced the phenomenon covered in this module.

You’ve just seen the two causes of the problem: no visual reference and no automatic way to “look” at the result. The next two modules tackle exactly these causes, in that order.