Ngl 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? :)
It'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.
I 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 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.
Thanks. I would say yeah, it's not too bad, but it is also a pretty simple site.
There are some interesting issues that probably relate to your workflow, like the nav links are different sizes, the icons too. And the resolution of some of the images/icons on a MacBook is poor. But I suspect that's because a simple ImageMagick raster diff will fuzz over those kind of differences.
I wonder if you can make some tweaks or find a better representation than pure raster screenshots to fix this. Can't really deal in vector images because AI sucks at outputting those, and you can't print a web page to SVG.
There was a super niche website framework that only used SVG a while ago. Would be funny if that kind of thing makes a takes off just so AI can do better.
I feel like 2 days to build this is a bit much given the simplicity. I think the point stands.
I will grant you that this is more tasteful than most of the AI sites I see. It’s a good looking little site but nothing here screams, “AI really accelerated this.”
Thank you. Yes took a bit but still way faster than by hand. There are other store pages that are also implemented. This 1 page took me like an hour lol.
Please share what you created! I think people have very different views for what is a good interface, or a tolerable one. I think as a front-end developer and designer I notice a lot of problems most people don't care about.
Sorry to be the one to break it to you, but no, you did not design a website just fine with AI. It’s not even just “good”. It’s average. Painfully average, to the point of it being easily mistaken for a scam.
I completely disagree. Making a average website is the goal of most businesses that are selling an actual product. His website looks modern and welcoming and does not distract or take away from the actual content. This exactly what most people should aim for. Some actual constructive criticism is some o the icons in the example log mood look weird on my phone, with really small emojis overlapping the face emoji
No one should aim for average, that’s an incredibly defeatist way of looking at it. Besides, design matters. I know HN is frequented mostly by people with very little interest in such topics, but design absolutely matters.
And yes, while the author’s website is perfectly passable, it is by no means “good”. People pick up on that, they might not know they do, but they do. Design wouldn’t be an industry and a school by itself if it didn’t matter and just the average were good enough.
A lot of people don't make websites for a living. If they are a small business and have other things to worry about in terms of actual work, being able to prompt for a clean, professional website frees up their time and means they don't have to use additional funds to hire a developer.
When I shared this I wasn't thinking about the marketing site -- I meant to show the product itself. Given the feedback here I no longer think it's a good representative as-is, especially with the generic SVGs / rounded cards
I can't help but think you and the other commenters reducing this to slop didn't even try the product. I thought it went without saying that I wasn't posting to show a marketing landing page.
Some more serious critique of things I noticed within 30 seconds:
- Text isn't selectable on the page.
- The tooltip in the "day 1" to "day 14" cards gets cut off by the border (I see this mistake ALL the time with AI-generated frontends btw)
- It's sparse and very long. I think the information could be condensed in half the size, and it would improve the presentation. This is personal preference though.
- The playbooks' "mark complete" are not persisted on reload or navigation.
All in all, it's functional and quite decent. I agree with the other people saying it looks generic, but I disagree on it being necessarily a bad thing for this kind of product.
I know nothing about pools so I can't comment on the accuracy of the playbooks. It's nice that there's so many of them, but given the LLM vibe of the text I'm slightly suspicious.
Though it's somewhat clear from the use of tiles with the icon colours and the choice of border colours and all, I quite like it. I would have expected the colour theme from the navbar to be repeated because that's a more non standard palette. I would do that, maybe use a different tile layout (use a tile shape resembling a pool tile? Or even a rectangle signifying a typical pool shape) and create some vector icons for them using the navbar colour scheme.
I see that you haven't finished the Automatic Sensor Automation. If you need help with that, contact me, I have experience with embedded product development and I like working on interesting projects :)
Why don’t these llm’s just allow you to pick from a set of standardised templates and then allow you to customise it from there in terms of both functionality and design?
What you have got as output is what I also get as output from llm’s - they suck the soul out of everything. Which is fine in the right context but that shouldn’t we as a species strive for in design imo.
Well it works but it also looks like every other generic bootstrap based website with not even an original palette choice.
Great for a project like this, unusable for any client work
Is this a critique of the marketing page or of the product itself?
I didn't intend for this to be about the marketing page -- what you say is true of just about every marketing page. They're prevalent because they are good at distilling information without overwhelming the user. But I agree I can do better and will work on this more, I really appreciate getting this feedback
Most people look at pool chemistry/maintenance as painfully overwhelming, so for everyone to say this looks boring or mundane is a bit validating. No one has (yet!) said they don't understand the product, it's purpose, or it's value :)
The palette looks a lot like the basic colors from Bootstrap is more the thing. Which is what models tend to do a lot of the time, because you know, that's what's been learned.
Also:
- why shadows somewhere and not for other cards?
- why so many different font sizes with no hyerarchy?
- the paddings and margins are inconsistent and don't convey visual rythm. Sometimes there's too much space and sometimes they are too cramped.
ecc...
Is this an ok amateur website you couldn't have made this quick? Yes.
Is that a sufficient value proposition to say that Ai has solved frontend? no.
On a side note: Would you pay the actual real price of these models to achieve this same results, if they weren't subsidized by delusional billionaires? Up to you to respond.
Sorry but this website screams AI slop to me. Very sparse, lots of cards and random icons and rounded corners, looks like a few messages in to a Claude code session
I intended to share the product rather than the marketing page. I mean, I didn't intend to share this at all yet because it's not done, but when I saw people asking for examples..
But yeah, marketing site looks like a marketing site. I'm realizing now that a lot of my app's internal design/flair is missing from the marketing page -- so I appreciate your looking/commenting
Hey, one thing I made with this technique is hartwork.life a simple Wordpress store for a friend. I used open ai to design it for me, and then used the techniques above to get Claude code to implement the proper designs.
I am still trying to learn how to wrangle Claude properly, but I have this Claude.md[1] for that I used to make the website. In particular one of the last rules about using imageMagick for comparison.
I haven’t touched this website in a bit (waiting on client) so now I use playwright mcp for the screenshots and the browser interactions.
I started with a boilerplate but AI has been huge at letting me get what I want in terms of frontend building when I was never talented at design or css.
I built https://bridge.ritza.co (demo@example.com username and password if you don't want to sign up) as a trello/linear replacement without looking at a single line of code and it's both good enough for me and doesn't have the obvious AI frontend 'look' as it was copying from the starter.
Highlighted text "no per-seat pricing" is unreadable in dark mode on the home page (dark blue on black). It's surprising for me to see someone use this as an example of decent design because I'm somewhat sure this front page text coloring was never seen/reviewed by a human.
I am a backend guy, so forgive my ignorance, but for web based apps I am confused what "pixel perfect" even means. I can build a site to look one way on my computer, it will most likely not look the same way on whatever device you use to access the site.
Feeding the model images for my local computer sounds like a recipe given my experience with the tools to have it over-optimize for the wrong end device.
Pixel perfect means it looks EXACTLY like the design comp.
It goes completely out of the window if the browser window isn't the exact size of the mockup.
You might charitably say that pixel perfect means that the implementation intersects with the design comp at some specific dimensions but where are the extra rules coming from, then?
It's an archaic term that conflates the artifact produced by an incomplete design process (an artist's rendering of what the web page might look like) with the actual inputs of the development process (values and constraints).
"Pixel perfect" is about attention to detail and consistency. Margins, padding, or the combination of these inside other containers will stick out when they're not consistent.
Here's an example that I personally encountered: what if you have a <h1>Text</h1> and it has a certain left margin.
Then another heading except it has a nested button component (which internally comes with some padding). Then the "Text" in both aren't aligned from section to section and it is jarring.
I've also used AI to build frontends that I'm more than satisfied with, and I think it can "see" perfectly fine. The frontier models are multi-modal and pretty good at vision. You can hook up your coding harness to your browser which will take screenshots of your rendered frontend and modify the code accordingly.
You could argue that what you built isn't novel or complex in any way -- (politely) it's basically a clone of hundreds of other SAAS homepages. i.e. its a perfect use-case for AI.
Perhaps the results would be different if you had a specific novel design or interaction in mind, and you wanted the AI to implement that exactly as you wanted.
It’s funny how there are a bunch of responses to this post all showing off their great AI designs that are literally the same thing with different (each horrible) color palettes.
It's really weird. I don't even care if they used AI as part of their development process. But most AI™ developed stuff is just so insanely soulless crap I can instantly can tell and instinctively close the tab.
If you're AI developed software was so great, I couldn't tell it's AI.
Like I cannot wrap my head around how anyone vibe slops and think "No, this is good. I will now proudly show this off."
I'm guessing the third word is "directly“? The D is cut off. And the grammar is wrong, should be "in your spreadsheets" - maybe that is another letter cut off?
It's kind of wild in terms of how it will use different random designs, even given a specific style guideline. Even if you tell it to use a given framework like MUI or Mantine, it will stray largely from format.
I don't mind working through a lot of the UI myself, but it's definitely a shortcoming IMO... that said, being able to scaffold boilerplate or testing harnesses for for complex UI has been really nice overall. I came up with the following component as an image zoom component, where I can separately control the zoom in/out in under a couple hours... took longer to setup the CI/CD stuff than the primary component logic.
Eh, for many reasons I am not posting it here. It is a passion project for something and would lead to problems if I post it here. That being said I was trying to share the technique.
The reason for the post is that even without the actual website one should be able to envision the technique and how it may or may not work. Also if you look above recently I added links to the Claude.md for another thing I was working on for a friend that also had to solve this problem.
Just want to give people the tools to use ai well from my own findings
Software developers have been calling their stuff "beautiful" for years now. It's bullshit. Almost none of it is beautiful. They just mean it looks like whatever is trendy at the time.
Ask it to take control of a browser using something like Playwright and use the UI itself like an end user would and evaluate whether it is a good experience.
I 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.
Before I switched over the a career in tech, I made my living from music - playing live, session work, etc.
Honestly, I'm probably one of the biggest skeptics when it comes to GenAI - but at least for music, the recent models (as in the past year) do not suck. They are actually really, really good for what it is.
I have yet to hear anything truly original produced by those models. They seem to converge to the mean, and end up sounding very commercial, very average sounding - but in the sense of average "professional music". Suno can generate music which would have taken real people years to learn, thousands of dollars of equipment to make / produce, and pretty much ready for airplay - most listeners will not bat an eye.
Hell, these "AI artists" have been booked to festivals, since people can't hear the difference, and are enjoying the music.
I figure it will go the same way in other fields. The average consumer loses track of what's human made and what's AI made, and frankly won't care. The people "left behind" are the artists, craftspeople, etc. that are frustrated it came to this point.
Rather than an existential threat, I could see it becoming it's own genre rather than infecting every other genre - when in the future people collectively realise it's kinda bad but has it's place as an almost retro aesthetic.
Our idea of nostalgia was not that long ago. Also it could be generated on open weight local copyright free models that are super efficient in the future :P
There have been plenty of those is it AI or a real person music tests on the street you can find on YouTube. Almost no one knows which one is AI. There’s nothing there to be able to put them in different buckets.
I think that was the point being made; if you're looking at it from the perspective of being really good at something, its tendency towards an averaged result is substandard.
I think this probably says more about music in general and the long tail of people who think good enough is just spectacular, than to the brilliance of LLMs. Most music, just like most art, isn’t particularly original. It’s a shocker, I know, but there it is. Doesn’t mean it’s bad, just not particularly original.
Copying something that exists isn’t particularly difficult. It may require immense skill and incredible dexterity in the case of some musical instruments, but it doesn’t really require much more than time, patience and the ability to follow instructions. The blueprint already exists. With LLMs we now have the ability to skip the time and patience parts of the equation, we can produce mediocrity more or less instantly.
I don’t see this as particularly different from what happened at the turn of the last century and beyond, with machines being able to sow faster, carve wood and metals at a higher pace and precision, moving folks and goods between geographical points faster than ever before, etc. etc. It’s not much different from the IKEAs of the world making mediocre copies of brilliant designs, making fortunes selling to the large masses that think good enough is just great. Because honestly man, most of the time it probably is.
I’m not surprised people go to concerts to hear a recording made by an LLM either. People have been going to see DJs sling records for decades. It’s not the music, or the artist, it’s the community. Beyoncé is an amazing singer, but people don’t necessarily come to her shows to see just her, they come to see everyone else. They might say they want to see her, but they already have a thousand times in tickelitock and myfacespacebookgrams. They come to feel connected to something, to experience community.
LLMs are incredibly good at churning out stuff. Good stuff, bad stuff, just a ton of stuff. Nothing original but that’s ok, most things pre-LLMs weren’t either. We just have more of it now, and fewer trees. The creatives that are able to harness these tools will be able to do more with less. (Ostensibly at least, until the VC subsidies… subside.) Because they are creative they might be able to form an original idea and string together enough mediocrity to realize it. They’ll probably get drowned out in a sea of mediocre copies in the end, but that’s just the same as it always was. It’s just faster now.
The platform owners and hardware manufacturers will remain king until the technology can run on my TI calculator, maybe we’ll get there before the VC money runs out. No wonder Nvidia’s been killing it. Creativity and originality will return once this bubble bursts I’m sure, the world has this amazing ability to correct itself, even if violently so at times. Or we all die perhaps. Either way, all we can do I suppose is ride this wave of mediocrity into the sunset. :o)
The people I work with who find "AI" makes every part of their life easier were just bad at everything to begin with. The people who find "AI" making specific tasks easier have specialized skills and were previously relying on less specialized people for some support.
I 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.
If we go one step further… this is why we buy stuff from other people and firms - because they specialise in stuff that we can then allocate resources on stuff that we are better at ourselves.
Henceforth the idea that all these SaaS firms disappear due to firms replicating their products internally is stupid.
This doesn't make sense. I think you mean "If you are really good at something, you'll find AI might not be as good as the something you are really good at"
I think they mean knowing that AI only looks to be good at something pulls back the curtain in a sense and afterwards all appearances of AI seeming good at something seem fake.
> LLMs are just replacing consultants as the #1 generator of sloppy code.
The "consultants wrote sloppy code" is one of those memes that never die.
The only thing that differentiates consultants from you is the contract type. All broad strokes accusations are just a consequence of in-house employees feeling threatened by their presence and having a vested interest in portraying themselves as infinitely better than any prospective replacement. You also see the same attitude in junior devs who complain that everyone else's code is shit, but the mess they themselves created is always justifiable and understandable.
If you were moved from your project right now and you placed someone at your spot under probation, I will guarantee that your work would be extensively criticized for being an unmaintainable pile of hacks.
No, it’s mainly because consulting firms love running their bait-and-switch scam and use their junior consultants to do the actual work while the seniors move on to butter up the next sucker.
> If you are really good at something, you'll find AI sucks at everything.
I think it's the other way around. AI amplifies your software development skills. If you suck at software development, AI will follow your prompts and feedback and of course it will output an unmaintainable mess that barely works.
Here we are, listening to people who can barely put together a working website complaining that AI can barely put together a working website.
At the things I’m good at, AI is a huge boon. At the things I’m bad at, AI has little to offer.
For me, for Frontend, AI is great, because I know exactly what to do, so it’s very easy to talk it into doing it for me. I know what the problem is, I know what the solution is, and I have the language to communicate both. All that’s left is the trivialities of the implementation, I’ve already done all the hard work in my head.
No you don't understand, AI is VERY BAD at front-end and CSS to the point you cannot use anything.
It's not passable even slightly.
Everybody with experience knows that FE has always been "harder" than BE - but BE the stakes are higher since it's the business. FE is often "just UI" and despite that being very important too, you can throw it away and start over a lot easier with a UI than you can with a BE platform.
You overestimate how good the average front-end developer PR is that gets merged.
My experience developing on a fairly standard SAAS is that AI (Figma, Claude) has produced UIs which look better, are more accessible, and get through review and QA and product approval, faster and more reliably than any of the FE developers I've worked with recently can.
After 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.
Wow, 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 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.
If 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.
No, it's the economy that is shifting and the reason developers are getting fired. This causes wage lowering. AI is the excuse that let's companies corporate-speak around the economy.
Work lost by freelancers and contractors to AI can't be brushed out of sight with a 'No' and an unrelated vague assertion that the economy is shifting.
You're equally handwaving and vague asserting AI replacement. It's super obvious that existing layoffs are absolutely not justified by actual AI replacements.
Freelance work is like car lanes, the more you build the more demand you have. There's no satiating the need for software. Lowering the bar to produce software will just motivate more companies and people to digitalize/automate more things.
Exactly, 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.
My 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.
Dunno. 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.
I 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.
Creating 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.
I 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.
What 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
Is AI bad at frontend work? Perhaps if your page has some special aesthetic design constraints, reaching the realm of "art," and needs to follow a design mockup at the pixel level, then maybe that is true.
But unfortunately, the vast majority of people's pages are not like that. They just need a page that works. Ease of use and visual polish are both more advanced goals. And frontend pages written by AI—with only a bit of guidance from prompts, not even necessarily very good prompts (though of course precisely defined CSS styles and similar details will naturally produce much better results)—can end up far more polished and complete than what they would have written themselves.
There are so many examples that I do not even need to pick them at random. These are at least world-famous major projects, and while their page design and practicality are not bad, they certainly cannot be called refined. As for the many much worse websites out there—sites that are genuinely painful to use—those are everywhere. Government websites are an obvious disaster zone. Or just look at the Japanese internet.
Do not have unrealistic fantasies about the skill level of most frontend developers. In fact, I believe that among frontend engineers as a whole, if we ignore efficiency and look purely at display quality, Claude is already good enough to rank at least in the top 5%—and that is probably still an underestimate.
I am in China, and in the past month I have heard two news stories: two well-known companies—iFlytek and NetEase—laid off all of their frontend staff and instead had backend engineers use Claude to generate the frontend.
I am not a frontend engineer myself, and it is beyond doubt that without the help of LLMs, the visual quality of the projects I write would be much worse. Not to mention building Windows native applications that actually fit Fluent guidelines despite having absolutely no prior WinUI 3 background.
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.
However, it is obvious that if it were humans, even several hours would clearly not be enough time to create not only a visually stunning website but even a basic one, such as the pure text site introducing Lua itself (https://www.lua.org/manual/5.5/) (which achieves such visual presentation by uniformly using a set of templates designed by Lua itself)—that's very difficult, isn't it?
Given the author one or two days, I believe most those detail issues mentioned in the comments could be fixed. Most problems stem from the "rush to release a half-finished product within a few hours to gain traffic" approach. Of course, such impatience is a common issue in many VibeCoding projects, like OpenClaw, but this is not a problem with AI's capability to write front-end code.
I 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
Yes, that is what I mean: most front-end work does not require exceptional creativity or especially polished visual effects. Many people comment that AI-generated pages are extremely mediocre, but that “mediocre” result is already quite good in practice. In the software-related examples I mentioned, whether it is Debian, FreeBSD, SQLite, or Lua—and even Python’s official site, which I would already consider one of the better examples in this category—the visual quality clearly does not reach the same level as the supposedly “mediocre” output generated by AI.
These are already some of the best projects in the world. At least their front-end interfaces still show traces of a coherent design language. As for what the broader landscape looks like, I do not think that needs much explanation. This is not really a matter of capability. It is simply that, before AI, people were generally unwilling to spend more effort on these pages. For people in the pre-AI era, this was already good enough.
Of course, websites for front-end-related tools tend to look better. Besides the two examples you mentioned, sites like Vue and Bun also look quite good. Even so, I do not think they necessarily have any significant visual advantage over what Claude generates.
Let’s return to the title: “Why AI Sucks at Front End?” Does Claude produce genuinely awful page designs? If so, then are not all the examples above—and many, many more—also quite awful by the same standard? That alone is enough to challenge the premise of the question. To criticize AI-generated pages for “lacking innovative design” and being “too mediocre” is really an overly rarefied standard. It forgets what most of the world’s front-end actually looks like, does it not?
Suddenly remembered, isn't Hacknews itself the best counterexample of frontend design? Deliberately minimal styling to ensure content focus, lol :P
I believe generating https://news.ycombinator.com with Claude should be a piece of cake.
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.
Everything 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.
The 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
Really? 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.
They 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.
Isn’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?
I'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.
I 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.
Rails is a good example of why. One correct place for migrations. One expected controller structure. Validations on the model, callbacks with a defined lifecycle. When the framework defines where things belong, you can write automated rules that catch bad AI output: "no business logic in controllers," "no conditional assertions in tests." Each rule works because Rails narrows what "correct" means.
Frontend has no equivalent constraint. A component can be structured a hundred different ways, and "does it look right" requires vision the model does not have.
If 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.
Works 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.
Agreed 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.
AI 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?
One 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.
This 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.
Who 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.
CSS 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.
I'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.
I 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.
Ngl 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? :)
It'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.
I 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 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.
Thanks. I would say yeah, it's not too bad, but it is also a pretty simple site.
There are some interesting issues that probably relate to your workflow, like the nav links are different sizes, the icons too. And the resolution of some of the images/icons on a MacBook is poor. But I suspect that's because a simple ImageMagick raster diff will fuzz over those kind of differences.
I wonder if you can make some tweaks or find a better representation than pure raster screenshots to fix this. Can't really deal in vector images because AI sucks at outputting those, and you can't print a web page to SVG.
There was a super niche website framework that only used SVG a while ago. Would be funny if that kind of thing makes a takes off just so AI can do better.
I feel like 2 days to build this is a bit much given the simplicity. I think the point stands.
I will grant you that this is more tasteful than most of the AI sites I see. It’s a good looking little site but nothing here screams, “AI really accelerated this.”
Thank you. Yes took a bit but still way faster than by hand. There are other store pages that are also implemented. This 1 page took me like an hour lol.
[dead]
Please share what you created! I think people have very different views for what is a good interface, or a tolerable one. I think as a front-end developer and designer I notice a lot of problems most people don't care about.
https://poolometer.com
I built this frontend with Sonnet 4.5 last Fall and I’m about to “launch” it
I used only prompts, but those prompts included ChatGPT’s research on Memphis design ;)
Using codex for front end design is like asking the valedictorian mega nerd to paint your portrait. Gemini and Claude are both artists.
Sorry to be the one to break it to you, but no, you did not design a website just fine with AI. It’s not even just “good”. It’s average. Painfully average, to the point of it being easily mistaken for a scam.
Very bad results—as expected from an AI.
Nothing to brag about here.
I completely disagree. Making a average website is the goal of most businesses that are selling an actual product. His website looks modern and welcoming and does not distract or take away from the actual content. This exactly what most people should aim for. Some actual constructive criticism is some o the icons in the example log mood look weird on my phone, with really small emojis overlapping the face emoji
No one should aim for average, that’s an incredibly defeatist way of looking at it. Besides, design matters. I know HN is frequented mostly by people with very little interest in such topics, but design absolutely matters.
And yes, while the author’s website is perfectly passable, it is by no means “good”. People pick up on that, they might not know they do, but they do. Design wouldn’t be an industry and a school by itself if it didn’t matter and just the average were good enough.
A lot of people don't make websites for a living. If they are a small business and have other things to worry about in terms of actual work, being able to prompt for a clean, professional website frees up their time and means they don't have to use additional funds to hire a developer.
But you can use squarespace/shopify etc for that…
Thank you, agreed, I will iterate on this more.
When I shared this I wasn't thinking about the marketing site -- I meant to show the product itself. Given the feedback here I no longer think it's a good representative as-is, especially with the generic SVGs / rounded cards
I can't help but think you and the other commenters reducing this to slop didn't even try the product. I thought it went without saying that I wasn't posting to show a marketing landing page.
[dead]
Nah
[dead]
Some more serious critique of things I noticed within 30 seconds:
- Text isn't selectable on the page.
- The tooltip in the "day 1" to "day 14" cards gets cut off by the border (I see this mistake ALL the time with AI-generated frontends btw)
- It's sparse and very long. I think the information could be condensed in half the size, and it would improve the presentation. This is personal preference though.
- The playbooks' "mark complete" are not persisted on reload or navigation.
All in all, it's functional and quite decent. I agree with the other people saying it looks generic, but I disagree on it being necessarily a bad thing for this kind of product.
I know nothing about pools so I can't comment on the accuracy of the playbooks. It's nice that there's so many of them, but given the LLM vibe of the text I'm slightly suspicious.
Though it's somewhat clear from the use of tiles with the icon colours and the choice of border colours and all, I quite like it. I would have expected the colour theme from the navbar to be repeated because that's a more non standard palette. I would do that, maybe use a different tile layout (use a tile shape resembling a pool tile? Or even a rectangle signifying a typical pool shape) and create some vector icons for them using the navbar colour scheme.
I see that you haven't finished the Automatic Sensor Automation. If you need help with that, contact me, I have experience with embedded product development and I like working on interesting projects :)
Why don’t these llm’s just allow you to pick from a set of standardised templates and then allow you to customise it from there in terms of both functionality and design?
What you have got as output is what I also get as output from llm’s - they suck the soul out of everything. Which is fine in the right context but that shouldn’t we as a species strive for in design imo.
Well it works but it also looks like every other generic bootstrap based website with not even an original palette choice. Great for a project like this, unusable for any client work
Is this a critique of the marketing page or of the product itself?
I didn't intend for this to be about the marketing page -- what you say is true of just about every marketing page. They're prevalent because they are good at distilling information without overwhelming the user. But I agree I can do better and will work on this more, I really appreciate getting this feedback
Most people look at pool chemistry/maintenance as painfully overwhelming, so for everyone to say this looks boring or mundane is a bit validating. No one has (yet!) said they don't understand the product, it's purpose, or it's value :)
The palette looks a lot like the basic colors from Bootstrap is more the thing. Which is what models tend to do a lot of the time, because you know, that's what's been learned.
Also: - why shadows somewhere and not for other cards? - why so many different font sizes with no hyerarchy? - the paddings and margins are inconsistent and don't convey visual rythm. Sometimes there's too much space and sometimes they are too cramped.
ecc...
Is this an ok amateur website you couldn't have made this quick? Yes. Is that a sufficient value proposition to say that Ai has solved frontend? no.
On a side note: Would you pay the actual real price of these models to achieve this same results, if they weren't subsidized by delusional billionaires? Up to you to respond.
Sorry but this website screams AI slop to me. Very sparse, lots of cards and random icons and rounded corners, looks like a few messages in to a Claude code session
I intended to share the product rather than the marketing page. I mean, I didn't intend to share this at all yet because it's not done, but when I saw people asking for examples..
But yeah, marketing site looks like a marketing site. I'm realizing now that a lot of my app's internal design/flair is missing from the marketing page -- so I appreciate your looking/commenting
Looks as if AI sucks at frontend tbh.
Is this a critique of the marketing page or of the product?
Hey, one thing I made with this technique is hartwork.life a simple Wordpress store for a friend. I used open ai to design it for me, and then used the techniques above to get Claude code to implement the proper designs.
I am still trying to learn how to wrangle Claude properly, but I have this Claude.md[1] for that I used to make the website. In particular one of the last rules about using imageMagick for comparison.
I haven’t touched this website in a bit (waiting on client) so now I use playwright mcp for the screenshots and the browser interactions.
[1] https://github.com/panda01/hartwork-woocommerce-wp-theme/blo...
I started with a boilerplate but AI has been huge at letting me get what I want in terms of frontend building when I was never talented at design or css.
I built https://bridge.ritza.co (demo@example.com username and password if you don't want to sign up) as a trello/linear replacement without looking at a single line of code and it's both good enough for me and doesn't have the obvious AI frontend 'look' as it was copying from the starter.
Highlighted text "no per-seat pricing" is unreadable in dark mode on the home page (dark blue on black). It's surprising for me to see someone use this as an example of decent design because I'm somewhat sure this front page text coloring was never seen/reviewed by a human.
> doesn't have the obvious AI frontend 'look' as it was copying from the starter.
Check out the other reply and scroll down a bit…
I mean the app itself, not really the landing page if that's what you're referring to?
Yeah you’re right my bad.
I am a backend guy, so forgive my ignorance, but for web based apps I am confused what "pixel perfect" even means. I can build a site to look one way on my computer, it will most likely not look the same way on whatever device you use to access the site.
Feeding the model images for my local computer sounds like a recipe given my experience with the tools to have it over-optimize for the wrong end device.
Pixel perfect means it looks EXACTLY like the design comp.
It goes completely out of the window if the browser window isn't the exact size of the mockup.
You might charitably say that pixel perfect means that the implementation intersects with the design comp at some specific dimensions but where are the extra rules coming from, then?
It's an archaic term that conflates the artifact produced by an incomplete design process (an artist's rendering of what the web page might look like) with the actual inputs of the development process (values and constraints).
"Pixel perfect" is about attention to detail and consistency. Margins, padding, or the combination of these inside other containers will stick out when they're not consistent.
Here's an example that I personally encountered: what if you have a <h1>Text</h1> and it has a certain left margin. Then another heading except it has a nested button component (which internally comes with some padding). Then the "Text" in both aren't aligned from section to section and it is jarring.
> Yes ai can’t see, it only understands numbers.
I've also used AI to build frontends that I'm more than satisfied with, and I think it can "see" perfectly fine. The frontier models are multi-modal and pretty good at vision. You can hook up your coding harness to your browser which will take screenshots of your rendered frontend and modify the code accordingly.
We built the frontend for https://brooked.io and https://app.brooked.io using only prompting so I agree!
You could argue that what you built isn't novel or complex in any way -- (politely) it's basically a clone of hundreds of other SAAS homepages. i.e. its a perfect use-case for AI.
Perhaps the results would be different if you had a specific novel design or interaction in mind, and you wanted the AI to implement that exactly as you wanted.
edit: My point proven by the other examples from this thread. Same format, same "feature cards" etc. https://bridge.ritza.co/ https://poolometer.com/
I think it’s ok that it’s similar to other SaaS websites. It wouldn’t exist if it weren’t for LLMs and it gets the job done and looks decent.
It shows.
The landing page looks like every other AI slopped product page out there.
It’s funny how there are a bunch of responses to this post all showing off their great AI designs that are literally the same thing with different (each horrible) color palettes.
It's really weird. I don't even care if they used AI as part of their development process. But most AI™ developed stuff is just so insanely soulless crap I can instantly can tell and instinctively close the tab.
If you're AI developed software was so great, I couldn't tell it's AI.
Like I cannot wrap my head around how anyone vibe slops and think "No, this is good. I will now proudly show this off."
Go back to human devs.
What’s the point in saying you built something beautiful and not showing it?
Share it. I used Claude earlier to test out its design capabilities and what I got as output was flat and tasteless.
It's kind of wild in terms of how it will use different random designs, even given a specific style guideline. Even if you tell it to use a given framework like MUI or Mantine, it will stray largely from format.
I don't mind working through a lot of the UI myself, but it's definitely a shortcoming IMO... that said, being able to scaffold boilerplate or testing harnesses for for complex UI has been really nice overall. I came up with the following component as an image zoom component, where I can separately control the zoom in/out in under a couple hours... took longer to setup the CI/CD stuff than the primary component logic.
https://tracker1.github.io/image-zoomer-too/
Eh, for many reasons I am not posting it here. It is a passion project for something and would lead to problems if I post it here. That being said I was trying to share the technique.
The reason for the post is that even without the actual website one should be able to envision the technique and how it may or may not work. Also if you look above recently I added links to the Claude.md for another thing I was working on for a friend that also had to solve this problem.
Just want to give people the tools to use ai well from my own findings
Software developers have been calling their stuff "beautiful" for years now. It's bullshit. Almost none of it is beautiful. They just mean it looks like whatever is trendy at the time.
The Skeuomorphic stuff in the late 90s was beautiful.
Is Claude making tasteful and thoughtful recreations today? Or just cloning aesthetics and missing intention?
Yes can you share the front end that you created using this technique?
Imagine being a luddite in the big 26
The last time I tried to make AI built a drag and drop UI, it failed miserably. Things wouldn't line up or even didn't work at all. Any tips for that?
Ask it to take control of a browser using something like Playwright and use the UI itself like an end user would and evaluate whether it is a good experience.
> Ngl I’m reading this article after having used ai to build a beautiful front end that is pixel perfect.
Was about to say the same thing
That is a clever trick!
If you are really good at something, you'll find AI sucks at everything.
I 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.
I 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.
It's also more often than not good enough, which for a specialist is bad, and for most everyone else is absolutely sufficient.
Before I switched over the a career in tech, I made my living from music - playing live, session work, etc.
Honestly, I'm probably one of the biggest skeptics when it comes to GenAI - but at least for music, the recent models (as in the past year) do not suck. They are actually really, really good for what it is.
I have yet to hear anything truly original produced by those models. They seem to converge to the mean, and end up sounding very commercial, very average sounding - but in the sense of average "professional music". Suno can generate music which would have taken real people years to learn, thousands of dollars of equipment to make / produce, and pretty much ready for airplay - most listeners will not bat an eye.
Hell, these "AI artists" have been booked to festivals, since people can't hear the difference, and are enjoying the music.
I figure it will go the same way in other fields. The average consumer loses track of what's human made and what's AI made, and frankly won't care. The people "left behind" are the artists, craftspeople, etc. that are frustrated it came to this point.
Rather than an existential threat, I could see it becoming it's own genre rather than infecting every other genre - when in the future people collectively realise it's kinda bad but has it's place as an almost retro aesthetic.
Our idea of nostalgia was not that long ago. Also it could be generated on open weight local copyright free models that are super efficient in the future :P
There have been plenty of those is it AI or a real person music tests on the street you can find on YouTube. Almost no one knows which one is AI. There’s nothing there to be able to put them in different buckets.
People genuinely believe that a "trust me bro" system of denoting use of AI is viable approach to the problem.
I mean I go to gigs of people I like, it's not hard to work out if someone is real if they're on stage/meeting up with fans afterwards
You could probably put a bunch of AI music out to see what bites and then create a band post AI success that just plays what the AI was playing.
> They seem to converge to the mean
I think that was the point being made; if you're looking at it from the perspective of being really good at something, its tendency towards an averaged result is substandard.
I think this probably says more about music in general and the long tail of people who think good enough is just spectacular, than to the brilliance of LLMs. Most music, just like most art, isn’t particularly original. It’s a shocker, I know, but there it is. Doesn’t mean it’s bad, just not particularly original.
Copying something that exists isn’t particularly difficult. It may require immense skill and incredible dexterity in the case of some musical instruments, but it doesn’t really require much more than time, patience and the ability to follow instructions. The blueprint already exists. With LLMs we now have the ability to skip the time and patience parts of the equation, we can produce mediocrity more or less instantly.
I don’t see this as particularly different from what happened at the turn of the last century and beyond, with machines being able to sow faster, carve wood and metals at a higher pace and precision, moving folks and goods between geographical points faster than ever before, etc. etc. It’s not much different from the IKEAs of the world making mediocre copies of brilliant designs, making fortunes selling to the large masses that think good enough is just great. Because honestly man, most of the time it probably is.
I’m not surprised people go to concerts to hear a recording made by an LLM either. People have been going to see DJs sling records for decades. It’s not the music, or the artist, it’s the community. Beyoncé is an amazing singer, but people don’t necessarily come to her shows to see just her, they come to see everyone else. They might say they want to see her, but they already have a thousand times in tickelitock and myfacespacebookgrams. They come to feel connected to something, to experience community.
LLMs are incredibly good at churning out stuff. Good stuff, bad stuff, just a ton of stuff. Nothing original but that’s ok, most things pre-LLMs weren’t either. We just have more of it now, and fewer trees. The creatives that are able to harness these tools will be able to do more with less. (Ostensibly at least, until the VC subsidies… subside.) Because they are creative they might be able to form an original idea and string together enough mediocrity to realize it. They’ll probably get drowned out in a sea of mediocre copies in the end, but that’s just the same as it always was. It’s just faster now.
The platform owners and hardware manufacturers will remain king until the technology can run on my TI calculator, maybe we’ll get there before the VC money runs out. No wonder Nvidia’s been killing it. Creativity and originality will return once this bubble bursts I’m sure, the world has this amazing ability to correct itself, even if violently so at times. Or we all die perhaps. Either way, all we can do I suppose is ride this wave of mediocrity into the sunset. :o)
Corollary: if you are bad at everything, you’ll find AI to be the greatest invention in the history of mankind
I am seeing this a lot.
The people I work with who find "AI" makes every part of their life easier were just bad at everything to begin with. The people who find "AI" making specific tasks easier have specialized skills and were previously relying on less specialized people for some support.
> If you are really good at something, you'll find AI sucks at everything.
Nah, just at that something :-)
I 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.
Exactly. And this seems more and more to be an inherent property of AI, which is kind of calming.
If we go one step further… this is why we buy stuff from other people and firms - because they specialise in stuff that we can then allocate resources on stuff that we are better at ourselves.
Henceforth the idea that all these SaaS firms disappear due to firms replicating their products internally is stupid.
This doesn't make sense. I think you mean "If you are really good at something, you'll find AI might not be as good as the something you are really good at"
I think they mean knowing that AI only looks to be good at something pulls back the curtain in a sense and afterwards all appearances of AI seeming good at something seem fake.
LLMs are just replacing consultants as the #1 generator of sloppy code.
> LLMs are just replacing consultants as the #1 generator of sloppy code.
The "consultants wrote sloppy code" is one of those memes that never die.
The only thing that differentiates consultants from you is the contract type. All broad strokes accusations are just a consequence of in-house employees feeling threatened by their presence and having a vested interest in portraying themselves as infinitely better than any prospective replacement. You also see the same attitude in junior devs who complain that everyone else's code is shit, but the mess they themselves created is always justifiable and understandable.
If you were moved from your project right now and you placed someone at your spot under probation, I will guarantee that your work would be extensively criticized for being an unmaintainable pile of hacks.
No, it’s mainly because consulting firms love running their bait-and-switch scam and use their junior consultants to do the actual work while the seniors move on to butter up the next sucker.
> If you are really good at something, you'll find AI sucks at everything.
I think it's the other way around. AI amplifies your software development skills. If you suck at software development, AI will follow your prompts and feedback and of course it will output an unmaintainable mess that barely works.
Here we are, listening to people who can barely put together a working website complaining that AI can barely put together a working website.
The majority of humans are average, as is the training set
They use a curated training set.
Curated by average people in most domains.
I’ve had the opposite experience.
At the things I’m good at, AI is a huge boon. At the things I’m bad at, AI has little to offer.
For me, for Frontend, AI is great, because I know exactly what to do, so it’s very easy to talk it into doing it for me. I know what the problem is, I know what the solution is, and I have the language to communicate both. All that’s left is the trivialities of the implementation, I’ve already done all the hard work in my head.
I cant even actually receive good essay from it and still writing each word myself.
No you don't understand, AI is VERY BAD at front-end and CSS to the point you cannot use anything.
It's not passable even slightly.
Everybody with experience knows that FE has always been "harder" than BE - but BE the stakes are higher since it's the business. FE is often "just UI" and despite that being very important too, you can throw it away and start over a lot easier with a UI than you can with a BE platform.
I digress, AI sucks fucking dick at UI.
You overestimate how good the average front-end developer PR is that gets merged.
My experience developing on a fairly standard SAAS is that AI (Figma, Claude) has produced UIs which look better, are more accessible, and get through review and QA and product approval, faster and more reliably than any of the FE developers I've worked with recently can.
What is an example UI that AI would fail to create?
Google Stitch is pretty awesome at front end layouts.
[dead]
After 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.
Does this website run at 10fps for anyone else? I'm on a mac M4 w/ safari. Really doesn't help the author's point.
Wow, 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:
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.
I thought it was just me. I'm running a M2 MacBook Pro and scrolling down the article on Safari is quite stuttery.
If AI really sucked at front end I'd have a job right now.
That assumes all companies care about providing a good front end experience. Many do not. Many are actively hostile to their users.
If the economy wasn't completely broken you'd have a job right now.
If we had annual reverse hunger games the economy wouldn't be broken
In general, AI is not replacing developers yet. It's a convenient excuse to fire people for other reasons, and to pay lower wages.
If 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.
No, it's the economy that is shifting and the reason developers are getting fired. This causes wage lowering. AI is the excuse that let's companies corporate-speak around the economy.
Work lost by freelancers and contractors to AI can't be brushed out of sight with a 'No' and an unrelated vague assertion that the economy is shifting.
You're equally handwaving and vague asserting AI replacement. It's super obvious that existing layoffs are absolutely not justified by actual AI replacements.
Freelance work is like car lanes, the more you build the more demand you have. There's no satiating the need for software. Lowering the bar to produce software will just motivate more companies and people to digitalize/automate more things.
Tell that to the junior devs.
If 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.
AI is much better at front-end than me, it has really enabled me to build visual apps as a normally backend/ML guy.
Ai ain't gonna perform at level of top front end designer but you will get you halfway at significantly less cost.
Exactly, 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.
AI is a floor raiser, not a ceiling raiser
My 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.
Dunno. 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.
I 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.
Creating 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.
I 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.
Aside 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.
What 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
Is AI bad at frontend work? Perhaps if your page has some special aesthetic design constraints, reaching the realm of "art," and needs to follow a design mockup at the pixel level, then maybe that is true.
But unfortunately, the vast majority of people's pages are not like that. They just need a page that works. Ease of use and visual polish are both more advanced goals. And frontend pages written by AI—with only a bit of guidance from prompts, not even necessarily very good prompts (though of course precisely defined CSS styles and similar details will naturally produce much better results)—can end up far more polished and complete than what they would have written themselves.
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
Or look at what frontend pages written in the pre-AI era were like. For example, Debian's: https://www.debian.org/index.zh-cn.html
Or SQLite's: https://sqlite.org/
Here is another example: the official FreeBSD website: https://www.freebsd.org/
There are so many examples that I do not even need to pick them at random. These are at least world-famous major projects, and while their page design and practicality are not bad, they certainly cannot be called refined. As for the many much worse websites out there—sites that are genuinely painful to use—those are everywhere. Government websites are an obvious disaster zone. Or just look at the Japanese internet.
Do not have unrealistic fantasies about the skill level of most frontend developers. In fact, I believe that among frontend engineers as a whole, if we ignore efficiency and look purely at display quality, Claude is already good enough to rank at least in the top 5%—and that is probably still an underestimate.
I am in China, and in the past month I have heard two news stories: two well-known companies—iFlytek and NetEase—laid off all of their frontend staff and instead had backend engineers use Claude to generate the frontend.
I am not a frontend engineer myself, and it is beyond doubt that without the help of LLMs, the visual quality of the projects I write would be much worse. Not to mention building Windows native applications that actually fit Fluent guidelines despite having absolutely no prior WinUI 3 background.
> 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
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.
However, it is obvious that if it were humans, even several hours would clearly not be enough time to create not only a visually stunning website but even a basic one, such as the pure text site introducing Lua itself (https://www.lua.org/manual/5.5/) (which achieves such visual presentation by uniformly using a set of templates designed by Lua itself)—that's very difficult, isn't it? Given the author one or two days, I believe most those detail issues mentioned in the comments could be fixed. Most problems stem from the "rush to release a half-finished product within a few hours to gain traffic" approach. Of course, such impatience is a common issue in many VibeCoding projects, like OpenClaw, but this is not a problem with AI's capability to write front-end code.
I 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/
UnoCSS: 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".
Yes, that is what I mean: most front-end work does not require exceptional creativity or especially polished visual effects. Many people comment that AI-generated pages are extremely mediocre, but that “mediocre” result is already quite good in practice. In the software-related examples I mentioned, whether it is Debian, FreeBSD, SQLite, or Lua—and even Python’s official site, which I would already consider one of the better examples in this category—the visual quality clearly does not reach the same level as the supposedly “mediocre” output generated by AI.
These are already some of the best projects in the world. At least their front-end interfaces still show traces of a coherent design language. As for what the broader landscape looks like, I do not think that needs much explanation. This is not really a matter of capability. It is simply that, before AI, people were generally unwilling to spend more effort on these pages. For people in the pre-AI era, this was already good enough.
Of course, websites for front-end-related tools tend to look better. Besides the two examples you mentioned, sites like Vue and Bun also look quite good. Even so, I do not think they necessarily have any significant visual advantage over what Claude generates.
Let’s return to the title: “Why AI Sucks at Front End?” Does Claude produce genuinely awful page designs? If so, then are not all the examples above—and many, many more—also quite awful by the same standard? That alone is enough to challenge the premise of the question. To criticize AI-generated pages for “lacking innovative design” and being “too mediocre” is really an overly rarefied standard. It forgets what most of the world’s front-end actually looks like, does it not?
Suddenly remembered, isn't Hacknews itself the best counterexample of frontend design? Deliberately minimal styling to ensure content focus, lol :P I believe generating https://news.ycombinator.com with Claude should be a piece of cake.
Design 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.
I thought reinforcement learning with human feedback was meant to get that quantification of "taste"
Kimi k2.5 has been so far the best model for frontend. At least from my experience so far
Humm... better than Opus 4.6 or 5.4?
What are you using for the frontend? React component libraries?
Everything 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.
I'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.
The 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
But 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?
Imo front end is what it’s best at.
It really is, especially with frameworks. The author post reeks of feeling threatened by AI encroaching on his job, especially with the weird AI digs
Sure, but most companies don't seem to value Front End
Really? 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?
They 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.
>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.
Isn’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?
No? I’ve never heard of that tbh.
double down on betting your career on being a css expert? what could go wrong
I'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.
I 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.
Rails is a good example of why. One correct place for migrations. One expected controller structure. Validations on the model, callbacks with a defined lifecycle. When the framework defines where things belong, you can write automated rules that catch bad AI output: "no business logic in controllers," "no conditional assertions in tests." Each rule works because Rails narrows what "correct" means.
Frontend has no equivalent constraint. A component can be structured a hundred different ways, and "does it look right" requires vision the model does not have.
If 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.
Works 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.
Agreed 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.
AI 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?
One 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.
Did they use it on this site to prove a point?
Site has been slashdotted
This 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.
I'd say UI is mostly a 2D tweaking + state management job, they don't exactly fit in a seq2seq style.
it's even worse on backend tasks.
but people writing shitty node.js code might beg to differ.
Who 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.
CSS 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.
I'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.
I 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.
No worse than humans then.
>Try asking it for some scroll-driven animations or custom micro-interactions
Unrelated, but as a long time front-end dev, FUCK THOSE.
...not in my experience. It does what I need it to do; center a div.
...Does AI suck at front-end? This is news to me.
Except... it doesn't
[dead]
[dead]