如何在 AI 应用开发中运用专业设计原则

现在做一个简单的应用很容易。但 vibe coding 工具批量产出的应用，和专业团队做出来的应用，差距一眼就能看出来。

其实大可不必如此。

这篇博客会分享一套方法，帮你做出视觉上真正有说服力的应用。

当然，我们也可以给你一套 DIY 方案：找几个你觉得设计漂亮的 App 截图，让 AI 把设计拆解成可执行的条目，再把这些设计照搬进你的应用。网上有无数教程、插件和资源，能帮你给应用套上一个还过得去的设计。

但这不是做出独特、视觉惊艳之作的最佳路径。想在泛滥的 vibe coded 应用里脱颖而出，你需要 polish。

所谓 polish，就是坚持与品味遇上设计科学的那一刻。

Agentic design 的局限

Agent 在一些非常具体的设计任务上越来越强，比如拼装大多数设计模式和布局，尤其是在有模板和现成代码库可用的时候。但它们依然很难被精确操控。因为设计不是代码。

不过，如果你翻一下聊天记录，大概会看到 AI 正在拼命算代码，试图把你说的“把按钮对齐到主容器边缘”翻译成实现。Agent 没有眼睛。它们只能备好食材，一股脑全丢进锅里。有时成品一塌糊涂，有时看起来又完全没问题。可我们都知道，一锅好汤远不止这些。

设计科学

视觉设计是一门应用抽象的科学。关于这个主题的书多得数不胜数。设计不是艺术。John Maeda（著名设计师/技术专家）说过：“设计是问题的解。艺术是问题的问。”

自诞生以来，设计一直遵循一套核心原则，这些原则此后被应用到众多领域……建筑、印刷、园林、绘画、工业工程，以及包括软件在内的许多其他领域。“好设计”这个神话难以捉摸、晦涩难解，却又如此真实可感。你看到它的时候，你就知道。

用 AI 设计应用的功能性框架

下面这份清单列的是人们“一眼看到就知道”的那些品质。凡是让我们觉得视觉上和谐的东西，都满足清单上的每一条：

• 对比让元素彼此可区分。大小、颜色、粗细或形状上的差异建立起层级，把视线引向最重要的地方。没有对比，所有元素平分秋色，什么都突出不出来。

• 层级按重要程度引导读者浏览内容。标题先于正文，主操作看起来要和次操作不一样。大小、位置、颜色和粗细都在传递“先看这里”。

• 对齐带来秩序与关联。共享边缘或轴线的元素显得彼此相关、是有意为之。对齐做得好时没人会注意到，一旦没有，立刻显得潦草。

• 邻近把相关项归到一起，把无关项分开。组与组之间的留白告诉眼睛什么属于一体，不需要边框或方框。

• 重复（或者说一致性）建立整体感。反复使用同样的颜色、字体、形状和间距模式，设计会显得统一，用户也能更快学会这套系统。

• 平衡把视觉重量分配到整个画面上。对称平衡显得稳定、正式；不对称平衡显得有动感，但依然收得住。两种都行；失衡的布局则让人别扭。

• 留白（负空间）给内容喘息的空间。它不是空的，而是活跃的，决定了一个设计看起来是高级、从容还是拥挤。

• 统一是每个元素都各归其位的整体感觉。它在前几条原则协同运作时自然浮现；没有任何东西显得随意或格格不入。

把这些当作一个框架，用来和 AI 一起做批判和迭代。可惜，写一个像“visual-design.md”这样简单的 skill 并不管用。记住，AI 还没有眼睛，但你可以给它一张截图，让它对照这份清单批判并修改自己的输出。

将设计原则应用于 AI 驱动的应用设计

下面是同一个应用的两版设计示例。V1 是 Claude Code 在根据上述原则获得反馈之前的输出，V2 则是获得反馈之后的输出。

对比

V1 里，前几张卡片的黑白图片与柔和温暖的 hero 图在色调上互相打架。颜色多、尺寸杂，也没有一个明显的高对比焦点把视线引向导航。

V2 把对比用在了刀刃上。一颗白色「Book now」胶囊按钮落在深色、有氛围感的背景上。它是页面上唯一看起来能点的东西，视线自然就落在那里。导航里橙色的「Home」指示温暖而安静，而不是电光蓝，既标出了当前状态，又没有抢走上方主 CTA 的注意力。

层级

V1 的层级是乱的：文字标识、标语、地点、「Our Experiences」和体验卡片的标题，全都在争夺差不多的注意力。

V2 建立了清晰的三级层级：(1) hero 图 + 标语 + Book now，(2)「Experiences」区块标签，(3) 各张带名称和价格的卡片。视线自上而下移动的顺序，正是业务真正想要的顺序：氛围、转化，然后才是浏览。

对齐

对齐上，V1 没犯什么特别的错。这种简单的 UI 只有一个容器、两条侧轴。干得不错，Claude！V2 保持了对齐结构不变。

邻近

V1 里，标语和地点挤在 hero 照片上的文字标识下面，三条信息紧紧堆在一起，几乎没有喘息空间。接着是一个生硬而局促的过渡，直接带进密集的卡片。

V2 把职责分开了：hero 负责传达品牌和情绪。体验被推到下方，进入浏览模式的过渡因此更平缓。

重复

V1 混用了无衬线文字标识、另一种字重的正文、蓝色图标、橙色强调文字，以及卡片上的黑白照片处理。读起来像是好几个各自独立做出的设计决定。

V2 建立了一套系统：一个字体家族、统一的圆角胶囊形状、暖橙色作为唯一的强调色，以及贯穿始终的全彩摄影。

平衡

V1 头轻脚重，左右也不平衡。一张巨大的文字密集卡片占据了下面三分之二，hero 则显得被截断。视线往下沉。

V2 对非对称平衡的把握很到位：主视觉图占据顶部的主导空间，CTA 在中部充当视觉支点，两张横向滚动的卡片稳住底部，又不至于压得过重。重量自上而下分布，每一处都有意图。

留白

这是最大的一处升级。V1 里每一个像素都在干活（除了顶部那个莫名其妙的偏移）。文字压在照片上，卡片堆得密不透风，导航塞了四个图标。整体显得杂乱，而健康品牌恰恰不该给人这种感觉。

V2 让设计喘上了气。logo 图标周围、CTA 周围、区块标签与卡片之间，都留出了负空间。这片空间本身就是品牌承诺：修复、平静、可以呼吸的余地。

统一

V1 像是往模板里灌了内容。V2 则处处有意为之。每一个选择（夜间主视觉、暖橙色点缀、圆角胶囊、横向卡片滚动、一致的页边距）都在强化同一个想法：安静、高级、源于自然的体验。统一不是一项单独的手法；当其余七项原则彼此契合时，它自然就出现了——右侧正是如此。

警惕功利化的 AI 设计

注意，AI agent 往往非常功利，盯着功能做，结果就是一套毫无生气的 UX。我的建议是，把 agent 的输出当作一个简单的底子，在此基础上扩展。比如最初的预订流程 UX 非常简陋，如果在整个结算过程中不断回顾预订信息，会诱人得多。

满足于那种毫无生气的 AI 设计，危险就在于你无法脱颖而出，在这个人人都能做出一个 app 的世界里尤其如此。你需要一些设计上的细微差别，让你的作品与千篇一律的 AI 应用拉开距离。

和 AI 一起做设计可能很有挑战，由人来担任艺术指导同样有挑战。这些视觉设计原则，就是这场反复来回的对话所需的词汇。

试一试，然后告诉我们效果如何！