7 ms·

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

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? :)

bananzamba 5mo ago
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?
- codyswann 5mo ago
  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.
0x3f 5mo ago
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.
- khasan222 5mo ago
  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 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.
  - tyleo 5mo ago
    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.”
    - khasan222 5mo ago
      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.
      - Escafati 5mo ago
        [dead]
  - 0x3f 5mo ago
    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.
    - khasan222 5mo ago
      Oh yeah the natural images are also low quality. Email me I’ll share with you something else I built
  - j_bum 5mo ago
    Some feedback: 1. The main page asks for an email to be notified when the hoodie is available to buy, but I can add the goodie to my shopping cart and proceed to check out 2. The product page mentions a 6’ model but there is no model in the images 3. The check out page says “there are no payment options, please contact us”
meisterfeister 5mo ago
Yes can you share the front end that you created using this technique?
- danlugo92 5mo ago
  Imagine being a luddite in the big 26
mattrighetti 5mo ago
> 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
enejej 5mo ago
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.
- f30e3dfed1c9 5mo ago
  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.
  - ecshafer 5mo ago
    The Skeuomorphic stuff in the late 90s was beautiful.
    - jdiff 5mo ago
      Is Claude making tasteful and thoughtful recreations today? Or just cloning aesthetics and missing intention?
- tracker1 5mo ago
  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/ https://tracker1.github.io/image-zoomer-too/
- khasan222 5mo ago
  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
bryanhogan 5mo ago
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.
- thejazzman 5mo ago
  https://poolometer.com 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.
  - pants2 5mo ago
    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
    - thejazzman 5mo ago
      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
  - jeixjejdjwjx 5mo ago
    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.
    - NewsaHackO 5mo ago
mindfulmark 5mo ago
We built the frontend for https://brooked.io https://brooked.io and https://app.brooked.io https://app.brooked.io using only prompting so I agree!
- dotancohen 5mo ago
  > Your data, > irectl in you > spreadsheets 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? Go back to human devs.
- iamcalledrob 5mo ago
  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://bridge.ritza.co/ https://poolometer.com/ https://poolometer.com/
  - mindfulmark 5mo ago
    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.
- basilikum 5mo ago
  It shows. The landing page looks like every other AI slopped product page out there.
  - adastra22 5mo ago
    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.
apwheele 5mo ago
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.
- cendyne 5mo ago
  "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.
- likeclockwork 5mo ago
  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).
victorbjorklund 5mo ago
That is a clever trick!
prettyblocks 5mo ago
> 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.

bananzamba 5mo ago

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?

codyswann 5mo ago
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.

0x3f 5mo ago

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.

khasan222 5mo ago
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 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.
- tyleo 5mo ago
  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.”
  - khasan222 5mo ago
    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.
    - Escafati 5mo ago
      [dead]
- 0x3f 5mo ago
  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.
  - khasan222 5mo ago
    Oh yeah the natural images are also low quality. Email me I’ll share with you something else I built
- j_bum 5mo ago
  Some feedback: 1. The main page asks for an email to be notified when the hoodie is available to buy, but I can add the goodie to my shopping cart and proceed to check out 2. The product page mentions a 6’ model but there is no model in the images 3. The check out page says “there are no payment options, please contact us”

meisterfeister 5mo ago

Yes can you share the front end that you created using this technique?

danlugo92 5mo ago
Imagine being a luddite in the big 26

mattrighetti 5mo ago

> 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

enejej 5mo ago

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.

f30e3dfed1c9 5mo ago
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.
- ecshafer 5mo ago
  The Skeuomorphic stuff in the late 90s was beautiful.
  - jdiff 5mo ago
    Is Claude making tasteful and thoughtful recreations today? Or just cloning aesthetics and missing intention?
tracker1 5mo ago
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/ https://tracker1.github.io/image-zoomer-too/
khasan222 5mo ago
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

bryanhogan 5mo ago

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.

thejazzman 5mo ago
https://poolometer.com 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.
- pants2 5mo ago
  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
  - thejazzman 5mo ago
    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
- jeixjejdjwjx 5mo ago
  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.
  - NewsaHackO 5mo ago

mindfulmark 5mo ago

We built the frontend for https://brooked.io https://brooked.io and https://app.brooked.io https://app.brooked.io using only prompting so I agree!

dotancohen 5mo ago
> Your data, > irectl in you > spreadsheets 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? Go back to human devs.
iamcalledrob 5mo ago
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://bridge.ritza.co/ https://poolometer.com/ https://poolometer.com/
- mindfulmark 5mo ago
  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.
basilikum 5mo ago
It shows. The landing page looks like every other AI slopped product page out there.
- adastra22 5mo ago
  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.

apwheele 5mo ago

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.

cendyne 5mo ago
"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.
likeclockwork 5mo ago
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).

victorbjorklund 5mo ago

That is a clever trick!

prettyblocks 5mo ago

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