UI 设计基础

作为独立开发者，你不需要成为设计师，也能做出体面的界面。好的设计不是天赋，而是一套可学习的规则。

AI 生成的界面之所以"看起来像 AI 做的"，是因为它们反复落入相同的设计陷阱。知道这些规则，你就能让 AI 帮你做出更好的界面。

核心原则

1. 排版：拉开层级

用户扫一眼页面，需要立刻知道什么是重点。

• 标题之间至少 1.25 倍差：H1(48px) → H2(38px) → H3(30px) → Body(16px)
• 正文 ≥ 16px，行高 ≥ 1.5
• 不要通篇只用一种字号和字体——标题、正文、标签需要视觉区分

怎么让 AI 改： 直接告诉 AI "把标题层级拉大，H1 用 48px，H2 用 38px，正文 16px，行高 1.6"。大多数 AI 默认生成的层级太"平"，需要你主动提要求。

2. 色彩：不要用 AI 默认色板

AI 默认色板的标志：紫色渐变 + 深色背景 + 青色强调。这已经成为"AI 生成"的代名词。

• 选 1-2 个品牌色，不要用纯黑（用 #0a0a0b 代替 #000）
• 正文对比度 ≥ 4.5:1（WCAG AA 标准，用 contrast-ratio.com 检查）
• 彩色背景上不要用灰色文字，用同色系深色

怎么让 AI 改： "不要用紫色渐变，用我的品牌色 [色号]，正文保持高对比度"。或者在 prompt 里指定配色方案。

3. 布局：留白是最好的装饰

• 卡片嵌套不超过 2 层
• 正文每行不超过 80 字符（设置 max-width: 65ch）
• 间距用 8px 的倍数系统（8、16、24、32、48）
• 不是每段内容都需要卡片容器

怎么让 AI 改： "基于 8px 网格调整间距，减少卡片嵌套，限制正文宽度到 65ch"。

4. 动效：有意义，不打扰

• 用指数缓动（ease-out），不用弹跳缓动
• 只对 transform 和 opacity 做动画，不对 width/height 做
• 动效应传达状态变化，不是纯装饰

5. CTA：每页只有一个主角

当所有按钮看起来一样强，就等于没有主次。每个页面的主要行动点只能有一个。其他按钮用次要样式（outline 或 text-only）。

两种设计模式

你的产品如果是工具或 SaaS，默认使用产品模式。 克制比创意更重要。

设计检查清单

上线前对照检查：

• 标题层级有足够差异（1.25x+）
• 正文 ≥ 16px，行高 ≥ 1.5
• 没有紫色渐变或 AI 默认色板
• 卡片嵌套不超过 2 层
• CTA 按钮只有一个主样式
• 正文宽度控制（≤ 80 字符）
• 间距用 8px 倍数系统
• 手机端可用，第一屏不挤坏
• 所有按钮有可点击的视觉反馈（hover 态）

AI 设计反模式速查

最常见的 AI 设计问题及解决方案，详见 技能页的反模式速查。

推荐的 AI 设计工具

• Impeccable — 开源 AI 设计技能工具，支持 Claude Code 和 Cursor
• 安装：npx skills add pbakaus/impeccable，然后运行 /impeccable teach 建立设计上下文

给独立开发者的黄金法则

• 克制 > 创意： 80% 的设计效果来自 20% 的基础规则
• 一致性 > 完美： 建立简单的设计系统并严格遵守
• 检查 > 猜测： 用工具检测代替直觉判断
• 告诉 AI 你想要什么，而不是让它自由发挥： AI 默认的出图风格充满反模式，你需要主动约束它

用户不会因为你的设计"不错"而留下，但会因为设计糟糕而离开。这几条规则就是你守住底线的护城河。