让AI有审美：6个Skill打造高质量页面设计工作流

1. 从“能画”到“画得对”：AI审美缺失的根源在哪

很多人用AI做页面，第一反应是“给我生成一个好看的落地页”。结果拿到手的东西，配色不算丑，排版也不算乱，但就是透着一股“模板味”——像从某个免费素材站批量下载的，说不上哪里不对，但就是没有“设计感”。这个问题困扰了我很久，直到我把AI做页面的流程拆开来看，才发现症结根本不在“生成”这一步，而在生成之前的判断环节。

AI本身没有审美，它有的是概率。你给它一句“做一个科技感的首页”，它会从训练数据里找出“科技感”这个词最常共现的视觉元素：深色背景、蓝紫渐变、发光线条、等宽字体。这些东西单独看都没问题，但堆在一起就变成了“AI味”——因为它是按词频拼贴的，不是按视觉逻辑组织的。审美的本质是一系列判断：这个留白够不够、这组对比强不强、这个层级清不清楚、这个颜色在这个位置合不合适。AI缺的不是“画”的能力，缺的是“判断”的能力。

所以“让AI有审美”这件事，本质上不是给AI装一个审美模块，而是在做页面的每个环节里，插入人类设计师的判断节点，让AI在约束下工作。我把它拆成了6个skill，按做页面的实际顺序排列：从理解需求、定调性、搭结构、控细节、做检查到最终交付。每个skill解决一个具体的判断问题，串起来就是一套完整的“AI辅助设计工作流”。

这套东西适合谁？如果你是独立开发者，想快速做出不丢人的产品页面；如果你是设计师，想用AI提效但不想产出千篇一律的东西；如果你是产品经理，需要自己动手做原型但缺乏设计训练——这6个skill都能直接拿去用。我不讲空泛的“设计原则”，只讲在每个环节里，你该给AI什么指令、该检查什么、该在哪一步介入判断。

2. Skill 1：需求翻译——把“感觉”变成AI能执行的约束

2.1 为什么直接描述“风格”是无效指令

大多数人给AI下指令的方式是：“做一个简约风格的页面”“要高级感”“参考苹果的设计”。这些词在人类设计师之间可以沟通，因为设计师有共同的视觉经验库，但AI没有。你让它“简约”，它可能给你一个全白背景加细线条，也可能给你一个大量留白但信息层级混乱的布局。问题在于“简约”是一个结果描述，不是一个过程约束。

我试过很多次，发现有效的做法是把“感觉词”翻译成“约束条件”。比如“高级感”这个词，拆开来看通常意味着：低饱和度的配色（饱和度控制在20%以下）、大量的负空间（内容区域不超过视口的60%）、克制的字体层级（最多3种字号）、以及精细的细节处理（1px的边框、微妙的阴影）。这些才是AI能执行的东西。

2.2 把抽象需求拆成四类硬约束

我的做法是建立一个“需求翻译表”，把客户或自己说的感觉词，映射到四个维度的硬约束上：

这张表不是绝对的，但它给了我一个起点。每次做新页面，我先花10分钟填这张表，把“我想要的感觉”变成具体的数值范围。然后给AI的指令就变成了：“背景色用#F7F5F2，主文字色用#2D2A26，强调色用#C4704B但只用在按钮上，内容区最大宽度720px，字号只用16px和24px两档。”这种指令AI执行起来准确率极高，因为它没有歧义。

2.3 一个真实的需求翻译案例

之前帮一个做手冲咖啡器具的朋友做产品页。他的原话是“要看起来像日本匠人做的东西，但不要太老气”。这句话直接扔给AI，出来的东西要么是枯山水风格的极简（太老气），要么是ins风的浅色木纹（太网红）。

我把它翻译了一下：“日本匠人”对应的是：低饱和的暖灰调、大量留白、细线条、不对称布局；“不要太老气”对应的是：字号不要太小（正文至少16px）、行高要够（1.8以上）、加入一个现代感的无衬线字体做标题。最终给AI的约束是：背景#F2EFE9，文字#3A3632，强调色#8B6F4E只用在价格和按钮，内容区680px居中，标题用24px的现代无衬线，正文用16px的衬线，行高1.9，图片全部加1px的#D9D3C9边框。

出来的第一版就基本对了。后面只调了两轮：把按钮的圆角从8px改成2px（更硬朗），把图片的边框去掉换成微阴影（更现代）。如果没有前面的翻译，我可能要跟AI来回十几轮才能摸到方向。

