界面 UI 与交互 UX
5.6 让 AI 理解设计意图
Tip
学会用专业术语精准描述设计意图,让AI准确理解你想要的效果,避免AI幻觉。
1. 为什么要学这个?
你对AI说:"把这个页面做得好看一点。"
AI沉默了一会,然后给你的背景加了一个俗气的彩虹渐变,把字体改成了Comic Sans。
你对AI说:"我要那种现代科技感。"
AI给你加了一堆发光的蓝色边框和科幻字体。
问题出在哪里?AI不是设计师,它是一个执行者。你的指令太模糊,它只能瞎猜。
2. 核心概念
2.1 设计意图(Design Intent)
就像在理发店。
- 模糊指令:"剪好看点。"——结果完全看托尼老师心情,大概率翻车
- 精确指令:"两边推短到3毫米,上面留长5厘米,不要打薄,刘海向左分。"——这就是设计意图
对AI也是一样,你必须把脑子里的画面翻译成技术术语。
2.2 完美提示词的三要素
- 组件源:用什么积木?(shadcn/ui, lucide-react)
- 布局:怎么摆?(Flex, Grid, Sticky)
- 视觉风格:什么味?(Minimalist, Dark mode, Rounded corners)
3. 提示词迭代循环
graph TD
A[脑子里的想法] -->|翻译| B[Prompt: 组件+布局+样式]
B -->|AI生成| C[代码实现]
C -->|审查| D{符合预期吗?}
D -- No(太丑了) --> E[具体指出哪里丑: 字体太小, 颜色太深]
E -->|修正Prompt| B
D -- No(功能不对) --> F[补充UX逻辑: 加Loading, 加报错]
F -->|修正Prompt| B
D -- Yes --> G[提交代码]
4. 模糊 vs 精确指令
| 🎯 场景 | ❌ 模糊指令 | ✅ 精确指令 |
|---|---|---|
| 创建卡片 | "做一个卡片" | "使用shadcn的Card组件,包含Header、Content、Footer。Header放标题和Badge,Content放文字描述。" |
| 调整间距 | "太挤了,松一点" | "给所有子元素增加gap-4,给容器增加p-6的内边距。" |
| 配色 | "我要红色主题" | "使用bg-red-500作为主色,但Hover状态要加深到bg-red-600,文本使用slate-800。" |
5. Vibe Coding标准提示词模板
复制这个模板,填空,发给AI:
请把这个<section>重构为一个功能区。
组件:使用shadcn/ui的Card作为容器,内部使用Button(outline variant)。
布局:使用Grid布局,在移动端是1列(grid-cols-1),在桌面端是3列(md:grid-cols-3)。卡片之间gap-6。
交互:Hover卡片时,卡片要有轻微的上浮动画(hover:-translate-y-1)和阴影加深。
图标:使用lucide-react,为每个卡片根据标题配一个合适的Icon。
6. 避坑指南
| ✅ 推荐做法 | ❌ 禁忌 |
|---|---|
| 一次只改一个点(分步迭代) | 一口气让AI"设计并实现整个后台管理系统" |
| 提供参考图/代码片段 | 让AI"凭空想象" |
| 指定图标库(Lucide React) | 随便AI用什么图标(它可能会混用FontAwesome和Material Icons) |
7. 真实案例
Story
2023年,AI幻觉图标事件
GPT-4刚发布代码解释器功能时,一位开发者试图让它写一个带图标的菜单。指令:"给我的菜单加上图标,比如用户就要有人头,设置就要有齿轮。"结果:AI生成了代码,但页面上一片空白。调试了半天,开发者发现AI引入了一个根本不存在的图标库react-icons/fa6(当时FontAwesome 6还没发布React库),并且编造了一堆像<FaUserAstronautMega>这样听起来很酷但完全不存在的组件名。
Vibe心法:用组件+布局+样式的专业术语精准描述你脑中的画面——约束越强,结果越美,避免AI幻觉。
8. 本章小结
- 🎯 消除歧义:不要只说"好看",要具体到组件名、布局方式和设计风格
- 🚫 避免幻觉:指定技术栈(如shadcn/ui、lucide-react)能有效防止AI瞎编代码
- 🔄 迭代思维:通过持续修正Prompt,引导AI逐步逼近你脑海中的画面
- 📋 使用模板:用标准提示词模板确保每次都包含组件、布局、样式三要素