Why AI Generates 500 Lines of Code in One File...? (Part 1/2)

A developer explains why AI-generated code often produces large, monolithic files with duplicated logic and inline styles, prioritizing prompt completion over long-term maintainability. The article contrasts AI's 'path of least resistance' with senior engineers' focus on code that can be maintained for years, and previews a follow-up on refactoring techniques.

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 . 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 ... ? When we ask AI: Build me a landing page with hero, pricing, FAQ and contact form. The AI has several competing goals: Not because this is good architecture, But because it maximizes the probability of a correct response. 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. 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. The AI can see the source code of: inside the project. No hidden implementation, and it can modify components directly. With a library: js import { Button } from "@mui/material" the AI cannot edit MUI's source code. It has to understand the MUI API - and that's harder. 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: 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??