注意：需求翻译这一步不要省。省下来的时间会在后面反复修改中加倍还回去。我自己的经验是，翻译花10分钟，后面至少省1小时。

3. Skill 2：调性锚定——用参考系代替形容词

3.1 为什么“给我看几个方向”比“给我最好的”更有效

AI有一个特性：你让它生成一个方案，它会给你一个“平均解”——所有训练数据里最常见的组合。但设计要的是“特解”，是在特定约束下的最优解。所以我的做法是，永远不让AI直接给最终方案，而是让它先给3到5个不同方向的“调性锚点”。

具体操作是：在需求翻译完成后，我给AI这样的指令：“基于以上约束，给我5个不同的视觉调性方向，每个方向用一句话描述，并给出主色、辅色、背景色、标题字体风格、图片处理方式这5个参数。”这样我拿到的是5个可比较的选项，而不是一个需要反复修改的半成品。

3.2 调性锚点的五个参数

为什么是这5个参数？因为它们决定了页面80%的视觉感受。主色决定情绪基调，辅色决定层次，背景色决定空间感，标题字体决定性格，图片处理决定质感。这5个定下来，剩下的都是细节。

我拿一个实际项目举例。做一个面向独立开发者的工具产品页，需求翻译后的约束是：专业但不冷冰、有技术感但不极客、简洁但不简陋。AI给了5个方向：

方向A：深蓝主色（#1E3A5F）+ 浅灰辅色 + 白色背景 + 几何无衬线标题 + 截图带设备边框 方向B：墨绿主色（#2D4A3E）+ 米白辅色 + 暖灰背景 + 人文无衬线标题 + 截图无边框直接融入 方向C：黑色主色 + 橙色辅色 + 深灰背景 + 等宽字体标题 + 截图带代码编辑器风格 方向D：紫色主色（#5B4A8A）+ 浅紫辅色 + 白色背景 + 圆润无衬线标题 + 截图带渐变遮罩 方向E：蓝色主色（#2563EB）+ 灰色辅色 + 浅蓝背景 + 标准无衬线标题 + 截图带阴影

我选了方向B。原因：墨绿+米白有“工具感”但不冷，暖灰背景比纯白更柔和，人文无衬线比几何无衬线更亲切，截图无边框融入背景让页面更整体。方向C太像代码编辑器，方向D太像消费级产品，方向A太企业，方向E太普通。

3.3 锚定之后不要轻易改

调性锚定最大的价值是“锁定”。一旦选定方向，后面所有细节都围绕这个方向做。我见过太多项目死在“改着改着就变了”——一开始选的是暖灰背景，做着做着觉得白色更干净，换了；然后觉得墨绿太闷，换成蓝色；最后整个页面失去了统一的调性，变成四不像。

我的做法是：把选定的5个参数写成一个“调性卡”，每次给AI下指令都带上这张卡。比如“基于调性卡：主色#2D4A3E、辅色#F5F0E8、背景#EDEAE4、标题用Inter、截图无边框，生成一个功能展示区块。”这样AI每次的输出都在同一个调性里，不会跑偏。

提示：调性卡一旦确定，除非有非常强的理由，否则不要改。改一个参数，整个页面的协调性就要重新调，成本极高。

4. Skill 3：结构先行——先画骨架再填肉

4.1 为什么不能让AI直接生成完整页面

很多人用AI做页面的方式是：“给我生成一个完整的落地页，包含导航、hero、功能、定价、footer。”AI确实能生成，但出来的东西结构是“平均结构”——导航一定是logo在左、链接在右、按钮在更右；hero一定是大标题居中、副标题在下、按钮在更下；功能一定是三列图标加文字。这种结构没错，但也没有任何记忆点。

我的做法是：先让AI生成结构骨架，但不生成具体内容。具体来说，我让AI输出一个“区块清单”，每个区块标注：区块类型、信息层级、视觉权重（1-5）、以及这个区块要解决的核心问题。然后我根据这个清单来调整顺序和权重，确认后再让AI填充具体内容。

4.2 区块清单的写法

区块清单不是简单的“导航、hero、功能、footer”，而是带有判断信息的结构描述。我拿一个SaaS产品页举例：

