如何用 AI 设计一款好看的应用

要让 AI 做出好看的应用，别再只说一句“把它做得好看点”，而是像设计师那样给出明确要求：两三个你喜欢的参考案例、一个有名字的设计方向，以及关于字体、配色和间距的具体规则。然后先做好一个页面，把它调到满意，再让 AI 把同一套体系应用到其他页面。大多数“AI 味”都来自模糊的提示词所产生的平均化答案，而具体的输入才能得到有个性的设计。

为什么 AI 设计的界面千篇一律

如果你只要求 AI 做“一个现代、简洁的 SaaS 仪表盘”，它给出的就是它见过的所有仪表盘的统计中间值：同一种无衬线字体、紫蓝渐变、带柔和阴影的圆角卡片、圆圈里的类 emoji 图标，以及写着“让工作流程更简单”的居中大标题区。每个单独的选择都没什么问题，问题在于这些选择都不是为你的产品做出的。

好的设计主要是一系列决策。你的任务是做出那几个决定应用个性的关键选择，让 AI 去一致地完成其余成千上万个细节。

第一步：先收集参考案例再下指令

花二十分钟收集两到四个参考案例，也就是那些风格适合你产品的应用或网站。好的来源包括你的目标用户已经在用的产品、设计图库，以及相邻领域公司的网站。

对每一个案例，用平实的文字写下你喜欢的具体之处：

• “留白很多，内容放在窄栏里，大号数字上方有小号灰色标签。”
• “紧凑的表格、细分隔线、没有卡片阴影，操作按钮只用一种强调色。”
• “大号衬线标题、暖白色背景、用摄影图而不是插画。”

然后把这些描述交给 AI；如果工具支持图片，也可以附上截图。要借鉴的是案例的品质，而不是产品本身：整体照搬别家公司的布局、品牌或文案，既有法律风险，也会损害你的可信度。

第二步：选定并命名设计方向

设计方向是对整体风格感觉的简短描述，它让 AI 在每个决策中都有一个统一的筛选标准。以下几种方向效果较好：

把它和应用的目标用户一起写进第一条提示词：

为一家独立瑜伽工作室做一个预约应用。设计方向：沉稳简约，类似印刷版的课程表。暖白色背景，近黑色文字，按钮和选中状态使用一种低饱和的鼠尾草绿作为强调色。标题用衬线体，正文用简洁的无衬线体。间距宽松，不用渐变，不用阴影，不用 emoji。移动端优先。

第三步：设定规则——字体、配色和间距

这三项决定了大部分视觉质量。把它们说得越明确，效果提升越大。

字体

• 一到两种字体。 一种标题字体加一种正文字体，或者同一字族的几种字重。
• 字号体系。 只用少数几个字号，并始终保持一致，例如 14、16、20、28 和 40 px，而不是让每个组件各自决定。
• 易读的正文。 网页上正文约 16 px，行高约 1.5，长文本的每行约 60–75 个字符。
• 用字重和字号而不是颜色区分层级。 标题更粗更大，次要文字更小、颜色更柔和的灰色。

配色

• 以中性色为主。 背景、表面、边框和文字灰色承担了大部分工作。
• 一种强调色用于操作按钮和选中状态。只有当第二种颜色有明确用途时才加入。
• 语义色只用于成功、警告和错误状态，且仅用于这些场景。
• 对比度。 WCAG 2 要求普通正文的对比度至少为 4.5:1，大字号文本至少为 3:1。白底上的浅灰文字经常不达标，可以让 AI 帮你检查。
• 深色模式如果需要，应当专门设计，而不是简单反色。

间距与布局

• 间距刻度，例如 4、8、12、16、24、32、48、64 px。所有元素都对齐到这个刻度上。
• 对齐。 边缘要对齐；内容放在网格上，或放在宽度一致的最大宽度栏中。
• 邻近性。 相关的内容靠近，无关的内容拉开距离。仅这一条规则就能解决大部分杂乱的界面。
• 少用容器。 不是所有内容都需要卡片。用边框、分隔线和留白来分组，往往更克制。

