核心思想
vibe coding 拉平了「能做出 App」的门槛，却没拉平视觉专业度——智能体擅长拼装布局，却没有眼睛，难以被「对齐按钮」这类口语精确驾驭。打磨（polish）是坚持与品味遇见设计科学：用对比、层级、对齐、邻近、重复、平衡、留白、统一性八条原则作批评清单，配合截图反馈迭代，比照搬漂亮截图更可持续。取舍很清楚：把智能体输出当底座，用人类艺术指导补上无菌 UX 缺的 nuance，才能从同质化 AI 应用里脱颖而出。
做个简单应用，现在已经很容易了。但凭感觉编程（vibe coding）工具刷出来的应用，和专业团队做出来的应用之间，差距一目了然。
其实不必如此。
这篇文章会分享一套结构，帮你做出视觉上真正有吸引力的应用。
当然，我们也可以给你一套 DIY 办法：去截几张你觉得设计得很美的应用截图，让 AI 把设计拆解成可执行条目，再把同样的设计照搬进你自己的应用。网上有无数教程、插件和资源，足以帮你给应用做出还算像样的界面。
但那并不是做出独特、令人眼前一亮视觉的最佳路径。要在满屏 vibe-coded 应用的拥挤版图里脱颖而出，你需要的是打磨（polish）。
打磨，是坚持与品味遇见设计科学。
智能体式设计的局限
智能体已经很擅长某些具体的设计任务：拼装大多数设计模式和布局——尤其是在有模板和现成代码库可用的时候。但它们依然很难驾驭。因为设计不是代码。
可是你去翻聊天记录，多半会看到 AI 在吭哧吭哧写代码，试图把你那句「把按钮对齐到主容器边缘」翻译成实现。智能体没有眼睛。它们只能备好食材，一股脑扔进锅里。有时结果是灾难；有时看起来完全说得过去。我们都知道，好汤远不止这些。
设计的科学
视觉设计是一门应用抽象的科学。这方面的书多到数不胜数本。设计不是艺术。John Maeda（著名设计师/技术人）说过：「设计是问题的解法。艺术是对问题的提问。」
从诞生之初，设计就遵循一套核心原则，并被应用到无数领域：建筑、印刷、景观、绘画、工业工程，以及更多领域——包括软件。「好设计」的神话既缥缈又隐晦，却又如此可感。你一看就知道。
用 AI 做应用设计的实用框架
你接下来读到的，就是人们「一看就知道」时真正看见的那些品质。凡是我们觉得视觉上和谐的东西，基本都会勾上这些框：
- 对比（Contrast） 让元素彼此可区分。尺寸、颜色、字重或形状上的差异建立层级，并把视线拉向最重要的东西。没有对比，一切同等竞争，没有什么能脱颖而出。
- 层级（Hierarchy） 按重要程度引导观者穿过内容。标题先于正文，主操作看起来不同于次要操作。尺寸、位置、颜色和字重都在说：「先看这里。」
- 对齐（Alignment） 创造秩序与关联。共享同一条边或轴线的元素显得有关、有意。强对齐几乎隐形，但一旦缺失，立刻显得潦草。
- 邻近（Proximity） 把相关项聚在一起，把无关项隔开。组与组之间的留白告诉眼睛「谁和谁是一伙的」，不必靠边框或盒子。
- 重复（Repetition）（或称一致性）建立凝聚力。复用颜色、字体、形状和间距模式，让设计显得统一，也帮用户更快学会这套系统。
- 平衡（Balance） 在构图中分配视觉重量。对称平衡稳重、正式；非对称平衡更有动感，但依然收得住。两种都行；失衡的布局会让人觉得「不对劲」。
- 留白（White space）（负空间）给内容呼吸的空间。它不是空的，而是积极的，决定了设计显得高级、平静，还是拥挤。
- 统一性（Unity） 是「每个元素都本该在这里」的整体感觉。当其他原则协同工作时，它自然涌现；没有什么显得任意或格格不入。
把这些当成批评 AI、与 AI 迭代的框架。可惜，做一份简单的 Skill（技能文件）比如「visual-design.md」远远不够。记住：AI（目前）没有眼睛——但你可以给它一张截图，让它按这份清单批评并修改自己的输出。
把设计原则用到 AI 驱动的应用设计上
下面是同一应用的两版设计示例。V1 是 Claude Code 在按上述原则给反馈之前的输出，V2 是反馈之后的结果。（剪藏正文未嵌入原页配图，阅读时请对照 原文页面 的 V1/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 很好地运用了非对称平衡：Hero 图在顶部占据主导空间，CTA 在中部充当视觉支点，两张可横向滚动的卡片锚定底部却不压垮画面。重量自上而下有意分配。
留白
这是最大的升级。V1 里几乎每个像素都在加班（除了那块奇怪的顶部偏移）。图上压字、密实的卡片堆、四个图标的导航。感觉拥挤——而这恰恰是康养品牌最不该唤起的感觉。
V2 让设计喘得过气。字标周围、CTA 周围、区块标签与卡片之间的负空间。那片空间就是品牌承诺：恢复、平静、留出呼吸的余地。
统一性
V1 像一个被灌进内容的模板。V2 则显得有意为之。每一个选择（夜间 Hero、暖橙强调色、圆角胶囊、横向卡片滚动、一致的边距）都在强化同一个想法：安静、高端、扎根自然的体验。统一性不是单独的一招；它是其余七条原则彼此合拍时的产物——而右侧那一版，正是如此。
警惕功利主义的 AI 设计
请注意：AI 智能体往往非常功利，盯着功能，容易导向一种无菌式 UX。我建议你把智能体输出当作一块简单底座，再往上扩展。例如最初的预订流程非常干瘪，若在结账全程加入预订摘要（recap），会诱人得多。
满足于无菌的 AI 设计，危险在于你脱颖不出来。 在这个人人都能上线一个应用的世界里，你需要一点设计上的细腻层次，才能让作品与那一大片同质化的 AI 应用拉开距离。
和 AI 一起做设计并不容易。人来做艺术指导也不容易。这些视觉设计原则，就是这场迭代对话的词汇。
试试看，然后告诉我们效果如何！
相关笔记
- Raycast 2.0 重写：跨平台架构与体验打磨 —— 产品级「打磨」如何落到架构与交互细节
- 使用 Claude Code：HTML 那不讲道理的有效性 —— 用 Claude Code 做前端时的另一条实践线
- 构建 Claude Code 的经验：我们如何使用 Skills —— Skill 能补流程，但替代不了有眼睛的设计批评
- 用了 3 个月 Claude Code，这 9 条最佳实践让我少走了无数弯路 —— 把 AI 输出当底座、人机迭代的日常工作流
- Claude Code 使用实践 - boristane —— 个人 Claude Code 工作流复盘