DEV Community

Cover image for Teaching Your AI Web Design Some Actual Taste
Athreya aka Maneshwar
Athreya aka Maneshwar

Posted on

Teaching Your AI Web Design Some Actual Taste

Moves past generic code for unique UI

Hello, I'm Maneshwar. I'm building git-lrc, a Micro AI code reviewer that runs on every commit. It is free and source-available on Github. Star git-lrc to help devs discover the project. Do give it a try and share your feedback.

Let me guess.

You opened Claude Code, typed "build me a modern landing page," hit enter, and got back something that technically works but somehow looks like every other site you have ever scrolled.

Purple to blue gradients.

Inter for everything.

Little rounded icon tiles floating above every heading.

A hero section that could belong to literally any SaaS on earth.

Congratulations, you have been served a fresh bowl of AI slop.

I have been fighting this exact fight for a while now, and I want to walk you through how I actually beat it.

Not with one magic prompt, and definitely not with a 10,000 line DESIGN.md you copied from a thread.

Just three moves, a couple of tools, and a way of working that stops leaving your output to the gods of the one shot.

First, why does slop even happen?

Here is the uncomfortable truth, and it is worth sitting with for a second.

The problem with slop is not technical.

The models are not bad at writing CSS.

They are frankly great at it.

The problem is that the output is generic, and generic is a moving target.

If the models got ten times better tomorrow, they would just raise the bar on what counts as basic.

The floor moves up, the slop moves with it.

Why? Because a model trained on the public internet learns the statistical center of the public internet, and the center of the design internet in 2026 is Tailwind templates, Vercel starters, and other AI generated landing pages.

Ask for "modern" and you get the mathematical average of every landing page ever shipped. That average is the slop.

So the fix is not a better model.

The fix is you. Specifically, your taste. And that is where a lot of us cope instead of cook.

Yeah. That is the cope.

The rest of this post is about doing the opposite.

Here is the whole game on one screen before we dig in:

Step 1: Cultivate some taste (you cannot inject what you do not have)

You have heard "AI has no taste" a hundred times. Fine.

But the sneaky corollary nobody says out loud is that you need taste to hand over, and most of us have not deliberately built any. We just vibe.

So step one is boring and unglamorous and completely non negotiable: go collect stuff you like.

Become a magpie. Open Dribbble, search "web design," sort by popular, and start screenshotting the hero pages that make you feel something.

Do the same on Pinterest.

Then, and this is my personal favorite, go to Twitter slash X, where a genuinely absurd amount of the best UI work gets posted before it lands anywhere else.

Save screenshots. Save links to live sites too, since a real page tells the model way more than a flat image.

Now, you could just let those screenshots rot in a folder called inspo_FINAL_v3. Or you could do the fun version and have Claude Code spin up a tiny inspiration library web app for you.

Mine groups everything by design style, names the aesthetic in actual design vocabulary, and gives me keywords for each piece.

Click a screenshot and I can copy an image prompt (for generating a matching hero background later) or copy a full brief (for generating the whole page).

It turns a pile of pretty pictures into a reusable palette of your taste.

The point of this step is not to copy anyone.

It is to give your future self a base to point at, so you are never starting from a blank prompt and an average result.

You are starting from a direction you already know you like.

Step 2: Arm Claude Code with tools it does not ship with

Out of the box, Claude Code is a strong developer with the visual judgment of a coin flip.

So we hand it better eyes and better hands. Three categories are enough.

A real design skill

The default Anthropic frontend-design skill was a fine start, but at this point it kind of produces the slop it was meant to prevent.

The one I reach for now is Impeccable, an open source Claude Code skill by Paul Bakaus.

Instead of vaguely begging the model to "not look AI generated" (which never works), it does something clever: it names the specific slop patterns and tells the model to avoid them.

It ships as one skill with a stack of commands you invoke like slash commands. A few that I use constantly:

  • /critique for an honest UX review of hierarchy and clarity
  • /bolder to push a safe, boring design toward actual impact
  • /quieter to pull an over caffeinated design back down
  • /polish for a final alignment and spacing pass before shipping

Under the hood it hunts slop across seven areas: typography, color, spatial design, responsiveness, interaction, motion, and UX writing.

There is even a Chrome extension that highlights slop patterns on a live site, which is a little bit rude and extremely useful.

The before and after examples in the docs sell it better than I can.

If Impeccable is not your flavor, there are other "taste" style skills in the same spirit floating around GitHub, and they work on the same principle.

An image and video MCP

Claude Code cannot draw. It cannot generate that moody cinematic mountain range you want behind your hero text.

So give it the ability with the Higgsfield MCP, which basically hands your agent a backstage pass to 30 plus image and video models through a single connection.

You describe the hero image, it generates it, drops it into the section, done. No tab hopping to five other tools.

A component registry

For the smaller stuff, buttons, cards, pricing sections, pagination (when was the last time you thought hard about pagination?), I browse 21st.dev.

