9 ms·
Why AI Sucks at Front End
- christophilus 6mo agoDunno. It’s really good with Preact + Tailwind. And I have to say that I think most problems can be solved this way and don’t require a special one-of-a-kind UI. In fact, the fewer special UIs I see, the better. I prefer standardized patterns unless they truly don’t fit a domain.
- rgoulter 6mo agoMy first instinct reading an article (especially one about LLMs) is to scroll down to see the structure.. Anyway. Do people get the impression that LLMs are worse at frontend than not? I'd think it's same with other LLM uses: you benefit from having a good understanding of what you're trying to do; and it's probably decent for making a prototype quickly.
- PaulHoule 6mo agoWho says it sucks at front end? Unlike Stackoverflow, AI does a great job of "center a div." I tend to like working from reference documentation which is great for Python and Java but challenging for CSS where you have to navigate roughly 50 documents that relate to each other in complex ways to find answers. Like I don't give it 100% responsibility for front end tasks but I feel like working together with AI I feel like I am really in control of CSS in a way I haven't been before. If I am using something like MUI it also tends to do really good at answering questions and making layouts. Thing is, I don't treat AI as an army of 20 slaves will get "shit" done while I sleep but rather as a coding buddy. I very much anthropomorphize it with lots of "thank you" and "that's great!" and "does this make sense?", "do you have any questions for me?" and "how would you go about that?" and if makes me a prototype of something I will ask pointed questions about how it works, ask it to change things, change the code manually a bit to make it my own, and frequently open up a library like MUI in another IDE window and ask Junie "how do i?" and "how does it work when I set prop B?" It doesn't 10x my speed and I think the main dividend from using it for me is quality, not compressed schedule, because I will use the speed to do more experiments and get to the bottom of things. Another benefit is that it helps me manage my emotional energy, like in the morning it might be hard for me to get started and a few low-effort spikes are great to warm me up.
- moffkalast 6mo agoCSS has definitely become a breeze to work with since LLMs have become a thing. Conceptually it's very "memorize how a billion possible combinations of obscure parameters interact with one another under various conditions" kind of setup so it's a perfect fit for machines and a terrible fit for humans. The main limitation I think is that they're blind as a bat and don't understand how things stand visually and render in the end. Even the best VLMs are still complete trash and can't even tell if two lines intersect. Slapping on an encoder post training doesn't do anything to help with visual understanding, it just adds some generic features the text model can react to.
- PaulHoule 6mo agoI'll grant that. A lot of times I want to give it a screenshot and say "here is what is wrong" and this is usually useless. I will say though that multimodal capability varies between models. Like if I show Copilot a picture of a flower and ask for an id it is always wrong, often spectacularly so. If I show them to Google Lens the accuracy is good. Overall I wouldn't try anything multimodal with Copilot. For that matter I am finding these days that Google's AI mode outperforms Copilot and Junie at many coding questions. Like faced with a Vite problem, Copilot will write a several-line Vite plugin that doesn't work, Google says "use the vite-ignore" attribute.
- bmurphy1976 6mo agoI still struggle with the design, but once that's locked in getting it to implement things is pretty straightforward. I do have to fight the AI a bit to make sure things are simple and clean, but it's pretty good at that with the right hand-holding. The design is still a problem though, precisely because I am not a designer. I don't know what's actually good, I only know what's good enough for me. I can't tell the difference between "this is actually good" and "this is vibe-designed slop" but I have enough experience to at least make sure the implementation is robust.
- vfalbor 6mo agoThis is something that talk with some friends, How IA is doing things in front end is complelty different from Humans. Humans can select colors and themes based in their criteria, and IA only generate what they learn as a machine that they are, and It's not bad, but the thing is that people that use IA for develop front-end are adapting what IA generate, and in the other hand developer is adapting to client. Which are different approaches.
- feverzsj 6mo agoIf you are really good at something, you'll find AI sucks at everything.
- nxpnsv 6mo agoI think this correct it’s mediocre at a lot. It’s only 10x when you don’t know what you’re doing or doing something simple.
- danielbln 6mo agoIt's also more often than not good enough, which for a specialist is bad, and for most everyone else is absolutely sufficient.
- tracker1 6mo agoI don't necessarily agree with that... I think that it's a matter of perspective. I find that AI tends to make a lot of the same errors I've seen from actual developers, especially when interacting or leading foreign dev teams. When I spend a lot of time in planning mode, I tend to get a lot more value out of the output and have to redirect far less. It also helps to establish your API interfaces, reference points, interactions, behaviors and even a lot of the test harnesses ahead of development cycles. You need to define a lot more ahead of letting it go. I would say that I'm getting maybe 2.5x the value and 5-10x the output from AI... by value, I mean what the end user/customer cares about... by 5-10x I'm including the increased documentation, testing, etc.
- azangru 6mo ago> If you are really good at something, you'll find AI sucks at everything. Nah, just at that something :-)
- daveguy 6mo agoI think the point is, there's always someone good at what you are evaluating. Anyone with expertise in the domain will recognize how back it sucks in any given domain. Don't get me wrong, AI can definitely be used as a tool by someone who knows what they're doing to avoid boilerplate. But anyone using it in a domain they aren't already an expert in will unknowingly accept AI f ups.
- hmontazeri 6mo agoKimi k2.5 has been so far the best model for frontend. At least from my experience so far
- jdmoreira 6mo agoHumm... better than Opus 4.6 or 5.4? What are you using for the frontend? React component libraries?
- Gualdrapo 6mo agoIf AI really sucked at front end I'd have a job right now.
- skillina 6mo agoThat assumes all companies care about providing a good front end experience. Many do not. Many are actively hostile to their users.
- nik282000 6mo agoIf management could tell the difference between a good product and some fragile slop they wouldn't be in management, they would have a productive job.
- dreis_sw 6mo agoIf the economy wasn't completely broken you'd have a job right now.
- danlugo92 6mo agoIf we had annual reverse hunger games the economy wouldn't be broken
- the_gipsy 6mo agoIn general, AI is not replacing developers yet. It's a convenient excuse to fire people for other reasons, and to pay lower wages.
- squidbeak 6mo agoIf AI is being used to lower salary burdens, it categorically is partially or wholly replacing developers. Meanwhile, elsewhere in this discussion, you can read examples of people who have used AI entirely to build their product. Previously they'd have had to hire a developer or become one themselves. This suggests to me it is indeed replacing developers - just not where you are choosing to look.
- deleted 6mo ago[deleted]
- deleted 6mo ago[deleted]
- Zeff84 6mo agoSure, but most companies don't seem to value Front End
- vaylian 6mo agoReally? Front End is the customer-facing part of the web site. It's also the part of the stack, that non-technical people, including management, have opinions on. Or do you mean something else?
- netghost 6mo agoThey might have opinions about it, but look at the pay for frontend engineers at the same company. It's not uncommon to see the same seniority be 20% lower than a backend role.
- Zigurd 6mo agoAfter years of writing native code for mobile apps I'm using Flutter, and finding that, if you do things step-wise, and check in intermediate results so you can easily roll back failed experiments, agent-assisted coding can accelerate your front end coding substantially, and you can deliver more polished results instead of obviously demo grade visual results that need refinement. And that makes it easier to communicate with your non-coder colleagues.
- dbbk 6mo agoExcept... it doesn't
- sys_64738 6mo agoNo worse than humans then.
- jncfhnb 6mo agoImo front end is what it’s best at.
- NewsaHackO 6mo agoIt really is, especially with frameworks. The author post reeks of feeling threatened by AI encroaching on his job, especially with the weird AI digs
- osjsisjdjajxj 6mo agoDamn, if this is the best AI has to offer, then I pity all the AI enthusiasts out there. They’re gonna have a rough waking up once this bubble bursts.
- deleted 6mo ago[deleted]
- faangguyindia 6mo agoAi ain't gonna perform at level of top front end designer but you will get you halfway at significantly less cost.
- totalwebtool 6mo agoExactly, it will do a decent job with designs using an established component library or design system. For most/many sites and web apps it will be better and faster than trying to design from scratch. There will continue to be a place for highly custom, unique designs but most smaller sites don't need to start there.
- osjsisjdjajxj 6mo agoDecent? No. It’ll do a job. Decent still way too high a compliment for such slop.
- jjfoooo4 6mo agoAI is a floor raiser, not a ceiling raiser
- osjsisjdjajxj 6mo agoIt’ll get you a generic template you could’ve gotten from any website builder out there with roughly the same amount of effort. That is not “halfway” in the slightest. That’s getting your foot on the door. Quite literally the absolute bare minimum.
- anonu 6mo agoSite has been slashdotted
- TechSquidTV 6mo ago...Does AI suck at front-end? This is news to me.
- rboyd 6mo agodouble down on betting your career on being a css expert? what could go wrong
- coder68 6mo agoAI is much better at front-end than me, it has really enabled me to build visual apps as a normally backend/ML guy.
- khasan222 6mo agoNgl I’m reading this article after having used ai to build a beautiful front end that is pixel perfect. Yes ai can’t see, it only understands numbers. So tell it to use image magick to compare the screenshot to the actual mockup, tell it to get less than 5% difference and don’t use more than 20% blur. Thank me later. I built a whole website in like 2 days with this technique. Everyone seems to have trouble telling ai how to check its work and that’s the real problem imho. Truly if you took the best dev in the world and had them write 1000 lines of code without stopping to check the result they would also get it wrong. And the machine is only made in a likeness of our image. PS. You think Christian god was also pissed at how much we lie? :)
- 0x3f 6mo agoIt's hard to interpret comments like this because we all have different standards and use cases. So it would really help if you could link to it. Even in a roundabout way if you want to avoid the impression of self-promotion.
- khasan222 6mo agoI built a few websites, most of them it wouldn’t be wise to place on here. But someone emailed me about this, so I’ll do my best to help I did build https://hartwork.life https://hartwork.life for a friend with a design from open ai (pre google stitch which is my current preferred tool) Here is the line from my Claude code to get something like this. Keep in mind I didnt use mcp for playwright with this particular implementation but it is my preferred method currently. Tha CRITICAL - When implementing a feature based off of an image mockup, use google chrome from the applications folder set the browser dimensions to the width and height of the mockup, capture a screenshot, and compare that screenshot directly to the mockup with imagemagick. If the image is less than 90% similar go back and try and modify the code so that way the website matches the mockup closer. If a change you make makes the similarity go down, undo it, and try something else. be mindful the fonts will never be laid out exactly like the mockup, please use blur at a max of 10% to see if the images are closer matching. If you spend more than 10 cycles screen-shotting and comparing, stop and show the user how similar they are mentioning any problems The more text the harder it becomes and it’s why we really need the blue because fonts are almost always rendered differently.
- TexanFeller 6mo agoI'm a backend dev and I'm always hearing about how LLMs are dramatically better at frontend because of much more available training data etc. Maybe my perspective isn't as skewed as I've been led to believe and LLMs need close supervision and rework of their output there too.
- 0x3f 6mo agoI would trust an LLM with backend much more than front-end. Especially if we're talking monolithic and good type system. Ideally compiled. When I say trust I mean it's not going to break the user-facing API contract, probably, even if internally it's a mess. If you let it do front-end blind, it will almost certainly embarrass you if you care at all about user experience.
- clickety_clack 6mo agoIf you do backend blind, it will also almost certainly embarrass you. I’ve never had an experience beyond the most basic crud app where I didn’t have to somehow use my engineering experience to dig it out of a hole.
- 0x3f 6mo agoWorks mostly fine for me on Rust backends. As long as I'm willing to accept tight contracts at the edges with spaghetti in the middle, or otherwise gate approval for everything it does. If I want good abstractions, sure, I can set up approvals and babysit it with reprompting, because it will do stupid things that an experienced engineer wouldn't. But the spaghetti also works in the sense that it takes the input types and largely correctly maps them to the output types. That doesn't emarrass me with customers because they never see the internals. On front-end, obviously they will see and experience whatever abomination it cooks up directly.
- viktorianer 6mo ago[flagged]
- xorgun 6mo ago[dead]
- bushido 6mo agoDesign is an interesting beast. Good design is not always logical. Color theory, if followed, results in pretty bad experiences. And interestingly, good design can't always be explained in a natural language. Main thing is, it's very hard to get AI to have taste, because taste is not always statistically explainable. The best I've gotten to is have it use something like ShadCN (or another well document package that's part of it's training) and make sure that it does two things, only runs the commands to create components, and does not change any stock components or introduce any Tailwind classes for colors and such. Also make it ensure that it maintains the global CSS. This doesn't make the design look much better than what it is out of the box, but it doesn't turn it into something terrible. If left unprompted on these things, it lands up with mixing fonts that it has absolutely no idea if they look good or not, bringing serif fonts into body text, mixing and matching colors which would have looked really, really good in 2005. But just don't work any more.
- djeastm 6mo agoI thought reinforcement learning with human feedback was meant to get that quantification of "taste"
- darzu 6mo agoDoes this website run at 10fps for anyone else? I'm on a mac M4 w/ safari. Really doesn't help the author's point.
- photon_collider 6mo agoI thought it was just me. I'm running a M2 MacBook Pro and scrolling down the article on Safari is quite stuttery.
- lelandfe 6mo agoWow, it's got some issues on Chrome (dropped frames on scroll) but Safari is another level. Selecting text takes time. Looking at Activity Monitor, I see "Safari Graphics and Media" using 200% of my CPU even at rest. A quick profile on Safari shows some layout recalc happening regularly, but surely that shouldn't cause this bad of perf... The last time I found something like this, it was because of 100's of box-shadows. Edit: Sure enough, this cures Safari: *, *::before, *::after { box-shadow: none !important; background: none !important } It's a combination of box-shadows and gradients. Edit 2: Ah, they're using shadow DOM for the img reflection, so we can't affect it. Good gravy is the shadow DOM stuff overwrought, it's 87 elements all told, just for one img.
- ronbenton 6mo agoEverything is nuanced and generalizations help no one. There are absolutely frontend apps where AI straight up crushes. Sure these much be less novel apps but most of what people work on is a CRUD-esque interface.
- mewpmewp2 6mo agoI'm wondering what would be a specific example that AI would fail to create front-end wise, since I've been having quite good experiences with it.
- ronbenton 6mo agoThe author of the post is known for some pretty fancy CSS wizardry. I’m guessing AI is not great on some very specific, advanced CSS use cases where there isn’t much prior work. But again this is an edge case compared to what the vast majority of us are doing
- mewpmewp2 6mo agoBut even then, what is a fancy CSS wizardry that AI couldn't do for instance, but would be trivial for the author? Or is it that AI is not as creative?
- AlexSalikov 6mo ago[dead]
- 1a527dd5 6mo ago...not in my experience. It does what I need it to do; center a div.
- fny 6mo agoAside from the obvious "AI can't see" criticism, AI sucks at frontend because frontend sucks. Why does frontend suck? Churn. To quote the article: 1. "It trained on ancient garbage" which is the by product of massive churn and this attitude leads to even more churn 2. "It doesn't know WHY we do things" because we don't either... even the paradigms used in frontend dev have needlessly churned My fix? I switched from React/Next to Vue/Nuxt. The React ecosystem is by far the worst offender.
- derwiki 6mo agoWhat about plain JS without React or another framework? I don’t do much front-end these days but I’d love to toss out as much front end-complexity as possible
- WarmWash 6mo ago>It's notoriously bad at math, If you are going to criticize LLMs for being out of date, at least make sure your understanding isn't out of date.
- schwede 6mo agoIsn’t this still true for the large language models and math is detected and handled by an external tool? Anything you can give as a source for the latest state of the art?
- adastra22 6mo agoNo? I’ve never heard of that tbh.
- osjsisjdjajxj 6mo agoThen you are the one with the information out of date, because that is absolutely the case.
- est 6mo agoI'd say UI is mostly a 2D tweaking + state management job, they don't exactly fit in a seq2seq style.
- bulletsvshumans 6mo agoOne thing that helps with #2 ('It cannot see') -- Try playwright-cli. Your agent can use it to inspect the DOM, see what styles are applied to elements, simulate clicks, etc.
- parski 6mo agoAI is great at front end. Scroll based animations are the devil and these "boring" designs it defaults to are (more often than not) super intuitive. Sure, some design quirks it'll guess are annoying, but have you seen the web?
- deleted 6mo ago[deleted]
- PaulShomo 6mo agoAgreed on AI limitations in originality, but the industry sucked at UIs for so long, my expectations are low. I’m just hoping for widespread use of models that take the viewpoints of newbs for UI testing.
- janpeuker 6mo agoI don’t 100% agree with the “AI can’t see” because in a Ralph-loop against screenshots, it basically can (inefficiently). But more importantly I do find it generally curious how bad even frontier models are in spatial thinking. Say “Align these right to left unless it crosses the center” or “Keep this box always visible and collapse X to make space” and all hell break loose - maybe it might work but in an extremely slow, costly and tedious process.
- linzhangrun 6mo ago[flagged]
- bryanhogan 6mo ago> Just look at the frontend work people made with Claude Code within only a few hours after the Claude Code source leak: https://news.ycombinator.com/item?id=47597085#47598853 https://news.ycombinator.com/item?id=47597085#47598853 I mean, yes look at the vibe coded sites people made after the second Claude Code leak! They are horrible, there are so many issues with them. Look at the existing comments some people with front-end / design knowledge made there. Just because bad website existed before AI does not mean we should be happy to pump out more bad websites with AI.
- linzhangrun 6mo ago[flagged]
- bryanhogan 6mo agoI mean, there's a fundamental missing understanding of how to build a coherent design, then there's also the problem of just poor implementation such as the animations. The Lua site has some problems as well, like an uncessary border, text size and spacing, even when it's this minimal. You can get much faster and better results from using or taking inspiration from something like Astro Starlight or UnoCSS Astro Starlight: https://starlight.astro.build/ https://starlight.astro.build/ UnoCSS: https://unocss.dev/ https://unocss.dev/ But of course, I agree that with AI you can create websites much faster, but it doesn't replace the knowledge needed to build a "good website".
- linzhangrun 6mo ago[flagged]
- linzhangrun 6mo ago[flagged]
- dzonga 6mo agoit's even worse on backend tasks. but people writing shitty node.js code might beg to differ.
- eljee 6mo agoCreating a CODING.md or FRONTEND.md with rules and expectations for your LLM helps tremendously. You're right AI is not great at frontend (yet), but it does lift alot of the load. Like the top commenter says, there's not a great harness for iterative frontend building. But it can get you 80% of the way there if you give it some rules, and can do the annoying bits so you can concentrate on the 20% that is about design, effective communication and pixel-perfection.
- tracker1 6mo agoI don't even agree with that... even if you constrain it to a pretty prescriptive toolkit (MUI, Mantine, etc) it still does a pretty janky job of things.
- coldtea 6mo ago>Try asking it for some scroll-driven animations or custom micro-interactions Unrelated, but as a long time front-end dev, FUCK THOSE.
- hamzac98 6mo agoDid they use it on this site to prove a point?
- chente 6mo agoI have found that working with llms for frontend to be better than most of the developers I have worked with. A majority of devs I came across only had enough frontend knowledge to be dangerous and to consistently introduce frontend entropy.