{"id":3118,"date":"2026-06-24T05:03:35","date_gmt":"2026-06-24T05:03:35","guid":{"rendered":"https:\/\/tucumandevelopers.com\/index.php\/2026\/06\/24\/why-ai-generates-500-lines-of-code-in-one-file-part-1-2\/"},"modified":"2026-06-24T05:03:35","modified_gmt":"2026-06-24T05:03:35","slug":"why-ai-generates-500-lines-of-code-in-one-file-part-1-2","status":"publish","type":"post","link":"https:\/\/tucumandevelopers.com\/index.php\/2026\/06\/24\/why-ai-generates-500-lines-of-code-in-one-file-part-1-2\/","title":{"rendered":"Why AI Generates 500 Lines of Code in One File&#8230;? (Part 1\/2)"},"content":{"rendered":"<div>\n<div><\/header>\n<div data-article-id=\"3974388\" id=\"article-body\">\n<p>TL;DR<\/p>\n<blockquote>\n<p>AI tends to generate the &#8220;path of least resistance&#8221; based on what dominates its training data and examples, not necessarily what is architecturally best for a long-lived codebase.<br \/> Knowing this, there are steps we can take as seasoned developers to improve the code in multiple passes (part 2). <\/p>\n<\/blockquote>\n<h2> <a name=\"amazing-ai-code\" href=\"#amazing-ai-code\"> <\/a> &#8220;Amazing&#8221; AI Code? <\/h2>\n<p>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.<\/p>\n<p>You have a look at the code, and it looks like<\/p>\n<p>\u274c Messy code: <\/p>\n<div>\n<pre><code><span>export<\/span> <span>default<\/span> <span>function<\/span> <span>XmasMugLandingPage<\/span><span>()<\/span> <span>{<\/span> <span>return <\/span><span>(<\/span> <span>&lt;<\/span><span>main<\/span> <span>className<\/span><span>=<\/span><span>\"<\/span><span>min-h-screen bg-red-50 text-gray-900 overflow-hidden<\/span><span>\"<\/span><span>&gt;<\/span> <span>&lt;<\/span><span>div<\/span> <span>className<\/span><span>=<\/span><span>\"<\/span><span>absolute top-0 left-0 w-full h-full bg-gradient-to-br from-red-200 via-white to-green-200 opacity-70<\/span><span>\"<\/span><span>&gt;&lt;<\/span><span>\/div<\/span><span>&gt; <\/span> <span>&lt;<\/span><span>section<\/span> <span>className<\/span><span>=<\/span><span>\"<\/span><span>relative z-10 px-6 py-10<\/span><span>\"<\/span><span>&gt;<\/span> <span>&lt;<\/span><span>div<\/span> <span>className<\/span><span>=<\/span><span>\"<\/span><span>max-w-7xl mx-auto<\/span><span>\"<\/span><span>&gt;<\/span> <span>&lt;<\/span><span>div<\/span> <span>className<\/span><span>=<\/span><span>\"<\/span><span>flex flex-col lg:flex-row items-center justify-between gap-10<\/span><span>\"<\/span><span>&gt;<\/span> <span>&lt;<\/span><span>div<\/span> <span>className<\/span><span>=<\/span><span>\"<\/span><span>w-full lg:w-1\/2<\/span><span>\"<\/span><span>&gt;<\/span> <span>&lt;<\/span><span>div<\/span> <span>className<\/span><span>=<\/span><span>\"<\/span><span>inline-block bg-red-600 text-white px-4 py-2 rounded-full text-sm font-bold mb-6<\/span><span>\"<\/span><span>&gt;<\/span> <span>LIMITED<\/span> <span>CHRISTMAS<\/span> <span>EDITION<\/span> <span>&lt;<\/span><span>\/div<\/span><span>&gt; <\/span> <span>\/\/ ... (messy code all in one function with <\/span> <span>\/\/. utility classes repeated 20 times)<\/span> <\/code><\/pre>\n<div>\n<\/p><\/div>\n<\/p><\/div>\n<p>The definition of &#8220;good&#8221; AI is obviously different from your expectation! &#8230;!?<\/p>\n<h2> <a name=\"why-does-ai-generate-code-this-way\" href=\"#why-does-ai-generate-code-this-way\"> <\/a> Why Does AI Generate Code This Way? <\/h2>\n<p>When we ask AI:<\/p>\n<blockquote>\n<p>Build me a landing page with hero, pricing, FAQ and contact form.<\/p>\n<\/blockquote>\n<p>The AI has several competing goals:<\/p>\n<ul>\n<li>Get the answer correct<\/li>\n<li>Avoid missing dependencies<\/li>\n<li>Avoid introducing bugs<\/li>\n<li>Fit within context limits<\/li>\n<li>Produce something that runs immediately<\/li>\n<\/ul>\n<p>Not because this is good architecture, But because it maximizes the probability of a correct response.<\/p>\n<h3> <a name=\"ai-has-no-longterm-ownership\" href=\"#ai-has-no-longterm-ownership\"> <\/a> AI Has No Long-Term Ownership <\/h3>\n<p>A senior engineer thinks:<\/p>\n<blockquote>\n<p>Someone will maintain this for five years.<\/p>\n<\/blockquote>\n<p>The AI&#8217;s priority:<\/p>\n<blockquote>\n<p>I need to successfully answer this prompt.<\/p>\n<\/blockquote>\n<p>Those are completely different optimization functions.<\/p>\n<p>This explains: giant components, duplicated utility strings, repeated business logic and copy-pasted sections.<\/p>\n<h3> <a name=\"tailwind-is-easier-for-ai-to-generate\" href=\"#tailwind-is-easier-for-ai-to-generate\"> <\/a> Tailwind is easier for AI to generate <\/h3>\n<p><strong>With CSS Module:<\/strong> <\/p>\n<div>\n<pre><code>\/\/ in a CSS file .card { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; } \/\/ in a HTML file <span>&lt;div<\/span> <span>className=<\/span><span>{styles.card}<\/span><span>&gt;<\/span> <\/code><\/pre>\n<div>\n<\/p><\/div>\n<\/p><\/div>\n<p><strong>In Tailwind<\/strong> <\/p>\n<div>\n<pre><code>\/\/\/ all in one file <span>&lt;div<\/span> <span>className=<\/span><span>\"flex items-center gap-4 p-6\"<\/span><span>&gt;<\/span> <\/code><\/pre>\n<div>\n<\/p><\/div>\n<\/p><\/div>\n<p>Obviously, AI will have less to worry about if it&#8217;s all in one file.<\/p>\n<h3> <a name=\"why-ai-likes-shadcn\" href=\"#why-ai-likes-shadcn\"> <\/a> Why AI likes shadcn <\/h3>\n<p>The AI can see the source code of:<\/p>\n<ul>\n<li>components\/ui\/button.tsx<\/li>\n<li>components\/ui\/card.tsx<\/li>\n<li>components\/ui\/dialog.tsx &#8230;<\/li>\n<\/ul>\n<p>inside the project. No hidden implementation, and it can modify components directly.<\/p>\n<p>With a library: <\/p>\n<div>\n<pre><code><span>import<\/span> <span>{<\/span> <span>Button<\/span> <span>}<\/span> <span>from<\/span> <span>\"<\/span><span>@mui\/material<\/span><span>\"<\/span> <\/code><\/pre>\n<div>\n<\/p><\/div>\n<\/p><\/div>\n<p>the AI cannot edit MUI&#8217;s source code. It has to understand the MUI API &#8211; and that&#8217;s harder.<\/p>\n<h2> <a name=\"can-we-improve-on-this\" href=\"#can-we-improve-on-this\"> <\/a> Can We Improve On This? <\/h2>\n<p>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:<\/p>\n<ol>\n<li>Generate The Page<\/li>\n<li>Ask AI To Identify Repetition<\/li>\n<li>Extract Components<\/li>\n<li>Separate Content From Presentation<\/li>\n<li>Establish Boundaries<\/li>\n<\/ol>\n<p>In the next article, I will expand on each step and provide a walk through. <\/p>\n<p>Do you have a similar experience with AI generated code? Does some of the AI tendencies surprise you??<\/p>\n<\/p><\/div>\n<\/article>\n<p> <!-- Bottom content skipped via SKIP_BOTTOM_CONTENT config --> <\/div>\n<p> <\/main> <\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Fuente: <a href=\"https:\/\/dev.to\/cathylai\/why-ai-generates-500-lines-of-code-in-one-file-part-12-j6p\">Art\u00edculo original<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>TL;DR AI tends to generate the &#8220;path of least resistance&#8221; 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). &#8220;Amazing&#8221; AI Code? So your non-technical [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2648,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[41],"tags":[],"class_list":["post-3118","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-devto"],"jetpack_publicize_connections":[],"_links":{"self":[{"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/posts\/3118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/comments?post=3118"}],"version-history":[{"count":0,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/posts\/3118\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/media\/2648"}],"wp:attachment":[{"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/media?parent=3118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/categories?post=3118"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tucumandevelopers.com\/index.php\/wp-json\/wp\/v2\/tags?post=3118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}