It is an open registry where each component ships with a "copy prompt" button.

Paste that into Claude Code and it rebuilds the component inside your codebase, wired to your stack.

Think of it as step one's taste hunting, but zoomed all the way in to the component level.

One warning before you go tool shopping

Here is the trap, and I have fallen in it more than once.

It is very easy to convince yourself you are one skill away from all your design problems being solved. You are not.

You will find flashy skills that build gorgeous sites.

The catch is they tend to be narrow and extremely prescriptive, so they hand you exactly one kind of output every time.

That is not taste, that is a template with extra steps.

I like Impeccable and Higgsfield precisely because they are flexible.

The downside of flexible is that they will not magically produce greatness. That still depends on your prompting and your taste. Which is the point.

Step 3: Build in loops, not in one shots

This is the mindset shift that changed everything for me, so read it twice: stop trying to one shot.

The one shot is a lottery ticket.

You type "make it premium," hit enter, and pray.

Sometimes you win. Usually you get slop with a slightly nicer font.

Instead, cast a very wide net up front, then narrow down.

Here is the actual sequence I run:

Let me make that concrete.

Say I am building a landing page for a made up AI analytics startup called Kestrel, and the goal is to get people to book a demo.

First, five versions in five styles, all at once. Not one, five.

If you built that inspiration library from step one, you can just tell Claude Code to look at it, pull five aesthetic families, and build a page in each.

Seeing them side by side on one screen makes it obvious which direction has legs, in a way that squinting at a terminal one attempt at a time never does.

Say I land on a "vast quiet" minimalist look with a big cinematic image behind the hero.

Then, three variations of that one direction.

Same aesthetic, different body layouts.

Maybe one is super vertical and minimal, one is a "ledger" style with an index that scrolls alongside you, one frames each section with edges.

I pick the ledger, because that scrolling index is genuinely cool.

Then I nail the hero image before fussing with anything else.

I fire up the Higgsfield MCP, ask for four 2K options that fit the quiet aesthetic, and look at them in the actual hero slot.

Too black and white? Ask for variations with a splash of color.

That gentle golden "alpenglow" one? Sold.

Then transitions and weight.

I ask for the hero to fade into the body instead of hard cutting, and for elements to load in with a bit of heft so the whole thing feels premium rather than snappy and cheap.

Notice what is happening.

At every stage I am seeing options and choosing, not blindly trusting a single generation. That is the whole trick.

The four things worth putting in your prompt

You do not need a giant design doc.

When those get too specific, they just produce the same thing every time, which is the slop problem wearing a fancier coat.

I pass four things, loosely:

  1. Aesthetic. The general family of design you are going for.
  2. Reference image. This is where your taste library earns its keep. Drop a screenshot, or better, an actual URL of a site you like. You are matching a feeling, not copying content.
  3. Intent. What is this and why does it exist? SaaS product? Event page? Who is the audience and what do you want them to do, read, click, or fill out?
  4. Guardrails. The always and the never. This is your anti slop clause. "Never use purple gradients. Never use Inter. No 3D SaaS blobs."

The secret weapon: a live tweak bar

Even after all that, the page felt almost right but a touch too minimal.

Instead of guessing with more "make it pop" prompts, I asked Claude Code to add a live tweak bar to the dev server, the kind of panel you see inside Claude Design.

Font family, font size, accent color, motion, reveal distance, anything where a design decision lives.

Now I iterate by eye.

I flip through fonts in real time instead of asking for ten rebuilt pages and comparing them like a lunatic.

Being able to see differences instantly is the thing that finally gets you to something you actually like. And do not forget: references are not just for the hero.

Feed the model URLs and screenshots for how you want the body laid out too, since Claude Code can look at a live page and apply its structure.

Wrapping up

None of this is a rulebook. Do not follow it to the letter, because the second something becomes a rigid formula, it starts producing its own flavor of slop.

The point is a flexible workflow you can bend to any project:

Cultivate taste so you have something to hand over.

Arm your agent with a design skill, an image MCP, and a component registry.

Then build in loops, wide net first, tweak by eye last, so you are never at the mercy of a single roll of the dice.

The moat was never the toolbox.

It was always your taste.

Go build something that looks like you, and leave the purple gradients where they belong.

If you try this, I would love to see what you ship. Drop a link in the comments and let us compare notes.


AI agents write code fast. They also silently remove logic, change behavior, and introduce bugs — without telling you. You often find out in production.

git-lrc fixes this. It hooks into git commit and reviews every diff before it lands. 60-second setup. Completely free.

Any feedback or contributors are welcome! It's online, source-available, and ready for anyone to use.

⭐ Star it on GitHub:

GitHub logo HexmosTech / git-lrc

Free, Micro AI Code Reviews That Run on Git Commit




GenAI today is a race car without brakes. It accelerates fast -- you describe something, and large blocks of code appear instantly. But AI agents silently break things: they remove logic, relax constraints, introduce expensive cloud calls, leak credentials, and change behavior -- without telling you. You often find out in production.

