Live data from Hacker News

Ask HN: How to Vibe Design as Engineer?

news.ycombinator.com

1–10 of 12 posts

Re: Ask HN: How to Vibe Design as Engineer?

#2
So I had this problem while I was designing the landing page for month17.com (disclaimer: that's my domain). What worked to not let it look like complete AI slop was using other landing pages that look good as "inspiration" for the model, through providing screenshots which yields sufficient results, in my opinion.

Re: Ask HN: How to Vibe Design as Engineer?

#3
post #2

So I had this problem while I was designing the landing page for month17.com (disclaimer: that's my domain). What worked to not let it look like complete AI slop was using other landing pages that look good as "inspiration" for the model, through providing screenshots which yields sufficient results, in my opinion.

it looks identical to god knows how many other sites and also uninteresting for the same reason. How would catch attention of a customer? With a card slightly rotated over another? That's abysmal

Re: Ask HN: How to Vibe Design as Engineer?

#5
You might use Figma which is a specific design tool based on AI. There is a free version. It gave me enough to get some ideas on how to redesign part of the site I was working. Canva also has an AI design assistant. There are some specific tools for design with AI built into them.

Re: Ask HN: How to Vibe Design as Engineer?

#6
post #2

So I had this problem while I was designing the landing page for month17.com (disclaimer: that's my domain). What worked to not let it look like complete AI slop was using other landing pages that look good as "inspiration" for the model, through providing screenshots which yields sufficient results, in my opinion.

it looks identical to god knows how many other sites and also uninteresting for the same reason. How would catch attention of a customer? With a card slightly rotated over another? That's abysmal

I would be curious as what you would consider an example of good design, then I can see how far an agent gets with that. In any case, contrary to what you might believe, this landing page does convert pretty well.

Re: Ask HN: How to Vibe Design as Engineer?

#8
post #7

what's a feedback flywheel?

Each iteration produces some visual result. Which must feed the next iteration loop. I have tried 3 trivial scenarios - a) rasterize HTML and transduce into text using Visual AI model b) AI text model reads DOM c) You share it with designer, designer converts them into text instructions.

Visual AI samples and doesn't enumerate problems, bad at global consistency/invariants Raw DOM - text from DOM is low SNR proxy for visual state with Designer - slow loop

Re: Ask HN: How to Vibe Design as Engineer?

#9
post #6

Earlier quoted context omitted.

it looks identical to god knows how many other sites and also uninteresting for the same reason. How would catch attention of a customer? With a card slightly rotated over another? That's abysmal

I would be curious as what you would consider an example of good design, then I can see how far an agent gets with that. In any case, contrary to what you might believe, this landing page does convert pretty well.

To start with would you be willing trying inputing Claude with the following instructions? No rounded borders, no excessive padding/margins, no rotated cards, no excessive shadows. More compact/dense ui but also increase base font size a little bit. Make the dark ui the default, use a less neon green color on dark mode, contrast is not great, same for the foreground color. A little nit: On mobile there's an annoying horizontal scrollbar.

Maybe you have fun saying if it converts better or not! I'm fan of a/b testing

If you do let me know ;)

Re: Ask HN: How to Vibe Design as Engineer?

#10
What helps me the most is giving a model tighter rules instead of just saying "make this look good." Rules like what should be the main element on the page, which things shouldn't compete with it, examples of the vibe I want, and especially what I DON'T want. Then I look at what the model actually made and react to that.

Using multiple models to help test different directions/takes on designs is also an approach I utilize. I'll even have models critique each other's designs and suggest improvements sometimes too. Depends on how difficult it is for me to decide on a direction I want to go in.

Post reply on HN