---
title: "第五章：界面(UI)与交互(UX)"
---


# 第五章：界面(UI)与交互(UX)

![img](/images/Advanced/mlkzwvbv-cfdf61ece2ce1cbf.jpg)

## 序言

看着屏幕上 AI 生成的网页，你觉得太丑了，尤其是那个紫色渐变，千篇一律。你试图让 AI 把按钮变漂亮点，结果它给你的代码里多了一堆 `<style>` 标签，改了这里坏了那里，搞了半天也不符合你的想法。

老师傅告诉你，**这一章学的是前端开发——也就是用户看到的界面**。你在前面（开发基础）已经了解了前端和后端的区别：前端负责"展示"，后端负责"处理"。这里只关注展示的部分。



### CSS 与组件

老师傅告诉你，要解决这个问题，你得先懂两个概念：**CSS** 和 **组件**。

- **CSS (层叠样式表)**：如果说 HTML 是网页的**骨架**（素颜），那 CSS 就是**化妆品**。它决定了按钮是圆角还是直角，背景是渐变还是纯色。
- **组件 (Component)**：现代网页不是画出来的，而是**搭**出来的。导航栏、按钮、输入框，这些都是预先做好的**乐高积木**。你不需要每次都手写一个"带圆角、有阴影、鼠标悬停变色的红色按钮"，而是直接拿来一个叫做 `<Button />` 的积木就能用。
- **布局 (Layout)**：元素怎么摆放在页面上，由布局方式决定。你刷朋友圈时内容从上到下一条条排列，这就是 Flexbox 在做的事；打开小红书，照片像棋盘一样填满屏幕，这是 Grid 的效果。你只需要告诉 AI"把这三个按钮横向排列"或"把页面分成左右两列"，具体属性让它处理。



### Tailwind 与 shadcn/ui

懂了概念，老师傅推荐了 **shadcn/ui**。但在介绍它之前，他先让你理解了它的地基——**Tailwind CSS**。

传统的 CSS 写法像**写作文**，你需要给每个元素起个名字（比如 `login-box`），然后在一个单独的文件里描述它的长宽颜色。这很容易撞名字——你叫 `card`，AI 也叫 `card`，两个样式打架，页面就乱了。而 Tailwind 允许你直接在 HTML 标签里写 `class="p-4 bg-red-500 rounded-lg"`。这就好比**AI 最擅长做填空题**，你让它"堆砌描述性的单词"比让它"管理复杂的文件引用"要准确得多。

随后是 **shadcn/ui**，它是一套基于 Tailwind 的**高质量组件库**。老师傅特意强调，它和传统的组件库（如 Ant Design）完全不同。它不是一个安装在 `node_modules` 里的黑盒子，而是通过命令行**直接把组件的源代码复制粘贴到你的项目里**。这意味着你拥有这些代码的**完全控制权**。AI 不仅能使用这些积木，还能直接修改积木的内部构造来满足你的特殊需求——这简直是为 AI 编程量身定做的模式。

你学会了去查阅 shadcn 的官方文档，提取核心部分（比如 Form 表单的用法）喂给 AI，强制它按照当前技术栈的规范来写代码。你还顺便指定了 **Lucide React** 作为图标库，因为 AI 经常瞎编图标的名字，指定标准库能避免它由着性子乱写。



### UX 体验

但单纯的好看还不够。老师傅告诉你，**UI（界面）只是皮囊，UX（体验）才是灵魂**。你开始尝试让 AI **交互设计师**的角色，而不只是代码生成器。你不再直接下令给我画一个页面，而是描述场景，让 AI 帮你完善交互逻辑。老师傅举了几个经典的 **UX 避坑指南**：

- **按钮的反馈状态**：
  - *错误示范*：点击"支付"按钮后，页面毫无反应，用户以为没点上，于是疯狂点击，导致扣款两次。
  - *AI 指令*："请给这个提交按钮加上 **Loading 状态**。当用户点击后，按钮应变灰并显示转圈动画，且不可再次点击，直到请求结束。"
- **破坏性操作的防护**：
  - *错误示范*：点击"删除"图标，数据瞬间消失，用户手滑误删欲哭无泪。
  - *AI 指令*："这个删除操作太危险。请设计一个 **AlertDialog（警告弹窗）**，要求用户点击'确认删除'红色按钮，甚至要求输入'DELETE'这几个字才能执行删除。"
- **数据的空状态**：
  - *错误示范*：新用户注册进来，没有任何数据，页面一片空白，像出了 Bug。
  - *AI 指令*："当列表没有数据时，不要留白。请展示一个可爱的插画组件，并放一个'创建第一个项目'的引导按钮。"



### 提示词技巧

用 AI 开发 UI 时，提示词的写法会直接影响效果。创建组件时要明确说明技术栈和组件来源："创建一个登录表单，包含邮箱输入框、密码输入框、登录按钮，使用 shadcn/ui 组件和 Tailwind CSS"。优化布局时要把响应式需求说清楚："优化这个页面的布局，使用响应式设计，移动端使用单列布局，桌面端使用双列布局"。新手常犯的错误是一次性让 AI 生成复杂页面（应该分步进行）、忽略响应式设计（应该提前说明）、过度设计（应该从简单开始迭代）。UI 开发本质上是在堆砌样式细节，而 AI 在细节上容易出错，所以保持提示词清晰、分步迭代是关键。

在 AI 的引导下，你设计出了不仅美观（UI），而且好用（UX）的交互流程。你甚至让 AI 把这些决策更新回了你的 **PRD 文档** 中，确保文档永远是最新的"单一事实来源"。

