主题
5.4 UI 风格与灵感
本节目标：知道去哪里找设计灵感，学会用专业术语向 AI 描述你想要的风格，避免"你说现代，AI 理解的现代和你想的不一样"。
你说"要一个现代风格的登录页"，AI 理解的"现代"和你想的可能完全不一样。老师傅说："跟 AI 沟通设计，光说'好看'没用，得说'怎么个好看法'。"
灵感网站
在动手之前，先看看别人怎么做的。以下是设计师常逛的灵感网站：
Awwwards —— 顶级网页设计奖
全球最权威的网页设计评选网站，收录的都是设计水准最高的网站。
怎么用：浏览获奖作品，看到喜欢的风格，截图发给 AI 说"照这个风格来"。
 |  |
访问地址：awwwards.com
Dribbble —— 设计师社区
设计师分享作品的平台，可以按类型搜索（Web Design、Mobile、UI）。
怎么用：搜索你要做的页面类型（如 "dashboard"、"landing page"），找到喜欢的参考。
 |  |
访问地址：dribbble.com
Mobbin —— 真实应用截图库
收录了数千个真实 App 和网站的截图，按功能分类（登录、设置、支付等）。
怎么用：搜索具体功能（如 "onboarding"、"pricing"），看看成熟产品是怎么做的。
访问地址：mobbin.com
Land-book —— 落地页灵感
专门收集优秀的落地页（Landing Page）设计。
怎么用：如果你要做产品首页或营销页，这里的参考最直接。
访问地址：land-book.com
风格关键词
跟 AI 沟通设计时，用专业的风格关键词比说"好看"有效 100 倍。你在 Dribbble 搜 "glassmorphism" 能精准找到毛玻璃风格的作品，搜 "beautiful design" 只会得到一堆不相关的结果——跟 AI 沟通也是同理，每种风格都有自己的标准名字。以下是常见的设计风格：
🎨🌈✨🎭
玻璃拟态卡片
半透明 + 模糊背景
玻璃拟态
Glassmorphism适合场景：社交应用音乐播放器天气应用
📋 提示词
用玻璃拟态风格设计这个卡片，半透明白色背景，backdrop-blur 模糊效果，细微的白色边框
如何向 AI 描述风格
老师傅总结了一个公式：
风格关键词 + 配色方案 + 参考网站/截图 + 具体场景配色工具
你有没有打开过一个网站，觉得"哪里不对"但说不上来？多半是配色不协调。配色工具帮你生成视觉上和谐的颜色组合：
| 工具 | 用途 | 地址 |
|---|---|---|
| Realtime Colors | 实时预览配色在网页上的效果 | realtimecolors.com |
| Coolors | 随机生成和谐的配色方案 | coolors.co |
| Happy Hues | 提供完整的配色方案 + 预览 | happyhues.co |
| Tailwind 调色板 | Tailwind 内置的颜色系统 | tailwindcss.com/docs/colors |
配色捷径
不想自己选颜色？告诉 AI："用 Tailwind 的 slate 色系做暗色模式"或"用 Tailwind 的 blue 色系做主色调"。Tailwind 的颜色系统已经帮你调好了明暗层次。
下一步
有了灵感和风格方向，想知道那些"看起来很贵"的效果怎么实现？继续看 5.5 让页面更高级的效果。