这张表的价值在于：它强迫我在生成之前就想清楚每个区块的“任务”。很多页面之所以乱，就是因为每个区块都在抢注意力，没有主次。有了视觉权重这一列，我就知道hero和功能展示是重点，其他区块要克制。

4.3 结构顺序的调整逻辑

区块清单出来后，我会做一轮顺序调整。调整的依据是“用户决策路径”：用户从哪来、第一眼看到什么、产生兴趣后想看什么、什么时候产生疑虑、什么时候决定行动。

比如上面这个清单，我可能会把“信任条”从hero后面移到“问题陈述”后面。因为用户刚看到hero时还没有产生疑虑，这时候放信任条有点早；等用户看完问题陈述、开始想“这东西靠谱吗”的时候，再放信任条，效果更好。这种调整AI不会主动做，因为它不知道用户的决策心理，只有人能判断。

调整完顺序后，我再让AI按这个结构生成具体内容。这时候AI的输出就有了骨架，不会跑偏。而且因为每个区块的任务已经定义清楚了，AI生成的内容也会更聚焦——它知道这个区块是要“让用户对号入座”，就不会写成泛泛的功能介绍。

5. Skill 4：细节校准——在AI生成后做“减法”和“微调”

5.1 AI生成内容的三个常见问题

即使前面的约束给得再好，AI生成的具体内容还是会有三个问题：过度装饰、层级模糊、节奏单一。

过度装饰是指AI喜欢加东西——加阴影、加渐变、加图标、加分割线。它觉得“丰富”就是“好”，但设计往往是“少即是多”。层级模糊是指AI分不清主次，标题和正文的字号差距不够，重要按钮和次要按钮的视觉权重差不多。节奏单一是指AI生成的区块高度都差不多，没有“疏密变化”，读起来像流水账。

5.2 做减法的具体操作

我的做法是拿到AI生成的内容后，先做一轮“减法检查”。具体检查这几项：

• 阴影：是不是每个卡片都有阴影？如果是，去掉一半，只保留需要突出的。
• 渐变：是不是每个按钮都有渐变？如果是，改成纯色，只保留一个重点按钮的渐变。
• 图标：是不是每个标题旁边都有图标？如果是，去掉一半，只保留功能展示区的。
• 分割线：是不是每个区块之间都有分割线？如果是，去掉，用留白代替。
• 颜色：是不是用了超过3种主色？如果是，砍到3种以内。

这轮减法做完，页面通常会“呼吸”很多。我自己的经验是，AI生成的页面减去30%的装饰元素，质感会提升一个档次。

5.3 层级校准的数值方法

层级模糊这个问题，我用量化的方法来校准。具体是检查三个比值：

• 标题与正文的字号比：至少2:1。比如正文16px，标题至少32px。如果AI给的是24px，改大。
• 主按钮与次按钮的对比度比：主按钮的填充色与背景的对比度至少4.5:1，次按钮可以是边框或浅填充。如果两个按钮看起来差不多重，改。
• 区块间距与区块内间距的比：至少2:1。比如区块内元素间距16px，区块之间至少32px。如果AI给的都是24px，改。

这三个比值是我从大量页面里总结出来的，不一定绝对，但作为一个校准起点非常有效。AI不知道这些比值，它只是按概率生成，所以需要人来校准。

5.4 节奏调整：制造“呼吸感”

节奏单一的问题，我的做法是手动调整区块高度。具体来说，不要让所有区块都一样高。Hero可以很高（占满一屏），功能展示可以中等（占2/3屏），信任条可以很矮（占1/5屏）。这种高低变化会让页面有“节奏感”，读起来不累。

我通常会画一个简单的“高度曲线”：Hero最高，然后降下来，功能展示再起来，信任条降下去，定价再起来，FAQ降下去。像波浪一样。AI生成的页面往往是平的，需要人手动调成波浪。

注意：减法做完后，一定要在真实设备上看一遍。我在电脑上觉得刚好的留白，在手机上可能太大；我在电脑上觉得刚好的字号，在手机上可能太小。这一步不能省。

6. Skill 5：一致性巡检——用清单代替感觉

6.1 为什么“感觉不对”往往是因为不一致

页面做到最后，经常会有一种“说不上哪里不对但就是不对”的感觉。大多数时候，这个问题不是某个元素丑，而是元素之间不一致。比如标题用了圆角按钮但正文用了直角卡片，比如导航的字重是600但footer的字重是400，比如图片的圆角是8px但按钮的圆角是4px。这些细微的不一致单独看都不是问题，但放在一起就会让页面显得“不专业”。