你似乎悟出了一个道理：**VibeCoding，本质上就是你负责根据文档制定标准（选组件库、定流程），然后让 AI 帮你做填空题。**

老师傅说："丑是小事，好用才是关键。AI 能生成漂亮的页面，但它不知道哪个设计真正符合用户需求。好 UX 的核心是：理解用户场景，而不是技术炫技。"



### 响应式设计

老师傅补充了一个重要概念："现代用户用各种设备访问你的网站——手机、平板、电脑。屏幕尺寸从几百像素到几千像素不等。如果你只为电脑设计，手机用户看到的页面会变形或文字小得看不清。"就像同一篇文章，在手机上自动变成单栏阅读，在电脑上变成双栏——内容没变，排版跟着屏幕走。

**响应式设计的核心**是同一套代码，根据屏幕尺寸自动调整布局。比如手机上显示单列，电脑上显示双列；移动端隐藏次要信息，桌面端完整展示。

这让你的产品能在所有设备上都有良好的体验。好消息是，这些布局细节 AI 会帮你处理。你只需要在提示词中说清楚"要适配移动端"或"在手机上显示单列"，AI 就会使用合适的 CSS 技术来实现。你理解这个概念就够了。

### 性能意识

在结束这章前，老师傅还提醒你，做界面时要有**性能意识**。

你可能会选一张高清大图做背景，文件有好几兆。用户在移动网络下打开，可能要等十几秒才能看到。很多用户等不了这么久，就直接关掉了。

所以，选择图片时要控制大小。如果非要用大图，可以让 AI 帮你压缩一下。

不过老师傅也说："性能优化不需要现在就深究，先让功能跑起来。等你部署到云平台后，平台会自动帮你做很多优化工作，比如压缩图片、加速访问。等上线后有了真实用户，如果他们反馈慢，再考虑进一步优化。过早优化是浪费时间。"



### 从UI到UX的产品思维

在结束这章前，老师傅帮你完成了一次认知跃迁。

他说："你现在知道怎么做出漂亮的界面了，但我要问你一个问题——**你的界面是给谁用的？**"

你愣住了。你确实没想过这个问题。你只是觉得紫色渐变不好看，想换成蓝色系；你觉得按钮要圆一点，阴影要淡一点。但这些真的对用户重要吗？

老师傅继续说："**UI（界面）是表象，UX（体验）才是本质**。一个再漂亮的按钮，如果用户找不到或者点不懂，那就是失败的。"

你开始理解：AI擅长写CSS、擅长堆样式，但它不知道你的用户是谁、在什么场景下使用你的产品。这些"为什么"的问题，只有你能回答。

所以，**VibeCoding的产品思维是这样的**：

- **你负责理解用户**：用户是医生还是学生？是在地铁上用还是办公室里用？是赶时间还是慢慢浏览？
- **你负责定义场景**："这个按钮是用户填写完长表单后点击的，他此时很紧张，怕数据丢失"
- **AI负责实现细节**：根据你描述的场景，AI知道要加Loading状态、要本地保存草稿、要明确告诉用户"提交成功"

这就是从UI到UX的跃迁：**从关注"好不好看"，转向思考"好不好用"**。

老师傅说："好设计不是技术炫技，而是理解用户。AI能帮你画出最漂亮的按钮，但只有你知道用户真正需要什么。"

---

### Skills 资源

你发现 AI 生成的代码虽然能跑，但设计感总是差一点。还记得你把 shadcn 文档喂给 AI 让它按规范写代码吗？Skills 做的是同样的事，只不过别人已经帮你整理好了这份"规范手册"，一条命令就能加载。


常用的 UI/UX 相关 Skills：

| Skill 名称 | 用途 | 安装命令 |
|-----------|------|---------|
| `frontend-design` | 高质量前端界面设计 | `npx skills add https://github.com/anthropics/skills --skill frontend-design` |
| `web-design-guidelines` | Web 界面设计规范审查 | `npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines` |
| `ui-ux-pro-max` | UI/UX 专业设计指南 | `npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-max` |
| `building-native-ui` | 原生移动端 UI 开发 | `npx skills add https://github.com/expo/skills --skill building-native-ui` |
| `audit-website` | 网站 UI/UX 审计 | `npx skills add https://github.com/squirrelscan/skills --skill audit-website` |

安装和使用方法详见 **<https://skills.sh>**

---

## 小节导航

> 接下来的几个小节，**不是让你从头学一遍前端**，而是给你一份**工具箱和灵感库**。你不需要记住所有内容，只需要知道"原来还有这种东西"——当项目需要时，回来查就行。

```
- 5.1 AI 设计工具 (./01-ai-design-tools.md) 🟡
    Google AI Studio、v0.app、Figma、Google Stitch...这些专门做 UI 的 AI 工具，什么时候用？

- 5.2 组件库 (./02-component-libraries.md) 🟡
    shadcn/ui、Ant Design、Element Plus、TDesign...这些现成的积木，什么时候用哪个？

- 5.3 动画与交互库 (./03-animation-libraries.md) 🟡
    Motion、GSAP、Three.js...让页面"动"起来的选项

- 5.4 UI 风格与灵感 (./04-ui-inspiration.md) 🟡
    Awwwards、Dribbble、Mobbin...去哪里找参考？如何向 AI 描述一种风格？

- 5.5 让页面更高级的效果 (./05-advanced-effects.md) 🟡
    视差滚动、3D 翻转、骨架屏...那些让页面显得"高级"的效果，以及对应的提示词

- 5.6 组件库 Skills 化 (./06-component-skills.md) 🔥 NEW
    将项目组件库转化为 AI 可理解的 Skills，实现设计系统约束和一致性
```

---