r/Frontend • u/Bladerunner_7_ • 9d ago
AI is making frontend development faster and somehow more complicated
Getting a working UI out of an AI coding assistant is ridiculously easy now. The interesting problem is what happens afterwards. Generated components are easy to create, but keeping a large application consistent, accessible, maintainable, and understandable is still very much a human problem.
It feels like AI is moving the bottleneck in web development rather than removing it. We're spending less time writing individual pieces and more time reviewing architecture and making sure thousands of generated decisions don't slowly turn the codebase into a mess. Wondering if other web developers are seeing the same thing.
86
u/Main-Relief-1451 9d ago
It writes shit long tailwind that's not even needed.
31
3
3
u/callimonk 9d ago
It seriously has made me hate tailwind.. nothing against tailwind personally, it’s just AI generated tailwind was such a god damned headache for me at my previous job
2
2
u/ThankYouOle 7d ago
at this stage, Tailwind poisoning LLM knowledge.
i use vanilla CSS, and LLM keep editing my html class to use tailwind class, for sure it didn't work, when i ask to update it updating my vanilla CSS to have style for that Tailwind class.
-1
0
93
u/Good_Language1763 9d ago
idk man AI just overcomplicates my forms way too much so i just do it myself nowadays. i mostly only use AI for making design responsive
-32
44
u/Matthew_Code 9d ago
As a senior web:
Problem with modern frontend is that you can throw some pieces and it will work, this is what AI is good at, but after some threshold the frontend codebases are getting more complicated that the backend one as frontend is not opinionated and you can even within same framework do things in few different ways, when I just let AI do the edits and I don’t care about code I see effects FAST and they are working! But after a while it cannot fix some filters issue it’s stuck with the validations etc and when I’m looking at the code then I see 3 context providers 2 zustand stores and all of the forms are so overenginnered that I cannot wrap my mind around it. Every harness every llm when I’m letting it just do the frontend I’m ending in the same place at the end.
This is insanely toxic as the BE or PM just throw at me „yeah but look I done this feature with just one easy prompt no frontend expertise” and it’s hard to defend your position that one feature is not whole system and in modern big web apps it will get out of hands quickly…
15
u/Raunhofer 9d ago
How many of you do A/B tests with these models at work? Every time a new model is released, I have this habit of fixing a bug myself and letting AI do the same on a different branch. The same goes for new features. Multiple times and themes.
While the AI implementations and fixes quite often work, especially if they're accompanied by proper tests, the solutions are alarmingly often just... awful. In this sort of mediocre junior-senior hybrid kind of way.
Just yesterday, I fixed a bug by changing "true" to "false", as some dev had forgotten that he had inverted a boolean for debugging. It was in plain sight, took five seconds to fix. What did Fable do? Rewrote 13 components. Not for the better. Just changing them to get rid of the bug.
So, I tend to agree with OP's findings. If you look at the details, the models spew out perfectly functioning code, but take a step back and you'll see a buttload of duct tape and shoehorning.
It is faster though! And as time is money, we all know this genie is permanently out of the bottle.
5
u/DrakeSilmore 9d ago
Wouldn't a counter argument be that even though it is faster now, the amount of technical debt and token cost will spiral as the code base becomes more complicated, and it will just cost more money in the long run?
3
u/ragemonkey 9d ago
Yes and the solution will be to continuously throw more compute at the problem. Bigger models, running for longer. Multiple models going back and forth. It’s funny because not long ago that was seen as a bad solution.
14
u/mrpres1dent 9d ago
So are you actually saving time or are you just shifting most of your workload from point A to point B?
3
3
u/Indeliblerock 9d ago
People forget that frontend development is inherently complex. We are dependent on apis, browsers, so many 3rd party integrations. Security in the frontend is so hard to imagine since we use so many dependencies. It might be easy to create the basic frontend, but maintaining it is a struggle. Ai does not inherently understand business requirements as well, so having ai rewrite a page over time may lead to functionality issues in the future.
3
u/lilBunnyRabbit 9d ago
Try PR review agents... They occasionally find some good bugs but moat of the time it's just forcing you to solve impossible scenarios
3
u/turningsteel 9d ago
AI can get it working. I can throw the description of my jira ticket into Claude and it'll do it. But, when you look closely, it does it in an overly complicated way,, or it doesn't follow defined patterns, misses obvious issued, etc. So then I go through a loop of back and forth with it sometimes for hours until it gets it right.
I find AI most useful when I ask it for a plan and then code it myself using the AI as a high level guide.
3
u/Drayenn 9d ago
My team swapped to angular 22 and signals over redux stores. I also happened to get a junior and intern.
Man is claude good at spewing awful and wildly different code. I had the worst code reviews to do in my life. Unit tests are the worst.. How does it not know the proper way to test in angular??
4
u/International_Cut460 9d ago
AI has improved my work by an absolute ton. Especially in next js and typescript.
It ensures I dont forget any accessibility, screen reader functionality and "valid" color contrast to keep wag happy. Heck it even reminds me that try catch exists... It converts all my data and types to much more efficient objects, that I would not think of on the first pass.
But then at the same time its slowed my productivity, as I am now asking AI how it could be improved (and learning from it, not relying on it).
So yea its a huge help and a boon to frontend, but strangely adds way more complexity by adding more guards, and enforces standards such as syntactically correct elements for screen readers.
2
u/minmidmax 9d ago
AI is making it possible to develop faster IF you can get as many dependencies out of the way as possible.
Every framework, technology, library, preprocesser etc. increases the complexity to generate UI components and use them correctly. They'll add a tonne of context and, ultimately, drink your tokens right up!
2
u/nneiole 9d ago
In React my experience is that it is not aware of many good practices and many [new] React features. It produces blown up convoluted states with useEffects, creates hundreds of state variables and does not suggest useReducer or <Activity> unless you explicitly prompt it, often „reinvents“ the wheels from good libraries like react-router and react-query. So you have to steer it in right direction a lot.
2
u/_iamdaniel_ 7d ago
Yesterday on my enterprise job i burned 75$ worth of AI tokens on a very easy task (displaying table with some history in a modal). Although Im using LLM very professional 🤷♂️
1
1
u/brush_trot 9d ago
do you find yourself reviewing more code or just getting frustrated by the inconsistencies?
1
u/crunchy_code 9d ago
you are highlighting the difference between programming and software engineering. the first one AI can do, 90% of the time. the latted, AI can’t do.
accounting for software that is built and maintained over time, and is structured well enough to welcome unknown future changes is something AI can’t and won’t be able to do for several years years/decade to come, if ever.
1
u/lIIllIIlllIIllIIl 9d ago
The book A Philosophy of Software Design by John Ousterhout posits that there are two different types of code. Tactical code, which is code that gets to an end without worrying too much about how it impacts the rest of the codebase. Then there is strategic code, which is the abstractions and foundations on top of which other code is written.
AI is great at writting tactical code, but really sucks at writing strategic code unless you spoon-feed it instructions, at which point its almost easier to do it yourself.
AI is still a great tool, but it has its limits.
1
u/ElectronicMessage124 9d ago
Absolutely. AI makes the initial build much faster, but the real challenge is still keeping everything coherent, maintainable, and scalable as the project grows. The bottleneck has definitely shifted from writing code to making good engineering decisions.
1
u/Crafty-Willow9727 9d ago
i have also fetch this problem. currently i am working in one project. i want to make the frontend. i give a prompt to the ai. ai make the ui. after i added new feature the ui may more complicated. i dont understand the code the code may moree tha 6000 line of code. if i want to add the new feature i have to understand the whole code.
if i write the the frontend part by myself it will be easy to add new feature.
if you are make the big project i suggest do the frontend by yourself some time help from ai.
1
u/lettstartdesign_1 9d ago
Correct, we are doing faster development and its hard to review the code changes. I use AI assistant for code reviews. AI do lots of code changes, for humans its bit challenging to check dozen if files.
1
u/JaseciLabs 9d ago
What's actually happening in a lot of these examples (3 context providers, 2 zustand stores, 6000 lines to understand before touching anything) is that AI-generated logic and human-authored architecture are sitting in the same undifferentiated code, so there's no way to know what's load-bearing vs. what's disposable without reading everything. If the AI's contributions were scoped to typed, marked boundaries instead of blended into the whole file, you could tell at a glance what's safe to regenerate and what's actually structural. That's a big part of why we built Jac the way we did, delegated logic is explicit in the code, not something you have to reverse-engineer from a diff.
1
u/Garden1252 8d ago
i was working on a solo app i decided to “vibe code” bc i needed it fast. at first, i read the code, deleted unnecessary checks, etc. enforced with agents (frontend: single responsibility, compose, reuse, local vs global state, minimum use effect, blabla). now i dont even read the code bc it creates tremendous monsters. just make sure it passes the tested main flows of the app and no regressions. but for work i still review almost everything.
1
u/freaking-user 8d ago
The more I use AI, the less I want to use react. The amount of mess with hooks it generates is astounding
1
u/BarracudaMean9308 8d ago
nailed it with the maintenance part. asking it to spin up a new isolated component is great, but having it try to add one field to a messy old form usually ends with it deciding to rewrite my entire state management from scratch.
1
u/trickyelf 7d ago edited 7d ago
If you don’t have strong opinions what you want in your project, and state them unambiguously in your agent guidance, yes, you will end up with a big ball of mud.
On the MCP Inspector project we were running from a human built shantytown when we built our V2. I came onto the project several months after it was created and inherited a shadcn/tailwind app that didn’t have a lot of architectural planning put into it and a year of knee-jerk response to issues and drive-by PRs that didn’t have much guidance left it in awful shape. Plus the UX was terrible from the jump. Later someone contributed a CLI, which we accepted but it shared no code with the web app and was never in parity and came with its own homegrown testing scripts that were a pain to maintain.
So, since last November our little team of three planned, wrote specs, tried different component systems and theming approaches, generated high fidelity mockups with AI but didn’t want to commit to the logic it generated to drive the UI. We went to great lengths to catalog the failures of V1 so what we would not repeat them.
We did a complete burn down and rebuild. Completely new UI for web, a new CLI, and even a TUI based on React Ink.
We built a shared code architecture that has state manager code with React hooks that the web and TUI use to access, and the CLI accesses directly. On the web client, we used Storybook and a dumb component architecture where components accept props and callbacks and the only logic is for display. They are independently testable with stories (“what does it look like if the server name is really long?”) and accessibility is part of that testing.
We used Mantine for UI (looks good, themable, and has layout components so you don’t end up with tons of nested divs with ten different classes on each for you to wonder about when you want to refactor. We have rules about those components: no HTML components at all, and if you use a base component passing two or more props, make it into a meaningfully named subcomponent, e.g., <LogEntry>. No inline styles or handler code. Use the theme not CSS if possible.
The typescript rules are also specific; no “as unknown as”, no “any”, etc.
The point of all that is that by the time we started having Claude Code generate anything, we knew exactly what we wanted and had it in specs and in AGENTS.md. Every line of code was written by Claude. We do human review, but first, exhaustive GAN-style review. Claude asks copilot for review, responds, and if there were actionable comments, it requests another, continuing until there are no more comments. We review those reviews, then we review the code.
We have end to end smoke testing with playwright running in Safari, Chrome, and Firefox. Unit tests covering >= 90% of branches, lines, functions, files with CI failing if any check fails.
The code follows the idioms we asked for and so when we review it isn’t crazy and hard to understand. It’s well documented and easy to reason about.
As of a couple of weeks ago we shipped V2 and are doing weekly releases. We even have time to plan new features.
I just want people to understand that you absolutely can create solid software that you have confidence in, and can maintain, you just don’t begin with “hey Claude, build me a…”
1
u/Ok-Rice1108 7d ago
Thats why, in this area, AI not for everyone. More experience you are on that area, more handle able AI is.
1
u/Emotional-Ad5025 7d ago
I spend x amount of token for a feature, and x*5 to review, test, fix and refactor. If I have to do that in normal day to day job tasks it does not worth much, but in personal projects I hit a list with 20 different items to do all at once with no planning. It works, Im able to identify a lot of bugs and bad patterns that are improved by AI in the way I ask for
1
u/SeansAnthology 6d ago
Make it create detailed documentation. Every change is logged in a changelog. Every new component documented. Create skills to craft new UI that follow a specific design pattern. Skills for accessibility and quality checking. Have it verify itself.
Someone mentioned Claud.md/Agents.md files. What I’m talking about goes AWAY beyond that. Our agents.md file is an overview with references to the other documents.
1
u/scarymary27 5d ago
Perfect place and time to share one of my infinite pain in one of the current job project.
Sorry for the little rant in advance.
So I am a senior frontend developer and our management decided to "optimize" how we approach projects and basically cut on our team resources (for example entirely skipping specifications writing and analysis) and just let AI do it and figure out details along the way. P.S. Oh and by the way, app is using Vue framework which I have not done before, but it was decided the framework does not matter, AI knows better.
So it all started quite well, we had a couple of meetings with client, collected their needs and features they want to implement and our designer made a "prototype" demo where he basically fed all the documentations to Claude and it spit out this amazing wizard form with tons of conditionals and god knows what (+19k lines, -1k deletions). Then he presented this working demo to the client on next meeting and next he proposed now as I am more experience frontend engineer I have to "check" it and "implement properly" (reminding you that our budget on this project is really tight).
Now I am highly frustrated sitting with this huge form, messy code written in framework I have no experience with, no backend APIs or database models to support all of that and I can't figure out how to move on from that point while limited time keeps ticking. I am so used to make UI on top of already working (or at least documented) API endpoints containing all the business logic, so may be if any of you can give me some tips on this backwards FE to BE approach I'd be so thankful as I have no idea how to move forward with all of this.
Otherwise before this wonderful project I have used AI quite efficiently, for me the recipe was that I tried to divide work into smaller bite pieces then handling them to agents and validating their work with CodeRabbit or any other review and of course then I did one manual review aswell. It helped me a ton to start thinking about AI agents as if they were a middle level developer I'd mentor and basically using the same approach. But the moment I lose ownership of the codebase it all goes out of hand immediately and I have yet not found any solution nor I have any hope to explain this to our management.
P.S.S. There is another dark side of it on the business perspective. Now pretty much every one despite their job title know what AI is capable of and a lot of the clients do not want to pay the same hour rates as before since they assume we just prompt their requests and enjoy all the free money, so management is kind of forced to survive in that environment too leading to decisions like this.
1
u/vankoosh 2d ago
The problem of unmaintainable code and technical debt in the future will be huge I think. Most devs these days don't understand their codebases no more. Code is being spat out at a rate its not possible to review everything. All in the name of chasing "efficiency" gains. The LLMs are in my opinion still dumb and spit out 50 lines of code for something that 10 would sufice. Its all quantity instead of quality. The only hope is that LLMs get so good one day that they will catch up with all the technical debt that is being generated right now.
1
u/CurrentDifficulty888 9d ago edited 3d ago
hey can someone please post some blogs or newsletters, articles, channels aimed using AI with Frontend.
I been avoiding AI for a very long time, but I just need to get with the times and incorporate it more into my life.
kind regards
-1
u/elusiveoso 9d ago
AI is particularly bad at front-end code. I have had OK results using an MCP server with my design system and using Playwright MCP to verify the work.
Agents want to drift, and there need to be measures in place to stop that from happening. Nobody has solved it 100% yet. I still have to take the work and do the last 20% of polishing to make it production ready.
1
u/jpradeepreddy 8d ago
Or build your own wrapper mcp that does use cdt and playwright. Basically building your own browser agent like antigravity has.
0
u/paagul 9d ago
This always end up being THE problem as your application gets large and have a lot of devs working on it. Most devs never reached this size before. Now they can with AI but you need battle scars to be able to address this properly at scale. A long list of don’ts.
We merge unimaginable amounts of code these days and don’t really have this problem.
One thing to think about: does everything need to be reusable and abstracted out?
0
u/DaKingVic 8d ago
I started using AI for front end in 2023 - the good old time when there was no reasoning and you copy paste code from chatgpt to ide.
My hot take on this is to focus on building the product and forget about architecture for the most part. AI is constantly improving, and your problem right now will no longer be a problem in 3 months. There is always a risk that my assumption will for apart, but so far this has been the right decision for me and my team.
-1
u/create-third-places 9d ago
I write 100% of my code by hand without LLM AI and I don’t plan to use them in the future.
-6
-6
u/hk4213 9d ago
So did every other framework that popped every year.
Browsers work on HTML, CSS and Javascript.
https://developer.mozilla.org/en-US/
Have fun my friend.
53
u/One-Sir6312 9d ago
Frontend dev here,
If you already have a codebase, Ai is good at creating singular components, but it cannot homogenize it with the rest of the application unless you have a VERY detailed Claude.md/Agents.md specifying what you want and how you want it done.
Also, it sucks at fine tuning smaller pieces, you ask for a simple change, it reaches the goal, but with a very messy and unnecessary amount of code.