来源：https://github.com/datawhalechina/vibe-vibe

序言

看着屏幕上 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能帮你画出最漂亮的按钮，但只有你知道用户真正需要什么。"

小节导航

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

- 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 翻转、骨架屏...那些让页面显得"高级"的效果，以及对应的提示词