TL;DR
AI tends to generate the “path of least resistance” based on what dominates its training data and examples, not necessarily what is architecturally best for a long-lived codebase.
Knowing this, there are steps we can take as seasoned developers to improve the code in multiple passes (part 2).
“Amazing” AI Code?
So your non-technical friends have told you about creating a complete landing page in a few minutes! Everything works. They can modify, create, delete elements and AI executed each perfectly. And fast. They love the site, and will definitely create more pages/sites this way.
You have a look at the code, and it looks like
❌ Messy code:
export default function XmasMugLandingPage() { return ( <main className="min-h-screen bg-red-50 text-gray-900 overflow-hidden"> <div className="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-red-200 via-white to-green-200 opacity-70"></div> <section className="relative z-10 px-6 py-10"> <div className="max-w-7xl mx-auto"> <div className="flex flex-col lg:flex-row items-center justify-between gap-10"> <div className="w-full lg:w-1/2"> <div className="inline-block bg-red-600 text-white px-4 py-2 rounded-full text-sm font-bold mb-6"> LIMITED CHRISTMAS EDITION </div> // ... (messy code all in one function with //. utility classes repeated 20 times) The definition of “good” AI is obviously different from your expectation! …!?
Why Does AI Generate Code This Way?
When we ask AI:
Build me a landing page with hero, pricing, FAQ and contact form.
The AI has several competing goals:
- Get the answer correct
- Avoid missing dependencies
- Avoid introducing bugs
- Fit within context limits
- Produce something that runs immediately
Not because this is good architecture, But because it maximizes the probability of a correct response.
AI Has No Long-Term Ownership
A senior engineer thinks:
Someone will maintain this for five years.
The AI’s priority:
I need to successfully answer this prompt.
Those are completely different optimization functions.
This explains: giant components, duplicated utility strings, repeated business logic and copy-pasted sections.
Tailwind is easier for AI to generate
With CSS Module:
// in a CSS file .card { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; } // in a HTML file <div className={styles.card}> In Tailwind
/// all in one file <div className="flex items-center gap-4 p-6"> Obviously, AI will have less to worry about if it’s all in one file.
Why AI likes shadcn
The AI can see the source code of:
- components/ui/button.tsx
- components/ui/card.tsx
- components/ui/dialog.tsx …
inside the project. No hidden implementation, and it can modify components directly.
With a library:
import { Button } from "@mui/material" the AI cannot edit MUI’s source code. It has to understand the MUI API – and that’s harder.
Can We Improve On This?
With more and more apps written this way, it seems important that we developers learn to teach AI to tidy and refactor the code! Here are some outlines:
- Generate The Page
- Ask AI To Identify Repetition
- Extract Components
- Separate Content From Presentation
- Establish Boundaries
In the next article, I will expand on each step and provide a walk through.
Do you have a similar experience with AI generated code? Does some of the AI tendencies surprise you??