---
title: "5.4 UI Styles and Inspiration"
description: "Where should you look for references? How do you describe a style to AI?"
---

# 5.4 UI Styles and Inspiration

> **Goal of this section**: Know where to find design inspiration, learn to describe the style you want to AI using professional terms, and avoid situations where "you say modern, but AI's idea of modern is completely different from yours."

When you say "I want a modern-style login page," AI's understanding of "modern" might be completely different from what you have in mind. As the old pros say: "When communicating design to AI, just saying 'make it look good' is useless—you have to explain *what kind* of good-looking you mean."

## Inspiration Sites

Before you start building, take a look at how others do it. Here are some inspiration sites designers often browse:

### Awwwards — Top Web Design Awards

The world's most authoritative website design awards platform, featuring sites with the highest design standards.

**How to use it**: Browse award-winning projects, and when you find a style you like, take a screenshot and send it to AI saying, "Use this style as the reference."

<table><tbody>
  <tr>
    <td><img src="/images/Advanced/image-20260222213812614.png" /></td>
    <td><img src="/images/Advanced/image-20260222213829480.png" /></td>
  </tr>
</tbody></table>

Visit: [awwwards.com](https://www.awwwards.com/)

### Dribbble — Designer Community

A platform where designers share their work, searchable by category (Web Design, Mobile, UI).

**How to use it**: Search for the type of page you want to build (such as "dashboard" or "landing page") and find references you like.

<table><tbody>
  <tr>
    <td><img src="/images/Advanced/image-20260222213914501.png" /></td>
    <td><img src="/images/Advanced/image-20260222213927522.png" /></td>
  </tr>
</tbody></table>

Visit: [dribbble.com](https://dribbble.com/)

### Mobbin — Real App Screenshot Library

A collection of thousands of screenshots from real apps and websites, organized by feature (login, settings, payments, etc.).

![image-20260222213947631](/images/Advanced/image-20260222213947631.png)

**How to use it**: Search for a specific feature (such as "onboarding" or "pricing") and see how mature products handle it.

Visit: [mobbin.com](https://mobbin.com/)

### Land-book — Landing Page Inspiration

A site dedicated to collecting excellent landing page designs.

**How to use it**: If you're building a product homepage or marketing page, the references here are the most direct and relevant.

Visit: [land-book.com](https://land-book.com/)

![image-20260222214021688](/images/Advanced/image-20260222214021688.png)

## Style Keywords

When communicating design with AI, using professional style keywords is 100 times more effective than just saying "make it look good." If you search "glassmorphism" on Dribbble, you'll precisely find frosted-glass style designs; if you search "beautiful design," you'll just get a pile of unrelated results—the same principle applies when communicating with AI. Every style has its own standard name. Here are some common design styles:

<StyleShowcase />

## How to Describe a Style to AI

The old pros summarize it with one formula:

```
Style keywords + color palette + reference site/screenshot + specific scenario
```

## Color Tools

Have you ever opened a website and felt like "something seems off" but couldn't explain why? Most likely, the color palette wasn't harmonious. Color tools help you generate visually balanced color combinations:

| Tool | Purpose | URL |
|------|------|------|
| **Realtime Colors** | Preview color schemes on a webpage in real time | realtimecolors.com |
| **Coolors** | Randomly generate harmonious color palettes | coolors.co |
| **Happy Hues** | Provides complete color schemes + previews | happyhues.co |
| **Tailwind Color Palette** | Tailwind's built-in color system | tailwindcss.com/docs/colors |

![image-20260226235525847](/images/Advanced/image-20260226235525847.png)

![image-20260226235543860](/images/Advanced/image-20260226235543860.png)

![image-20260226235612718](/images/Advanced/image-20260226235612718.png)

![image-20260226235631335](/images/Advanced/image-20260226235631335.png)

::: tip Color Shortcut
Don't want to pick colors yourself? Tell AI: "Use Tailwind's slate palette for dark mode" or "Use Tailwind's blue palette as the primary color." Tailwind's color system already gives you well-tuned lightness and contrast levels.
:::

---

::: info Next Step
Now that you have inspiration and a style direction, want to know how to create those effects that "look expensive"? Continue to [5.5 Effects That Make a Page Look More Premium](./05-advanced-effects.md).
:::