Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Why AI Sucks at Front End

nerdy.dev

Post reply on HN
Print view View original

151–160 of 183 posts

Re: Why AI Sucks at Front End

#151

Post by khasan222 »

0x3f wrote: post #41
khasan222 wrote: post #36

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…

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.

Re: Why AI Sucks at Front End

#152

Post by alternatex »

squidbeak wrote: post #140
the_gipsy wrote: post #118

Earlier quoted context omitted.

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.

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.

Re: Why AI Sucks at Front End

#154

Post by likeclockwork »

apwheele wrote: post #125
khasan222 wrote: post #36

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…

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).

Re: Why AI Sucks at Front End

#156

Post by victorbjorklund »

khasan222 wrote: post #36

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…

That is a clever trick!

Re: Why AI Sucks at Front End

#157

Post by tracker1 »

enejej wrote: post #75
khasan222 wrote: post #36

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…

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/

Re: Why AI Sucks at Front End

#158

Post by tracker1 »

nxpnsv wrote: post #13
feverzsj wrote: post #6

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.

Re: Why AI Sucks at Front End

#159

Post by tracker1 »

eljee wrote: post #143

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…

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.

Re: Why AI Sucks at Front End

#160

Post by khasan222 »

bryanhogan wrote: post #85
khasan222 wrote: post #36

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…

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.

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...

Post reply on HN