UI/UX 优化

说实话，大部分 AI 生成的 MVP 看起来像 2015 年的 Bootstrap 模板。功能能跑，但用户打开 3 秒就关了。

这不是审美问题，是存活问题。你花了一周用 AI 搭出来的 product，如果界面粗糙到让人不想点第二下，那一周就白费了。好消息是：让一个"能用"的界面变成"想用"的界面，靠的不是设计天赋，而是几条可以机械执行的规则。

---

3 秒法则：用户比你想的更没耐心

3 秒法则是什么？ 用户打开你的页面，3 秒内就会决定留还是走。不是夸张——Google 的研究数据显示，页面加载超过 3 秒，53% 的移动用户直接离开。

打个比方：这就像你走进一家餐厅，如果门口脏乱差、灯光昏暗，你根本不会坐下来看菜单，哪怕厨师是米其林级别的。

工作中怎么用：每次做完一个页面，找一个完全没见过你 product 的人，让他打开看 3 秒，然后问"这是干嘛的？"如果他答不上来，你的 first impression 就有问题。

最常踩的坑：以为"功能做完了就行，UI 后面再优化"。说实话，"后面"永远不会来，因为没有用户愿意等到"后面"。

---

Quick Wins：让 AI 生成的界面立刻变专业

不需要学设计，照着这几条做，效果立竿见影。

1. 间距一致：8px Grid System

我们遇到过一个典型问题：AI 生成的页面，按钮之间有时 12px 有时 20px 有时 35px，看起来就是"不对劲但说不出哪里不对劲"。全部改成 8px 倍数后，整个页面立刻像是同一个人设计的。

直接给结论：别用奇数间距，别用 5px、13px、27px 这种数字。Tailwind CSS 的 spacing scale 天然就是 4px/8px 倍数，用 Tailwind 的人自动就对了。

2. 字体层级：最多 3 级

/* 够用了，别再加 */
--font-heading: 24px / 700;    /* 标题 */
--font-body: 16px / 400;       /* 正文 */
--font-caption: 14px / 400;    /* 辅助文字 */

AI 生成的界面最常见的毛病就是字体大小满天飞——12px、13px、14px、15px、16px、18px、20px、24px 全用一遍。结果就是没有层级，用户眼睛不知道该看哪里。

3. 颜色：2-3 个主色，别再多了

推荐工具：Coolors 生成配色方案，选一组后严格只用这几个颜色。别到处 #3B82F6 #2563EB #1D4ED8 三个蓝色混着用——它们看起来差不多，但放一起就脏。

4. Loading States 和 Micro-interactions

这是区分"demo 级别"和"product 级别"最大的一条线。

// ❌ AI 默认生成的
{data ? <List data={data} /> : null}

// ✅ 加上 loading 和 empty state
{isLoading ? <Skeleton count={3} /> : null}
{!isLoading && data.length === 0 ? <EmptyState /> : null}
{!isLoading && data.length > 0 ? <List data={data} /> : null}

我见过太多 AI Builder 的作品，点击按钮后什么反馈都没有，用户不知道是在加载还是坏了，然后疯狂点击，然后发了 5 次请求。一个 loading spinner 能解决 80% 的"感觉不靠谱"问题。

---

AI 工具做 UI 优化的正确姿势

工具选择

Screenshot → Prompt 工作流（最实用）

这是我用得最多的方法：

1. 截图你当前的界面
2. 发给 Claude / ChatGPT，说："这是我的 landing page，列出 5 个最影响专业感的 UI 问题，并给出具体 CSS 修改"
3. AI 会精准指出间距不一致、对比度不够、按钮太小等问题
4. 一条一条改

比盲目让 AI "帮我美化一下" 有效 10 倍，因为它是基于你的实际界面在改，不是凭空想象。

让 Cursor 修 CSS 的 prompt 模板

看这个组件的代码。问题是：
1. 卡片之间间距不一致
2. 标题和正文字号差距太小
3. hover 没有任何反馈

请修改 CSS，要求：
- 用 8px grid system
- 标题 24px/700，正文 16px/400
- hover 加 translateY(-2px) + box-shadow 过渡
- 保持现有 Tailwind class 风格

---

响应式设计：Mobile-First 不是口号

直接给结论：先在手机上调好，再在桌面上微调。不是反过来。

我们遇到过的惨案：一个同学花了两天在桌面上把界面调得很漂亮，然后手机一看——所有卡片挤成一坨，按钮小到点不到，文字溢出。返工比从头做还慢。

最省事的做法：开发全程把浏览器宽度压到 375px（iPhone SE），先保证小屏好看，然后用 @media (min-width: 768px) 往上加样式。

别在真机上测之前就说"做完了"。Chrome DevTools 的 responsive mode 和真机差距很大，尤其是触摸操作和 safe area。

---

Dark Mode：要么好好做，要么别做

半吊子 dark mode 比没有更糟。白色文字配深灰背景，但某些组件还是白底——这种体验比纯 light mode 差得多。

如果要做，最省事的方案：

:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --card: #f9fafb;
  --border: #e5e7eb;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a;
    --text: #ededed;
    --card: #1a1a1a;
    --border: #2d2d2d;
  }
}

所有组件只引用 CSS variable，切换就是自动的。但说实话，对 MVP 来说，不做 dark mode 完全没问题。先把 light mode 做好。

---

AI 生成界面的 5 个通病（附修法）

---

Accessibility 快速检查

这些不需要任何专业知识，5 分钟就能改完，但效果巨大：

• 文字对比度 ≥ 4.5:1（用 WebAIM Contrast Checker 测）
• 正文字号 ≥ 16px（别用 12px 14px 当正文）
• 可点击区域 ≥ 44x44px（手指能点到）
• 图片有 alt 属性
• 表单输入有 label
• 不仅靠颜色传达信息（色盲用户看不到红绿区别）

---

工具清单

---

实战 Checklist：改完这 10 条你的界面就能看

• 所有间距是 8 的倍数
• 字体只有 3 级（标题、正文、辅助）
• 颜色不超过 3 个主色
• 每个按钮有 hover 效果
• 数据加载有 loading state
• 列表为空有 empty state
• 操作失败有 error state
• 手机上测试过（375px 宽度）
• 文字对比度通过检查
• 可点击区域够大（44px+）

别想着一步到位。先过这个 checklist，你的界面就已经超过 80% 的 AI Builder 作品了。剩下的 20% 是品味，那个急不来。