git-lrc is your braking system. It hooks into git commit and runs an AI review on every diff before it lands. 60-second setup. Completely free.

In short, git-lrc helps Prevent Outages, Breaches, and Technical Debt Before They Happen

At a glance: 10 risk categories · 100+ failure patterns tracked · every commit…

Top comments (20)

Collapse
 
anchildress1 profile image
Ashley Childress

I'm usually the one asking Claude to "just build a UI that doesn't suck," and that's usually about as good as it gets 🤣 This at least gives me a direction to give it much better than my default. I'll definitely be checking out the tools you mentioned, too. Thanks for the great overview!

Collapse
 
lovestaco profile image
Athreya aka Maneshwar

Haha, lemme know how it goes xD @anchildress1

Collapse
 
publiflow profile image
PubliFlow

Solid frontend write-up. If anyone needs quick AI image tools (background removal, headshots, product photos), we built a free suite at tools.shopveigo.com. All browser-based, no signup needed for most tools.

Collapse
 
lovestaco profile image
Athreya aka Maneshwar

Aightt

Collapse
 
publiflow profile image
PubliFlow

Appreciate the nod. Since you are keeping up with the AI tooling space, I am curious how you handle style consistency when feeding generated assets into your frontend components. It seems like the hardest part of giving AI actual taste is maintaining a unified design system.

Collapse
 
publiflow profile image
PubliFlow

Solid frontend architecture. In production, I'd add that proper asset loading strategy (code splitting, resource hints, and responsive images with srcset) often makes a bigger performance difference than any single CSS optimization.

Collapse
 
lovestaco profile image
Athreya aka Maneshwar

Cool

Collapse
 
publiflow profile image
PubliFlow

Since you agree on the architecture side, I am curious about the design aspect. It really highlights how much manual refinement is still needed to give AI-generated layouts actual taste. Have you found any specific workflows that help bridge that gap between raw AI output and a polished frontend?

Collapse
 
publiflow profile image
PubliFlow

Exactly. The real challenge is bridging the gap between what the AI designs and what the browser can actually render efficiently without bloating the bundle. Are you currently using any specific build tools to automatically optimize those AI-generated assets?

Collapse
 
eduzsh profile image
Edu Peralta

The three moves framing is right: taste is upstream of tools, not a prompt you bolt on at the end. The part that still bites is that agents will happily "polish" a page into the same statistical average you were trying to leave, so the critique pass has to name concrete rejects (Inter everywhere, purple gradients, a hero that could sell any SaaS) the way Impeccable does. When I review agent UI work I treat the CSS and layout hunks as the surface that matters, not the summary that says "modern and clean." If those hunks look like every other landing page, the session was not done.

Collapse
 
lovestaco profile image
Athreya aka Maneshwar

Impeccable for the save :D

Collapse
 
gideonadeti profile image
Gideon Adeti

Core Summary: Functional AI code isn't enough; AI needs explicit design guidelines. By loading structured design skills and tokens into your AI tools, you can force coding agents to generate distinct, production-ready interfaces with actual taste.

Collapse
 
lovestaco profile image
Athreya aka Maneshwar

Yeah

Collapse
 
valentin_monteiro profile image
Valentin Monteiro

Small plumbing note before anyone wires an image MCP into Claude Code: when a tool of mine returned images to the CLI, the image blocks didn't land, so I ended up writing the PNG to a temp dir and handing back the path as text. Which is fine for the loop you describe, since you're the one eyeballing the four hero options anyway. It's the step after that gets awkward, when you want the agent to compare its own output and it actually needs to see the page.

Collapse
 
lovestaco profile image
Athreya aka Maneshwar

Got it, thanks @valentin_monteiro

Collapse
 
mudassirworks profile image
Mudassir Khan

The "mathematical average of the training distribution" framing is exactly right — it does not stop at CSS. We hit the same wall building an AI video generator: outputs were technically fine but perceptually mediocre because "good music video aesthetic" is buried under the statistical center of every mid YouTube video uploaded.

Same fix worked: we built a reference library of annotated clips we liked and injected them as few shot examples at generation time. The model output shifted noticeably. Not because the model got better, but because we gave it a different center to regress toward.

What is your approach for keeping the taste library fresh? Ours drifted toward what the team already liked, which is its own kind of slop.

Collapse
 
violetadev profile image
V

I learned so much with your post, thank you for sharing!

Collapse
 
lovestaco profile image
Athreya aka Maneshwar

Thanks V <3

Collapse
 
publiflow profile image
PubliFlow

Good CSS/HTML coverage. The landscape here moves quickly — worth noting that container queries and :has() selector support have reached baseline, which can simplify many of the responsive patterns we previously needed JS for.

Collapse
 
capestart profile image
CapeStart

This made me realize how often I blame the AI for generic design when my prompt was literally just make it modern.