下面这条提示词只需一次性设置好整套体系：

在做更多页面之前，先建立一套小型设计系统并在所有地方统一使用：字号体系为 14/16/20/28/40 px，正文行高 1.5，间距刻度为 4/8/12/16/24/32/48 px，中性色从近白到近黑，一种强调色（#3F6B5A）仅用于主要操作，红色只用于错误提示。按钮、输入框和卡片应使用同一个圆角半径。检查所有文字是否达到 WCAG AA 对比度标准。

如果你使用支持代码的搭建工具，这通常会转化为设计令牌（design tokens），例如 CSS 变量或 Tailwind 主题，这样之后的修改只需在一处完成。

第四步：先把一个页面做好

不要一下生成十二个页面再逐一修复。挑选用户最常看到的页面，通常是仪表盘或主列表，反复迭代直到满意。然后：

以仪表盘作为所有其他页面的参考：统一头部、间距、字号、按钮样式和表格样式。把设置页和预约页更新为与之一致。

一个完成的参考页面，比任何形容词都更能传达你的审美取向。

第五步：用具体、小步的要求反复迭代

给 AI 反馈的方式和给初级设计师反馈类似：具体、每次只改一个区域，并说清楚哪些要保留。

一定要同时说明保留什么，比如“保持所有路由、文案和功能不变”，这样视觉调整就不会悄悄删掉功能。每次修改后，请先在手机尺寸的屏幕上检查，再提出下一个要求。关于小屏上的良好效果，可参考如何构建适合移动端的网页应用。

第六步：区分优秀与千篇一律的细节

结构调整到位之后，以下这些小细节能让应用显得更加完整：

• 空状态。 新用户在没有数据时看到的内容：一段简短说明和一个明确的操作，而不是一张空白表格。
• 加载状态。 使用与内容形状相似的骨架屏，而不是到处都是转圈的加载图标。
• 错误状态。 在引起错误的字段旁边，用通俗的语言给出提示。
• 悬停、聚焦和按下状态。 每个可交互元素都要有，焦点环对键盘用户很重要。
• 真实内容。 用真实的文字和数据替换“Lorem ipsum”和“张三”之类的占位内容；占位内容会掩盖布局问题。
• 统一的图标集，使用一到两种尺寸，线条粗细保持一致。
• 有目的的图片。 你产品、场所或人物的真实照片，比通用图库图片更有说服力。如果使用图库或生成的图片，请保持风格统一。
• 文案。 简短而具体的标签（“预约课程”，而不是“提交”）对感知质量的提升，不亚于任何配色选择。

常见错误

• 一条提示词里重做所有内容。 大规模重写会引入回归问题。应当逐页进行。
• 强调色太多。 如果所有东西都被突出，那就没有东西是突出的。
• 所有内容都居中。 除了标题，居中文本很难快速浏览；大部分内容应左对齐。
• 文字太小、对比度太低。 在大显示器上看起来优雅，在阳光下的手机上却无法阅读。
• 用装饰代替层级。 渐变和阴影无法弥补最重要的操作不够醒目的页面。
• 忽视落地页。 对许多产品来说，它是第一印象；参见如何做一个能带来转化的落地页。

如需了解设计之外更多的提示词写法，请阅读如何为 AI 应用搭建工具编写提示词。如果你的工作本身就是作品，比如设计或摄影作品集，如何搭建作品集网站会更深入地讲解展示方式。

在 Mythex 中进行设计

在 Mythex 中，你在聊天里描述设计，在实时预览中查看效果，并在下一次修改前检查手机尺寸的画面。文档中有一些简短的示例：关于说明修改内容和保留内容的设计与界面提示，以及用于逐页更新界面而不丢失功能的重新设计界面。Mythex 还可以在聊天中搜索图库照片或生成图片（比如主视觉图、背景图或分享图），并在你需要时将其放入应用中。如果某次调整出了问题，可以回退到它之前的检查点。如果你更想从现成的设计开始再做调整，可以浏览模板。

常见问题