Learning on Web Dev Open is free for all.

Design Craft > Space, and what winsMake it look expensive
Phase 02Space, and what wins110 of 434

Make it look expensive

A product card generated in two minutes that looks like every other generated product card. Six findable reasons why, and then the fix.

Build45 minAI pair
Phase 02 · Lesson 04

Make it look expensive

AI: pair~45 min

A product card, generated in two minutes, that looks like every other generated product card. Work out why, then fix it.

Beat 1: Build it

The brief: a product card for a pair of headphones. Image area, name, one line of description, price, a buy button, and a stock status.

Open Claude Code or Cursor, describe it, and paste the result into the workbench. Do not refine it yet: we want the model’s first instinct, because that first instinct is what this lesson is about.

Nothing here is graded. A generated card is already loaded if you would rather skip ahead.

Ask the community

Loading…

Workbench

You should now be able to

  • Diagnose the specific decisions that make a component read as generated
  • Vary radius, weight and spacing with intent
  • Add the states the brief did not ask for
Ask the community

Loading…