Speaker A
These two screens use almost the same components, same buttons, same cards, and same inputs. But one looks like a product that people pay for, and the other looks like it came out of an AI tool in 30 seconds. The difference isn't
Griffin Wooldridge explains seven fixes that make AI-generated UI look professional: focal point, spacing, typography, color, real content, details, and motion.
Key Takeaways
- Polished UI quality comes from systematic design principles, not from the choice of components.
- Removing competing elements usually improves a screen more than adding new ones.
- Consistency in spacing, radius, color, and motion makes a product feel expensive even when viewers cannot name the cause.
- Real content and purposeful motion are among the easiest and most overlooked upgrades for AI-generated interfaces.
What the video covers
- The video contrasts two screens built from nearly identical components, showing that polish comes from design principles rather than the components themselves.
- Fix 1 - Focal point: make one primary action the most prominent element and quiet everything else, often by removing elements.
- Fix 2 - Spacing: use a consistent scale (multiples of 4 or 8 px) and group related items through proximity.
- Fix 3 - Typography: build hierarchy with weight and color rather than size, using one or two fonts and comfortable line lengths.
- Fix 4 - Color: use mostly tinted neutrals and reserve a single accent color for buttons, focus states, and links.
- Fix 5 - Content: replace placeholder text and numbers with real names, prices, features, and copy specific to the product.
- Fix 6 - Details: keep corner radius, thin subtle borders, soft layered shadows, and consistent icon sizing across the app.
- Fix 7 - Motion: animate elements from their origin point with physically plausible easing, with closing faster than opening.
- A worked example applies all seven fixes to a generic Claude-generated landing page, using specific prompts for each step.
- The video closes with a seven-question checklist for auditing any UI, and promotes free resources for transitions and animation skills.
Chapters
- 00:00Intro: Why AI UI Looks Cheap
- 00:35Fix 1: Clear Focal Point
- 01:11Fix 2: Consistent Spacing
- 01:44Fix 3: Typography Hierarchy
- 02:16Fix 4: Restrained Color
- 02:50Fix 5: Real Content
- 03:29Fix 6: Details and Consistency
- 04:04Fix 7: Purposeful Motion
- 05:12Live Demo: Fixing an AI-Generated Page
- 06:28Self-Audit Checklist and Wrap-up
Full Transcript — Download SRT & Markdown
Speaker A
talent or some secret design trick. It comes down to the same seven things, and every UI that looks good has all of them. So I'll go through each one, show you what it looks like when it's missing, and then I'll fix an AI
Speaker A
generated page live using all seven with the exact prompts I give Claude for each step. The first one is a clear focal point. On every good screen, there's one thing your eye goes to first. Look at Linear's home page, for example. There's
Speaker A
one headline and one main button. Everything else is quieter, so you know exactly where to look. Now look at a typical AI generated page. There's a badge, a gradient headline, two buttons the same size, a stat bar, and three
Speaker A
feature cards all competing at once. It's the same inside product UI. A good settings page puts the one action you came for at the top. A bad one gives every section the same weight, so you end up reading the whole page to find
Speaker A
one toggle. So the fix starts with one question. What's the one thing the screen is for? Make that the biggest, highest contrast thing on the page, and turn everything else down. That usually means removing things, not adding them.
Speaker A
The second one is spacing. Good interfaces don't pick padding by feel. They use a scale, usually multiples of four or eight pixels. So you'll see gaps of 8, 16, 24, and 32, and not much else.
Speaker A
And spacing shows what belongs together. A label sits close to its input. Items inside a section are closer to each other than the sections are to each other. Look at Stripe's checkout form.
Speaker A
You can tell which fields are grouped without a single line or box around them because the spacing does that work for it. When spacing is random, nothing looks broken exactly, but the page feels a little off, and you can't say why.
Speaker A
Most of the time, this is why. AI usually gives every element the same padding, so everything is evenly spread out, and nothing feels grouped. The third is typography, and specifically how hierarchy is built. Beginners make headings bigger and bigger. Good UIs
Speaker A
mostly use weight and color. A title might be only slightly bigger than the body text, but it's darker and heavier.
Speaker A
Secondary text is a softer gray. Most good products use one or two fonts, tighten the letter spacing a bit on headings, and keep lines of text short enough to read comfortably. If your page has five font sizes on one card, that's
Speaker A
usually the problem. The fourth one is color, and good UIs use a lot less of it than you think. Most of the screen is neutrals, usually grays with a slight tint toward the brand color, so even the grays feel like they belong to the
Speaker A
product. Then there's [music] one accent, and it shows up where it matters. The main button, a focus state, and maybe a link. Notion is almost entirely black, white, and [music] gray.
Speaker A
When something is colored, you notice it, and that's the point. AI-generated user interfaces do the opposite. It puts the purple gradient on the background, the headline, the buttons, and the badges. When everything is colored, nothing stands out, and the page looks
Speaker A
like every other AI page. The fifth is content. Beautiful UIs look real because the content is real. Real names, real numbers, real photos, copy written for this specific product. You probably won't see much John Doe, Jane Doe, or
Speaker A
Laura Mipsum. Look at this pricing card. First with placeholder content, a generic plan name, round numbers, and a list of vague features. Now at the exact same card with a real plan, a real price, and features that describe what
Speaker A
you actually get. Nothing about the design changed, but now it looks like a real product. This is one of the easiest fixes, and AI skips it almost every time. The sixth one is the details, the stuff you notice when you zoom in close.
Speaker A
Corner radius is consistent across the whole app, and nested elements get a slightly smaller radius than their container, so the curves line up.
Speaker A
Borders are thin, usually one pixel and very subtle. Shadows are soft and layered, not just one big dark blur. And also, don't forget about icons. Icons are the same size and stroke width. Zoom into a notification on your iPhone. The
Speaker A
corners match the screen's curve, the shadow is barely there, and the icon sits exactly in line with the text. Now zoom into a typical AI-built notification. The border is too dark, the shadow is one heavy blur, and the
Speaker A
icon is a few pixels off. None of these jump out on their own, but when they're off, the whole screen feels cheaper, even if people can't point to why. The last one is motion. In good UIs, things move like they're physically connected
Speaker A
to what you did. A drop-down grows out of the button you clicked, not from the center of the screen. It opens a bit slower than it closes because closing should get out of your way fast. A notification slides in from the edge and
Speaker A
stacks on top of the previous one. A sheet follows your finger and settles in place. Look at Apple Maps. When you drag the bottom sheet, it moves with your finger, and when you let it go, it eases into place at the right height. Compare
Speaker A
that to a pop-up that just fades in from nowhere. AI-built interfaces usually either snap with no motion or fade everything up the same way. Motion is the quickest way to make a product feel expensive and the quickest way to make
Speaker A
it feel cheap. And speaking of motion, a couple of free, easy resources that give your UI expensive and crisp motion are transitions.dev and Amiel Kowalski's library of animation skills. I'll link both of those down below if you want to check
Speaker A
them out. So, let's put all seven of these principles together. This is a page Claude made from a simple prompt with no direction. It has a gradient hero, two equal buttons, three feature cards, and placeholder testimonials.
Speaker A
First, the focal point. I tell Claude what the page is for and ask it to keep one primary button and make everything else secondary. The second button becomes a text link, and the stat bar goes away. Next, spacing. I ask it to
Speaker A
move every gap onto an 8-pixel scale and to group related items closer together. Now, each individual section reads meaningfully different. Then, typography. I ask for one font, a heavier but smaller heading, and gray for supporting text. [music] The
Speaker A
hierarchy gets clearer, and the page looks calmer. Color is next. I ask it to remove the gradient, use tinted neutrals, and keep the brand color only on the main button and links. Then, content. I give it the real product
Speaker A
name, real features, and a real customer quote, and ask it to replace every placeholder. This step changes the feel more than you'd expect. Then, details. I ask it to match the radius everywhere, use 1-pixel borders, soften the shadows,
Speaker A
and align everything to the same edges. And finally, motion. I asked it to make the menu grow from its button, make notifications stack, and keep every animation short with an ease out. Here's the before and here's the after. Same
Speaker A
components, same layout, it just follows the seven things every good UI has. If you want to check your own UI, ask these seven questions. What's the one thing this screen is for and is it the most obvious thing on it? Is every gap spaced
Speaker A
properly and following a standard scale? Does hierarchy come from weight and color, not just size? Is the accent color used only where it matters? Is every piece of content real? Do radius, borders, and shadows match everywhere?
Speaker A
And does every animation come from where the user acted? If the answer to all seven is yes, then your UI will almost certainly look good whether a person or an AI built it. If you want this checklist and the skills and MCPs I used
Speaker A
to get Claude to do all of this automatically, I'll leave a link to my free guide down in the description. Drop a like and subscribe if you want more AI design videos and I'll see you in the next one. Thanks for watching.
Topics:UI designAI-generated UIdesign principlesvisual hierarchyspacingtypographycolor theoryUX motionClaudeinterface design
