给 AI 装上审美：同一句需求，三种方法，UI 差了三档

功能能跑，结构也完整，但就是不好看——蓝紫渐变、居中标题、圆角卡片、淡淡的阴影，整个页面都带着一股 AI 味。这个系列只解决一个痛点：作为不手敲 CSS 的开发者，怎么让 AI 吐出来的页面脱掉那股廉价的 UI 味。

为控制变量，测试基准很简单：在不同项目路径下，用 Claude Code + DeepSeek V4 Pro，做一个【小满造物】的个人主页。不换工具、不加需求，纯粹测试不同交互策略对最终 UI 的影响。

一、零约束

第一轮，只给了那句需求，什么都没加。

页面结构完整，头像、导航、卡片、列表该有的都有，作为原型够用。但问题不在结构，在气质。

它看起来像一个独立开发者博客的默认皮肤，干净、克制、没犯错，也没任何让人记住的东西。首屏扫过去不知道这个人是干什么的，感觉不到这个页面的性格。

AI 在没约束的时候总喜欢走最安全的路：内容摆整齐，套一个高频模板。也说不上丑，但谁看完都记不住。

二、设计提示词

第二轮，去 designprompts 挑了一份 SaaS 风格的设计 prompt——500 多行的 MD 文档，写死了页面气质、布局、字体层级、按钮、卡片、动效和禁止项，作为额外上下文丢给 AI。

和零约束比，差距一眼可见。

首屏变成了完整的产品型 Hero 区，左侧标题和介绍，右侧抽象视觉元素。标题里的关键词被放大强调，按钮、卡片、标签、文章列表也更接近同一套设计语言。蓝色主色、统一卡片系统、清晰的区块节奏，页面终于有了明确的视觉方向。

虽然不是顶级设计，但至少有方向。代价是方向由别人定——选了 SaaS 风，出来就是 SaaS 味。想调就得自己改 prompt，而大部分人 Vibe Coding 的问题恰恰是不知道怎么用专业术语准确描述自己的需求。

三、截图参考

第三轮，没用文字 prompt。直接把 designprompts 里那个 SaaS 风格的预览截图拖给 AI，附一句：参考这个风格。

理论上，直接参考成型图应该比读 500 行 prompt 更直接。但是结果不太对。

AI 确实学到了 Hero 区、浮动卡片等布局骨架，懂了要做个 Landing Page，但配色却从蓝白色的 B2B SaaS 风跑偏成了橙棕色。

为什么看图不管用？

因为单张截图的上下文太薄弱。当前多模态模型的视觉解析，往往偏向于提取语义结构（比如哪里是导航、哪里是栅格），而不是精准还原色值、阴影这些设计变量。在丢失明确约束的情况下，AI 会发生幻觉补偿，习惯性地用训练数据里最高频的默认 UI 库去填补视觉空白。

截图能告诉 AI 大概长什么样，但守不住为什么好看。最终往往是骨架保住了，灵魂却串了味。

不同场景怎么选

如果只想快速改善单页，设计提示词性价比最高——挑一个接近目标气质的方向，让 AI 按这个方向走，不用从零解释什么是好看。截图参考可以作为备选，但不能指望一比一复刻，更稳的用法是配合文字约束。

工具箱速查

用 AI 写页面时涉及的各种需求，按场景分好了，Vibe Coding 时需要什么直接去挑。

视觉三件套：配色 + 字体 + 字号（AI 最常翻车的三个点）

• Realtime Colors — 调好色板直接预览网页真实效果，定好后把 HEX 色值抄给 AI
• Fontpair — 标题 + 正文字体搭配方案，选一组直接写进约束里
• TypeScale — 生成字号层级，解决 AI UI 里字都一样大的问题

现成设计 prompt（复制粘贴直接用）

• designprompts — 主推，约 30 种风格，极简到赛博朋克，适合快速选型
• UI Prompt Explorer — 按场景分组，覆盖主题更细致
• uiprompt — 20 多种高频风格，额外提供移动端 Prompt 参考
• LandingHero Library — 1000+ UI 区块截图库，挑中某个区块让 AI 照着搭骨架
• ClaudeKit Frontend Demo — 大量带交互和动效的 Prompt 样本

截图逆向工程（把截图反推成设计规范）

• UI Prompt Builder — 上传网页截图自动提取色值、字号、间距，比直接喂 AI 截图漂移小得多
• AI/UX Playground — 一条专门榨取截图视觉规律的 Prompt，让 AI 先把图解析成完整设计系统

设计灵感站（毫无头绪时去逛逛）

• godly — 前卫、极具创意的站点，适合找整体 Vibe 和调性
• mobbin — 按页面类型和行业筛选，解决具体组件该怎么设计的问题
• pageflows — 完整的交互流程录像，观察高级页面的操作细节和反馈链路