AI生成内容时，因为它是一次生成一个区块，很容易在不同区块之间产生不一致。所以最后一步巡检非常关键。

6.2 一致性巡检清单

我做了一张巡检清单，每次页面完成后逐项检查：

这张清单看起来简单，但每次都能查出问题。我印象最深的一次是，页面做完觉得挺好，巡检时发现导航的按钮圆角是6px，hero的按钮圆角是8px，定价的按钮圆角是4px。三个按钮三种圆角，肉眼几乎看不出来，但就是这种细微的不一致让页面“差一口气”。统一成8px后，整个页面立刻“整”了。

6.3 用AI做巡检的指令写法

巡检也可以让AI辅助。我的做法是把页面截图给AI，然后问：“检查这个页面中所有按钮的圆角是否一致、所有卡片的阴影是否一致、所有标题的字重是否一致。”AI的视觉识别能力现在足够做这种基础检查，它能标出不一致的地方，我再手动确认和修改。

但要注意，AI的巡检只能查“硬一致性”（数值是否相同），查不了“软一致性”（风格是否协调）。比如一个页面用了三种不同的无衬线字体，AI可能觉得都是无衬线所以没问题，但人眼能看出它们的气质不搭。所以AI巡检是辅助，最终判断还是靠人。

7. Skill 6：交付前“换眼”——用陌生视角做最终判断

7.1 为什么自己看自己的页面会“瞎”

做页面的人有一个天然劣势：看太多次了。看到最后，你已经不记得第一眼看到这个页面是什么感觉了。你知道每个元素为什么在那里，所以你看不到“一个陌生人打开这个页面会怎么想”。这个问题不解决，页面就永远差最后一步。

我的做法是“换眼”——用三种陌生视角重新看一遍页面。

7.2 三种换眼方法

第一种是“缩小看”。把页面缩小到25%，看整体轮廓。这时候细节都看不清了，只能看到大块的色彩和明暗分布。如果缩小后页面看起来是“花”的，说明色彩太杂；如果是“平”的，说明层级不够；如果是“散”的，说明对齐有问题。这个方法特别适合检查页面的整体感。

第二种是“眯眼看”。眯起眼睛看页面，模拟视力模糊的状态。这时候能看清的是对比最强的部分。如果眯眼后第一个看到的是广告或无关元素，说明视觉权重分配错了；如果第一个看到的是核心价值主张，说明层级对了。

第三种是“隔夜看”。做完页面后不急着交付，放一晚上，第二天早上第一件事打开看。这时候大脑是“新鲜”的，第一反应最真实。我很多次都是隔夜看的时候发现问题的——昨天觉得挺好的hero，今天早上看觉得标题太小了；昨天觉得刚好的留白，今天早上看觉得太挤了。

7.3 交付前的最后三个问题

换眼之后，我会问自己三个问题：

第一个问题：如果我只给这个页面3秒钟，我能记住什么？如果什么都记不住，说明没有记忆点，需要加强某个元素的视觉权重。

第二个问题：如果我是目标用户，这个页面让我想做什么？如果不想做任何事，说明行动召唤不够强，或者信任建立不够。

第三个问题：这个页面有没有任何一个元素是“可以去掉但不影响理解”的？如果有，去掉它。这个问题我每次都能去掉至少一个元素，而去掉之后页面总是更好。

这三个问题问完，页面基本就可以交付了。我自己的经验是，从Skill 1到Skill 6走完一遍，一个落地页从零到交付大概需要3到4小时，其中AI生成占1小时，人的判断和调整占2到3小时。这个比例是合理的——AI负责“生成”，人负责“判断”，两者配合才能做出有审美的页面。

提示：不要追求一次完美。我做了这么多页面，没有一个是第一版就完美的。走完6个skill，做到“没有明显问题”，就已经超过80%的AI生成页面了。剩下的20%，靠的是反复迭代和真实用户反馈。

最后分享一个我自己的习惯：每次做完一个页面，我会把“调性卡”和“巡检清单”存档。下次做类似调性的页面时，直接调出来用，省掉Skill 1和Skill 2的大部分工作。积累多了之后，你会发现自己的“调性库”越来越丰富，做页面的速度也越来越快。这大概就是“让AI有审美”的最终形态——不是AI有了审美，而是你通过一套可复用的流程，把审美变成了可执行的指令。