Design Openbook

Avoiding the AI-Made Look

How do you avoid the generic AI-generated look in web or app designs? Ban the common patterns up front: purple-to-blue gradients, everything centered, identical rounded boxes with shadows, emoji before headings and meaningless 01/02/03 numbering.

When you leave a screen to AI, similar looks keep appearing. Banning the common patterns in advance changes the result.

How to use it

  • Common looks: a purple-to-blue gradient background, every element centered, the same rounded corners and shadow on every box, an emoji before headings, and 01, 02, 03 numbers with no real order.
  • Choose one main color and keep the rest gray. Mixing a little of the main color into the grays keeps them from looking flat.
  • Use borders and shadows only on things that should stand apart. If everything is a card, nothing stands out.
  • Add numbers only where the content really has an order.
  • After building, check three things: whether horizontal scrolling appears at phone width, whether text is visible in dark mode, and whether buttons look tappable.
  • If you install a design-check AI skill, you do not have to ask for these checks in words every time.

Prompts to copy

Rebuild instruction

Rebuild this screen. Do not use the following.
- A purple/blue gradient background
- Centering every element
- The same rounded corners and shadow on every box
- Emoji before headings, meaningless 01/02/03 numbers
Instead:
- One main color + grays that carry a hint of that color
- Show hierarchy through text size and weight
- No horizontal scrolling at 400px width, and support dark mode

Source posts: @starlight_korean

All cards (27)