Frontier Models Aren't Great Front-End Designers. Mock It Up First (Image Generation or Claude Design).

Today's coding agents can build almost any interface you can describe. That's exactly the problem: most people don't describe one. They say "make a landing page for my app," and the model fills every design decision with the most likely answer. You get a working page that looks like a thousand other pages.

The models aren't bad at front-end engineering. They're mediocre front-end designers when nobody gives them direction, because design is a set of choices, and a model's default is to pick the average. A builder in r/vibecoding asked exactly this: why does every AI model converge on the same "aggressively-mediocre design" when asked to code a web app from scratch?

The fix is simple: decide what it should look like before the coding agent starts. Here's why, and two ways to do it.

Why coding first produces generic design

When a coding agent designs while it codes, three things work against you:

1. It designs in code, one component at a time. It never steps back to look at the whole page the way a designer would.
2. It reaches for the defaults it knows best: shadcn components, Tailwind's palette, Inter, Lucide icons. (Here's what that looks like in 2026.)
3. Changing the look later is expensive. Once 30 components are built, "make it feel warmer" means touching all 30, and you're spending usage on rework.

Builders keep landing on the same conclusion. One r/vibecoding poster said their Codex-only frontend was "classic AI slop" until they designed it in Figma and Claude Design first. A widely shared X thread from @Hartdrawss (611 likes) complained about the "same purple gradients, same default fonts, same AI slop" and recommended prototyping the look before touching UI code.

A fair counterpoint: the newest models are getting much better at visual work. Riley Brown said this week that Claude's newest model is especially strong at visual tasks. But "capable of good design" and "makes good design choices for you without being asked" are different things. Even a great designer needs a brief.

Option 1: Generate mockups with image generation (great in Codex)

Image models are now good at UI. They can render readable text, realistic layouts and consistent styles, so you can see five directions in the time it takes to code one.

OpenAI recommends exactly this workflow in its own Codex guides: generate UI mockups and visual directions with `gpt-image-2` before Codex implements the one you pick, then attach the chosen image and ask Codex to build it.

How to do it:

1. Give Codex the brief, not the build order:

> Before writing any code, use image generation to create four distinctly different visual directions for the homepage of [product], which helps [who] do [what]. Vary the color palette, typography and layout. Don't use purple gradients, emoji icons or three identical feature cards. Show me all four.

1. Pick one and iterate on the image, not the code: "Direction 2, but with a lighter background and the signup form above the fold."
2. Ask for the mobile version too. A desktop mockup leaves too many mobile decisions open.
3. Save the approved image in the repo (for example design/approved-home.png) and reference it in your AGENTS.md, so Codex checks against it as it builds.
4. Then build: "Implement this design from design/approved-home.png. Match colors, spacing and type. Show me a screenshot next to the mockup when done."

This is one of the main reasons some builders pick Codex. Allie Miller chose Codex over Claude Code for her own setup partly because it has image generation built in, and @TheRohanVarma, who uses image generation five to ten times a day for product design, asked how Claude Code users manage without it. (Answer: Claude Design, below.)

Image generation uses your Codex allowance faster than text, but a few mockups cost far less than rebuilding a finished UI.

Option 2: Design it in Claude Design, then hand it to Claude Code

Claude Design is Anthropic's tool for mockups, prototypes and design systems. Instead of a static image, you get a live, clickable prototype you can refine by chatting, commenting and editing directly.

The part that matters for builders: when the design is ready, Claude Design packages it into a handoff bundle for Claude Code, with components, styles, assets and copy, so the coding agent builds from your approved design instead of inventing one.

How to use Claude Design for an app you're about to build:

1. Start with context. Upload screenshots of sites you like, your logo, any brand colors, or point it at your existing codebase. Its web capture tool can pull elements from a live site.
2. Ask for a few directions, then pick one and refine: "More white space. Make the pricing table the focus. Swap the serif for something friendlier."
3. Click through the prototype like a user would. Fix the flow now, while it's cheap.
4. Set up the design system (colors, type, spacing, components) so later screens match.
5. Hand off to Claude Code, and tell it to build from the bundle without changing the design.

Claude Design is included on Claude's plans, including limited use on the free tier (Claude pricing).

One honest caveat: Claude Design has defaults too. A r/ClaudeAI thread from July noted it can still produce the familiar AI look if you don't steer it. The tool doesn't remove the need to choose. It makes choosing fast and cheap.

Which one?

They work well together: explore with images, then refine the winner in Claude Design (or Figma) before building.

The rule we follow

No coding agent touches the UI until a human has said "yes, that one" to a picture.

It takes 20 minutes and saves days. It also makes the plan easier to review, which is the subject of how to understand what you're building before you start Codex or Claude.

Already built and not sure how it looks to a stranger? The free LaunchBuddy scan reviews your live site and points out what to fix first.