---
title: "5.4 UI 风格与灵感"
description: "去哪里找参考？如何向 AI 描述一种风格？"
---

# 5.4 UI 风格与灵感

> **本节目标**：知道去哪里找设计灵感，学会用专业术语向 AI 描述你想要的风格，避免"你说现代，AI 理解的现代和你想的不一样"。

你说"要一个现代风格的登录页"，AI 理解的"现代"和你想的可能完全不一样。老师傅说："跟 AI 沟通设计，光说'好看'没用，得说'怎么个好看法'。"

## 灵感网站

在动手之前，先看看别人怎么做的。以下是设计师常逛的灵感网站：

### Awwwards —— 顶级网页设计奖

全球最权威的网页设计评选网站，收录的都是设计水准最高的网站。

**怎么用**：浏览获奖作品，看到喜欢的风格，截图发给 AI 说"照这个风格来"。

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

访问地址：[awwwards.com](https://www.awwwards.com/)

### Dribbble —— 设计师社区

设计师分享作品的平台，可以按类型搜索（Web Design、Mobile、UI）。

**怎么用**：搜索你要做的页面类型（如 "dashboard"、"landing page"），找到喜欢的参考。

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

访问地址：[dribbble.com](https://dribbble.com/)

### Mobbin —— 真实应用截图库

收录了数千个真实 App 和网站的截图，按功能分类（登录、设置、支付等）。

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

**怎么用**：搜索具体功能（如 "onboarding"、"pricing"），看看成熟产品是怎么做的。

访问地址：[mobbin.com](https://mobbin.com/)

### Land-book —— 落地页灵感

专门收集优秀的落地页（Landing Page）设计。

**怎么用**：如果你要做产品首页或营销页，这里的参考最直接。

访问地址：[land-book.com](https://land-book.com/)

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

## 风格关键词

跟 AI 沟通设计时，用专业的风格关键词比说"好看"有效 100 倍。你在 Dribbble 搜 "glassmorphism" 能精准找到毛玻璃风格的作品，搜 "beautiful design" 只会得到一堆不相关的结果——跟 AI 沟通也是同理，每种风格都有自己的标准名字。以下是常见的设计风格：

<StyleShowcase />

## 如何向 AI 描述风格

老师傅总结了一个公式：

```
风格关键词 + 配色方案 + 参考网站/截图 + 具体场景
```

## 配色工具

你有没有打开过一个网站，觉得"哪里不对"但说不上来？多半是配色不协调。配色工具帮你生成视觉上和谐的颜色组合：

| 工具 | 用途 | 地址 |
|------|------|------|
| **Realtime Colors** | 实时预览配色在网页上的效果 | realtimecolors.com |
| **Coolors** | 随机生成和谐的配色方案 | coolors.co |
| **Happy Hues** | 提供完整的配色方案 + 预览 | happyhues.co |
| **Tailwind 调色板** | Tailwind 内置的颜色系统 | 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 配色捷径
不想自己选颜色？告诉 AI："用 Tailwind 的 slate 色系做暗色模式"或"用 Tailwind 的 blue 色系做主色调"。Tailwind 的颜色系统已经帮你调好了明暗层次。
:::

---

::: info 下一步
有了灵感和风格方向，想知道那些"看起来很贵"的效果怎么实现？继续看 [5.5 让页面更高级的效果](./05-advanced-effects.md)。
:::