Ask HN: How to Vibe Design as Engineer? | Hacker News Reader

Ask HN: How to Vibe Design as Engineer?

7 pointsmetrofun11 comments

Design is an underdetermined problem - that's why we describe it using "taste". LLMs are not great at undetermined problems. So how do you constraint the space and what's your feedback flywheel? What's your process?

View on HN

I have discovered few skills, but haven't used them yet:

  npx skills add https://github.com/anthropics/skills --skill canvas-design                                                            
  npx skills add https://github.com/anthropics/skills --skill frontend-design

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.

as you said it is underdetermined and about taste.declareting needs and wishes as a frame then it could be more desired output.

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.

What are you feeding models with? images, html?

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.

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

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

Reply on news.ycombinator.com