执行免费了，判断力开始涨价
AI 把执行门槛打掉了：人人都能十分钟做出一个能用的页面、一张能看的图。这一章不教你画图，教两件练了就会的事：看出哪里不对，说清要什么。
过去「会做」就值钱：会写代码、会用设计软件、会剪视频，掌握工具本身就是门槛。现在这道门槛被 AI 铲平了，能用的东西满地都是，稀缺的变成了做得对、有品味：十个方案摆在面前，挑出对的那个，说清差在哪、该怎么改。
| 维度 | AI 之前 | AI 之后 |
|---|---|---|
| 门槛 | 会用工具、懂技术栈，学习成本以年计 | 会说人话就能开工 |
| 耗时 | 一个能上线的页面，以天或周计 | 十分钟出第一版，一小时出三版 |
| 拉开差距的东西 | 执行力：谁能把东西做出来 | 判断力：谁能看出哪版对、说清要什么 |
同一句需求「给一家瑜伽工作室做个预约页」，AI 给了三个方案。先别管理论，凭直觉点一个你觉得最好的。本页不判对错，这一票会存下来，学完本章最后一节请你再投一次，两票对照，你能看见自己眼力的变化。
把「做出一个能用的东西」的耗时从 72 小时拖到 0.2 小时，看两个指数怎么此消彼长。耗时塌下去，「能用」跟着贬值；能用的东西一多，挑出对的那个的溢价就抬起来了。
聊到这里总会撞上一句反驳：品味是天赋，各花入各眼，这怎么教？米莱和萨诺（Kevin Mullet 与 Darrell Sano）在《设计视觉界面》里把这团乱麻拆开了。艺术是艺术家表达自我的方式，约束越少越好，作品越独特越值钱；设计给特定人群做有特定用途的东西，头号任务是清晰沟通。
米莱和萨诺，《设计视觉界面》
这句话是全章的地基。评价一件艺术品，问的是「它表达了什么」，没有标准答案，吵到天亮也分不出高下。评价一个设计，问的是「信息传到目标人群了没有」，这可以验证。
Cooper 在《About Face 4》里把这条路线叫目标导向，还补了一句：视觉传达难免掺主观判断，但把体验目标和商业目标说清楚之后，品味差异可以被努力缩小。美学没有被赶出场，只是被装进了目标的框架里。
| 维度 | 艺术 | 设计 |
|---|---|---|
| 回答的问题 | 我想表达什么 | 信息传到目标人群了没有 |
| 约束 | 越少越好，独特是加分项 | 用户、场景、目标全是给定条件 |
| 评价方式 | 各花入各眼，争不出结果 | 对照目标逐条验证，能分高下 |
| 对品味的含义 | 确实接近天赋，教不了 | 判断有裁判，练了就会 |
这张海报挂进美术馆，怎么做都成立，它只对创作者负责。现在它的身份换成下周演出的预告，第一个要回答的问题变成哪个？
光有理论没体感，现场做个实验。三张演出海报，两位评审：设计师小周和主办方老陈。先看没有目标时两人怎么吵，再把目标写上桌，看结论怎么自己浮出来。
执行门槛塌了：十分钟人人都能做出能用的东西，「能用」在贬值。
稀缺的换了位置：从「会做」换到「做得对、有品味」，从一堆方案里挑出对的那个，成了人的核心工作。
审美判断有裁判：艺术管表达，设计管沟通（米莱和萨诺）。目标一明确，品味分歧就收窄成能验证的问题，这是「审美可训练」的理论地基。
本章练两件事：看出哪里不对（第 3~6 节），说清要什么（第 7~9 节）。今天这一票已经存好，学完最后一节回来对答案。
内容来源：小山学堂「审美工程」专题原创；部分设计原则整理自《About Face 4：交互设计精髓》第 17 章。
「AI 味儿」是怎么来的
让 AI 随便生成一个页面，十有八九是紫色渐变、毛玻璃、居中大标题三件套。这种整齐划一有数学上的原因，看懂了它，你就知道怎么绕开它。
下面是一张典型的 AI 生成 landing page。它藏着 5 个高频出现的「AI 味」特征，在页面上把它们逐个点出来。每点中一个，会告诉你这个特征为什么成了 AI 的默认动作。
受到全球 10,000+ 团队的信赖
「AI 味」有更早的学名。Cooper 在《About Face 4》第 17 章里管这类东西叫视觉噪音：多余的视觉元素，把注意力从真正传达信息的对象上拽走。他还列了一份七种形式的清单。下面这块「团队周报后台」七种全占，对照体检单逐项确诊。
七种噪音里，「颜色太多」有个专门的名字。《About Face 4》的说法：颜色像调色板一样拥挤在一起，会让用户不堪重负，这叫嘉年华效应；饱和度再拉满，喧闹感加倍，直接和内容抢戏。同一个周末市集的宣传页，两种配色，点你觉得更能让人看进去的那边。
AI 生成设计时，挑的是训练数据里的高概率区域，也就是全网设计的「平均值」。这和语言幻觉是同一个机制：接话的时候，顺的赢过对的；生成设计的时候，常见的赢过好的。它交出紫渐变三件套，正如它一本正经地编出一个不存在的书名：都是在挑「最像会出现在这里」的答案。
好消息是，这个机制留了一扇门：概率分布是随输入变化的。你的描述越具体，模型可选的区域就越窄，窄到一定程度，它就被你拉出了平均值。
同一个需求，三种具体度的说法，看产出怎么变。
AI 味有出处：模型默认输出训练数据的高概率区域，也就是全网设计的平均值，紫渐变三件套是这片区域的门面。
视觉噪音有病理清单：过分装饰、无信息量的 3D、过重分隔、元素拥挤、颜色纹理对比过密、颜色太多、层级无力，七项出自《About Face 4》；颜色挤成调色板还有个学名，嘉年华效应。
机制和幻觉同源：接话时顺的赢过对的，生成设计时常见的赢过好的。没给指令的地方，它一律用最常见的答案填。
解法是拧高具体度：参照物加上可验收的硬约束（一个主色、禁止渐变），每加一档，产出离默认味远一步。下次让 AI 生成页面前，先把这五个特征列进禁用清单。
内容来源：小山学堂「审美工程」专题原创；部分设计原则整理自《About Face 4：交互设计精髓》第 17 章。
层级：一屏只有一个主角
打开一个页面，视线总得先落在某一处。设计者不安排这个落点，读者的眼睛就会自己乱撞。这一节讲层级：怎么用字号、字重、颜色三根杠杆，把「先看哪」安排明白。
注意力是稀缺资源，界面上每个元素都在抢。加粗、标红、放大，单独看每一下都有道理，叠在一起就互相抵消：五个主角同台，观众谁都记不住。层级的做法反过来，先选出一个主角，再让其余角色按重要程度递减。手里的杠杆就三根：
| 杠杆 | 怎么用 | 常见翻车 |
|---|---|---|
| 字号 | 主角比配角大一到两档就够，档位拉开、数量克制 | 三个元素都用最大号，大字互相打架 |
| 字重 | 正文 400、强调 700，两档打天下 | 满屏加粗，粗就失去了「更重要」的含义 |
| 颜色 | 强调色只给一个动作或一个数字 | 标红三处，读者不知道哪个红才是真警报 |
《About Face 4：交互设计精髓》第 17 章讲视觉层级，开头就把用户看界面的第一反应拆成两个下意识的问题：「这里什么重要」，紧接着「这些东西有什么关联」。Cooper 的结论：界面要靠建立层级和关系来回答这两个问题。层级答得好，用户几乎不会留意到它的存在；答得糟，混乱立刻跳出来。
这两个问题就是本节的验收口诀。下面每个案例，你都可以先自问一遍：主角三秒内找得到吗？哪些元素一眼能看出是一伙的？
下面是一张商品卡，三根杠杆都交给你：主标题字号、次要信息颜色、强调色数量。拉动它们，观察卡片的「主角」怎么变。
新手立层级爱走加法：主角不够醒目？加大、加粗、上底色。Cooper 给的建议正好相反：两个元素抢注意力时，调低次要的那个，胜过调高重要的那个。调低给主角腾出了空间；调高只会掀起军备竞赛，这一版标题加大，下一版按钮跟着加大。原书的比方：满屏每个字都是红色粗体时，哪个字凸显得出来？
层级要靠视觉变量传出来，但变量分两种脾气。《About Face 4》沿用 Bertin《图形符号学》的分析：大小和色值（明度）是有序变量，人眼会自动把「更大」「更深」读成「更重要」；色调（红、蓝、绿）没有天然顺序，读者排不出红和蓝谁先谁后，还会往颜色里猜含义。传层级，优先用有顺序的那两根杠杆。
检验层级有个零成本的办法，图形设计师叫它眯眼测试：眯起眼看屏幕，细节糊掉之后，看哪些元素还突出、哪些自动缩成一组。《About Face 4》把它列为检查层级和关系的常规手段，换个角度看，总能发现之前没发现的布局问题。下面两块界面，按住按钮模拟眯眼，自己比一比。
一屏只有一个主角。读者扫一眼就在问「什么重要」「什么相关」，先选出主角，其余按关系递减，两个问题才有答案。
三根杠杆各拉一档就够：字号大一到两档、字重两档、强调色一处。传层级优先用大小和明度这两个有顺序的变量，色调留给分类。
想强调，先做减法。调低配角比调高主角管用；砍戏份从离核心决策最远的元素下手。
交付前眯一次眼。模糊之后还分得出主次，层级才算立住；分不出，回去重拉杠杆。
内容来源：小山学堂「审美工程」专题原创；部分设计原则整理自《About Face 4：交互设计精髓》第 17 章（Alan Cooper 等著）。
留白与对齐：大多数丑都丑在间距
「说不上哪里丑，反正就是丑」，这句评价八成在说间距。颜色字体一处没动，只把间距捋顺，界面就能上一个档次。这一节给你两条规律和一张现成的数字表。
间距只有两条规律。亲密性：相关的元素靠近，无关的离远，读者靠距离判断「哪些是一伙的」。一致性：同层级用同间距，卡片和卡片之间是 16，就处处是 16。剩下的问题是「具体填几」，答案是 8pt 网格：间距只从 8、16、24、32 里挑。不必纠结 13 还是 15，选项少了，一致性反而自动达成。这套网格也是给 AI 下指令的好词汇：跟它说「间距全走 8pt 网格」，比说「好看一点」有效得多。
同一张注册表单，内容一个字不改，只动间距。拖动滑块，从 4px 拉到 32px，感受「挤成一团」到「呼吸感」的过程。
亲密性在《About Face 4》里有一笔算得清清楚楚的像素账：工具栏里同组图标相距 4px，组和组之间留 8px，分组就成立了，一条边框都不用画。Cooper 顺带点名了反面做法：很多界面入目之处边框充斥，有时一两个元素也围上一圈。这是笨拙的分组方式，还制造视觉噪音。同一条工具栏，两种分法，自己切换感受。
8pt 网格听着像行业黑话，出处其实很朴素。《About Face 4》讲网格系统时给了一个概念：原子网格单位，界面里的最小间距。精心设计的网格里，元素和组之间的距离都取原子的整数倍。定了原子是 8，页面上的间距就只会是 8、16、24、32。间距彼此成倍数，眼睛就能读出秩序，这正是上一个滑块里呼吸感的骨架。
| 网格换来什么 | 怎么换来的 |
|---|---|
| 可用性 | 元素位置变得可预期，读者不用每屏重新找一遍标题和按钮在哪 |
| 美感 | 间距互为倍数产生秩序感，说不出好在哪，但看得出有人管过 |
| 效率 | 「这里空多少」不再逐处争论，间距决策从几十次减到一次 |
这三条好处来自《About Face 4》对网格系统的总结。给 AI 下指令时同理：先说定原子（间距全走 8 的倍数），它就少了几十次自由发挥的机会。
下面的设置页乍看还行，细看有三处没对齐。觉得哪里别扭就点哪里，点中会亮出来并解释。
卡片和分栏定什么比例？《About Face 4》先给了两个久经验证的候选：黄金比（约 1.61）和 √2（约 1.41，A4 纸的比例）。但它更强调另一条：比例必须干脆。差不多是个正方形，不行；几乎是黄金矩形，也不行。要么精确到位，要么明显拉开，卡在中间的比例会让读者隐隐觉得不稳，还说不出为什么。
眼睛读屏有惯性：从左上走到右下。《About Face 4》管顺应这个惯性的布局叫逻辑路径：让视线从标题走到内容再走到按钮，一路不回头。它还补了一条容易被误会的原则：完美对称的布局反而缺层次，平衡的不对称才能给屏幕一个视觉入口。下面的注册页，两种铺法。
说不上哪里丑，先查间距。亲密性管分组（相关的靠近），一致性管秩序（同层级同间距）。
分组先用间距：组内 4px、组间 8px 就能分清，一条边框不用画。边框留给非围不可的场合。
8pt 网格的底层是原子单位：定一个最小间距，处处取它的倍数，一致性自动达成。这个词也能直接写进给 AI 的指令里。
比例要干脆：1:1、√2、黄金比都行，差不多正方形最伤。差异要么消除，要么明显拉开。
对齐是最便宜的高级感。交付前花两分钟：捋一遍左边缘、图标基线、按钮间距，再顺着左上到右下走一遍视线路径。
内容来源：小山学堂「审美工程」专题原创；部分设计原则整理自《About Face 4：交互设计精髓》第 17 章（Alan Cooper 等著）。
克制：给颜色和字体做预算
好看的界面大多不是加出来的，是省出来的。这一节给你一套预算表：一个主色加中性色、两种字重、一套圆角。超预算的东西再好看也砍。
预算制的规则很短：一个主色，其余交给黑白灰的中性色；两种字重，正文一档强调一档；一套圆角，定一个数处处沿用。想加第二种彩色时，先问自己一句「它值不值得动预算」，多数时候答案是省下来。
下面是一张克制版的活动页。连点五次「再加一种颜色」，看它一步步劣化；点满五次后，再一键做减法。
加色器演的是怎么变丑，减法游戏演怎么救回来。《About Face 4》给过一个可执行的办法：删减东西，直到删掉某件破坏了设计为止，再把最后删掉的那件加回来。下面这张促销卡堆了六件装饰，逐件点掉试试，哪件删了页面就破，你自然会知道。
克制还有一条更细的纪律，管的是「差不多」。《About Face 4》把话说得很重：不必要的差异是一致设计的大敌。两个间距几乎一样，就调成同一个数；两种颜色几乎一样，就用同一个。每处差异的存在都要有理由，找不出理由，就消除它。下面这张卡藏着三处「差不多」，切换看收编前后。
颜色预算管的是「几种」，饱和度管的是「多响」。《About Face 4》提醒过：高饱和的颜色个个都在喊，凑在一起就是嘉年华效应，用户会被吵得不堪重负。同样三个标签，把饱和度当音量键推推看。
这回把三笔预算做成开关，任意组合，右下角的徽标实时告诉你超没超支。
预算制三条：一个主色加中性色、两种字重、一套圆角。想突破预算，先问值不值。
每多一种颜色，已有的颜色都在贬值。做减法比做加法更常出效果，删颜色是性价比最高的一步。
觉得页面廉价，按顺序查：先数彩色有几种，再数字重有几档，最后看圆角统不统一。
两条可执行的纪律：差不多一样就做成一模一样；拿不准要不要留，就删到破坏为止，再把最后删掉的那件加回来。
内容来源：小山学堂「审美工程」专题原创；「不必要的差异是大敌」「删减到破坏为止」等设计原则整理自《About Face 4：交互设计精髓》第 17 章（Alan Cooper 等）。
一致性：系统感从哪来
有一种界面，单看每处都还行，合起来却透着一股散装味。它缺的说到底就一样东西：一套大家共同遵守的变量。这一节讲 design token，变量先行，样式跟随。
散装感的来路很具体：这个按钮高 36，那个高 40；这张卡圆角 8，那张 16；这里的玫红深一点，那里浅一点。每处都是当时随手写的，单看都说得过去，拼起来就露馅。解法是把这些「随手写」收编成变量：先定 token（主色、圆角、控件高度、间距档位），所有样式从 token 取值。写样式的人少做决定，界面自然长得像一家人。
一致性听着像洁癖，其实买的是真金白银的东西。《About Face 4》引尼尔森的账：统一的界面标准靠可预见性提高产出、减少错误，用户在一个地方学会的规律，换个页面还管用，学习成本和培训费用都在降。苹果和微软都乐于让第三方应用长得像自家系统，图的就是用户到哪都不用重新学。
| 一致，用户赚到什么 | 不一致，用户赔上什么 |
|---|---|
| 按钮长这样、行为就那样，闭着眼预判 | 每个新页面都要重新试探一遍 |
| 学一次，全站通用 | 「上一页明明是点右上角保存的」 |
| 界面退到背景，注意力全给内容 | 差异不断把注意力拽向界面本身 |
同一本书也把丑话说在前头：标准管的是外观和感觉这层语法，管不了更深的逻辑，把标准当灵丹妙药，和以为有了格式手册就能写出好小说一样不可取。所以这一节教的是给界面立变量，不是给创造力上锁。
这不是课堂虚构。本站课程列表页 learn.html 的源码里就躺着这样两行变量，原注释一并抄给你：
你正在看的这个网站，顶栏那五个按钮就是被这两个变量管着的：谁也不许自带尺寸，统一读 36px 高、10px 圆角。哪天想全站换风格，改这两行就够了。
注意刚才发生了什么：你只改了一个变量，按钮、卡片、输入框、头像框、弹窗一起变。风格是变量的取值，系统感是变量的存在。取值可以争论，变量必须先有。
token 立好之后，剩下的功夫是揪漂移。下面这页设置乍看挺正常，其实藏着五处不一致，AI 生成的界面里这五类漂移天天见。找到就点它。
《About Face 4》把一致性的裁判标准说成两句话：任何元素的存在要有足够的理由，任何差异的存在也要有足够的理由。删除按钮比别的按钮红，理由充分：行为不同的元素，就该在视觉上明显区分，长得一样却干不一样的事才坑人。反过来，同一层级的两张卡圆角一个 8 一个 16，谁也说不出为什么，那就是该收编的漂移。这本书还给了个顺手的杠杆思路：与其加新元素，不如让一个元素多干几件事，元素越少，一致性越容易守住。
这一节学的东西最后要变成一段话，放在你让 AI 写界面的 Prompt 最前面。下面这张变量表拿去就能用，取值按自己产品改，关键是让每个决定都有出处，AI 就没机会替你随手写。
这张表管的是「从今天起新写的界面」。要是项目已经跑了一阵、样式早就各写各的，光给变量表不够，得先把散落的实现收回来——那是一台手术，步骤在 Vibe Coding · 样式收敛：一个按钮不要八套 CSS：怎么盘点欠债、怎么分批合并、哪些差异该留着。
系统感来自共同变量：先定 token（主色、圆角、控件高度），样式从 token 取值，散装感自然消失。
检查一致性最快的办法：把两屏截图并排放，盯着按钮、圆角、主色深浅，看有没有各自漂移。
让 AI 做界面时，先交变量表：把主色、圆角、控件高度写进 Prompt，再让它动手，产出的一致性立刻不同。
裁判标准两句话：任何元素的存在要有理由，任何差异的存在也要有理由。删除按钮的红留下，说不出理由的圆角收编。
内容来源：小山学堂「审美工程」专题原创；一致性与标准的价值、「差异要有理由」等原则整理自《About Face 4：交互设计精髓》第 17 章（Alan Cooper 等）。
「好看」的一百种具体说法
你对 AI 说「好看一点」，它只能猜；你说「信息密度加一档、视觉噪音降下来」，它立刻知道该动哪里。这一节给你十二个能直接用的审美词、一套拆解一切视觉差异的八变量，外加一台把抱怨翻译成术语的机器。
「好看一点」交出去，AI 只能猜：猜你要加渐变，猜你要换字体，猜你要堆动效。「信息密度加一档，视觉噪音降下来」交出去，AI 立刻知道该动哪里：多放两组数据，砍掉一半徽章。词汇是判断力的容器：装得下「视觉噪音」这个词，你才留得住「这页面哪里不对」的那个直觉。
单位面积里装了多少有效信息。密度低是在浪费读者的屏幕；密度高但没层级，才叫挤。
与信息无关的装饰量。徽章、角标、分割线、多余的颜色，都是噪音。
内容和边界、内容和内容之间的空隙。空隙也是设计，挤掉它，内容会打架。
谁最重要，谁最显眼。字号、字重、颜色三根杠杆，一次只捧一个主角。
元素抢注意力的能力，由大小、颜色深浅、实心程度决定。重的名额要留给主操作。
相关的靠近，无关的离远。距离本身就在传递分组信息。
文字和背景拉开多少差距。灰得优雅和灰得看不清，隔着一条可读性的线。
元素的边缘落在同几条隐形直线上。对齐是免费的秩序感。
一个颜色拆成三个旋钮：色调 H 管它是什么颜色，饱和度 S 管它有多鲜艳，色值 V 管它有多深。About Face 4 建议设计师把三个旋钮分开考虑，跟 AI 调色也一样，按旋钮说，别整体抱怨「颜色不好看」。
取值天生分大小的视觉属性。大小、色值、位置有序，适合表达层级、数量、顺序；色调、形状无序，只能管分类。出自 Bertin《图形符号学》，About Face 4 沿用了这套判断。
元素外观发出的「怎么操作我」信号。凸起、阴影、纹理都在说能点能拖；信号乱发，读者就会去点点不动的东西。About Face 4 提到纹理很少用来做对比，本职就是当能供性信号。
眯起一只眼看屏幕：谁还跳得出来，谁糊成一团，谁自动聚成一组。About Face 4 推荐的层级体检法，五秒钟做完，交稿前做一遍。
上面的词管「怎么评」，下面这套变量管「怎么改」。Bertin 在《图形符号学》里把视觉编码拆成八个变量，About Face 4 沿用了这套清单：形状、大小、色值、色调、饱和度、方向、纹理、位置。界面上一切「看起来不一样」，拆到底就是这八个旋钮。同一排色块，动哪个变量，讲出来的故事就不一样。
仪表盘要展示五档风险，从低到高一眼排得出来。该动哪个变量？
About Face 4 里有条压舱原则：表明「是什么」用视觉属性，明确「是哪一个」用文字。图标说到「这是份文档」就到头了，哪份是合同，得靠文件名接着说。两样各干各的活，谁也替不了谁。
客户和老板说不出术语，但他们的抱怨句句有所指。听懂抱怨背后的变量，改起来才有方向。先练四句最常听到的。
八个词整理成了给 AI 用的句式，每句都能直接贴进 Prompt。复制一份存起来，下次改界面照着挑。
老板拿着你的页面说：「没有高级感」。按这一节的思路，先检查哪个？
「好看」是许愿，术语是指令：说得出「信息密度」「视觉噪音」，AI 才知道往哪改。
抱怨都能翻译成变量：「太乱」是视觉噪音超标，「显得廉价」是配色超预算，翻译出来才改得对。
八个变量各有分工：层级和数量找有序变量（大小、色值），分类才用色调，形状管「是什么」，纹理管「能不能按」。
下次让 AI 改界面，先从速查表挑一个词写进 Prompt，跟「好看一点」的产出对比一次，感受差距。
内容来源：小山学堂「审美工程」专题原创；部分设计原则整理自《About Face 4：交互设计精髓》第 17 章。
生 UI：从形容词到规格书
给 AI 提 UI 需求，形容词是许愿，规格是指令。同一个落地页需求，三档提示词能差出三个档次的产出；这一节教你把「好看」写成一份 AI 没法跑偏的规格书。
「做个好看的落地页」交出去，AI 会还你一个紫色渐变、居中堆料的大路货。这口锅 AI 只背一半：它没拿到信息，只能输出训练数据的平均值。Prompt 工程篇讲过「信息给一分，它答一分」，生 UI 是这条规律最直观的展台。主色写死、间距锁网格、字重限两级、禁止项列清单，产出立刻换一个档次。
规格书里最容易漏的是文字本身。界面十有八九是字，字出问题，配色再对也白搭。好消息是排印早就有现成的硬指标，About Face 4 第 17 章直接给了数：对比度、字体、大小写、字号，四条全能翻译成提示词。
还有米莱和萨诺那句判词，About Face 4 原样收进了教材：不必要的差异是一致设计的大敌。差不多一样的东西，就做成一样。写进提示词，它就是最值钱的禁止项。
左边是你嘴里的人话，右边是 AI 需要的规格。点一行翻译一行，翻完整段复制走。
规格书不用背，六个条款各挑一块就拼出来了。哪组选「不提」，哪部分就交回给 AI 赌运气，预览里看得一清二楚。
哪句约束对 AI 生成 UI 的效果提升最大？
| 条款类型 | 作用 | 模板话术 |
|---|---|---|
| 正向规格 | 把能量化的都定死，AI 没得猜 | 「主色 #DB2777，间距走 8pt 网格，圆角统一 12px，字重只用 800 和 600」 |
| 负向约束 | 把 AI 最爱跑偏的路提前堵死 | 「禁止渐变、禁止 emoji 图标、禁止超过一种阴影」 |
| 参考锚点 | 用双方都见过的产品当坐标 | 「信息密度参考 Linear，留白参考 Notion」；别说「大厂风格」，没有指向等于没说 |
| 统一性条款 | 把「差不多一样」提前统成一样 | 「差不多一样的元素做成一样：全站只允许一个主色、一套圆角、一种阴影，没有理由的差异一律删掉」 |
第四类就是米莱和萨诺那条「不必要的差异是一致设计的大敌」的提示词版。AI 特别爱在细节上加戏：这里 10px 圆角、那里 12px，两种灰、三种阴影。统一性条款把加戏的口子提前封死。
形容词是许愿，规格是指令：主色、间距、字重、禁止项，写成能逐条验证的条款。
负向约束性价比最高：「禁止渐变、禁止 emoji 图标、阴影不超过一种」，三句话砍掉大半 AI 味。
排印有硬数字可抄：对比 80%、正文无衬线、英文禁全大写、字号 10px 起，写进提示词就是四行验收标准。
下次生 UI，用积木机拼一段规格书发给 AI，跟上一次的「随口一句」对比产出。
内容来源：小山学堂「审美工程」专题原创；部分设计原则整理自《About Face 4：交互设计精髓》第 17 章。
生图：构图、光影、色彩的语言
生图和生 UI 同一个道理：词汇量决定产出。构图、光影、色彩三件套，每样记三个词；先用三组真图练眼力，再拼一段能直接用的生图提示词。
你说「一张好看的咖啡海报」，AI 给你训练数据的平均值；你说「三分法构图、黄金时刻侧逆光、低饱和莫兰迪色调」，AI 立刻有了施工图。摄影师练了一百年的语言现成摆在那里，拿来就能用。审美三件套：构图管主体站位，光影管立体感，色彩管情绪。每样记住三个词，够用了。下面的练习都做成两张并排，这是信息设计师 Tufte 的老办法：对比产生情境，好坏摆在一起才看得出来。
信息设计的老前辈 Edward Tufte 在《The Visual Display of Quantitative Information》里留了七条原则，About Face 4 第 17 章把它们搬进了界面设计。其中两条正好解释这一页的玩法。
第一条，加强视觉对比，对比产生情境。单独看一张灯塔照，你说不准构图好坏；两张并排，三分法和死板居中立刻分出高下。前面三局你答得那么快，靠的就是对比把差异放大了。这也解释了为什么好构图和好光影总是「一眼能看出来」：眼睛天生是台对比机器，缺的只是并排的机会。
第二条，在相邻空间上并排显示，优于按时间堆积。一张张翻着看，比较靠短时记忆，翻到第四张，第一张长什么样已经记不清了；并排摆开，比较靠眼睛。所以让 AI 出候选图，别看一张删一张，攒齐了并排看。
不信并排更快？拿前三局的六张图试一场。任务：把「黄金时刻侧逆光」那张找出来。先用轮播翻着找，再切并排看一遍，感受两种看法的差距。
三局练完，上真实工作场景：你让 AI 给咖啡品牌出了四张海报候选，客户明天要。用刚学的三件套挑一张交稿。注意这里的姿势：四张并排摆开再挑，用的就是 Tufte 那招相邻空间对比。
三件套各挑一块，拼出来的就是能直接发给生图模型的提示词。主体描述换成你自己的场景就能用。
审美三件套指挥生图：构图管站位，光影管立体感，色彩管情绪，每样记三个词。
挑图和生图吃同一套词汇：说得出「三分法」「侧逆光」「低饱和」，四选一就有依据，交稿不靠运气。
候选图要并排看：对比产生情境，相邻空间摆开优于一张张翻，Tufte 这两条原则就是本页方法论的底座。
下次生图把构图、光影、色彩三行写全再发；出图不对时，按这三行逐项排查是哪行没说清。
内容来源：小山学堂「审美工程」专题原创；本页示意图由 GPT Image 2 生成；部分设计原则整理自《About Face 4：交互设计精髓》第 17 章。
怎么看设计才算看进去了
收藏夹在膨胀，眼力没长进，问题出在看的方式。这一节给一套固定的拆解顺序，把「真好看」翻译成能带走的变量，你的参考库从这里开始有复利。
收藏夹里躺着一百个「灵感网站」，真要动手的时候还是找不到方向，这种收藏等于没收藏。打开一个好设计，扫一眼说「真好看」，截图，关掉，这是游客行为：拍了照、发了圈，什么都没带走。
看进去要按固定顺序拆，每层只回答一个问题：先看层级（谁是主角），再量间距（padding 有没有规律），然后数颜色（几种、怎么分工），最后抠细节（圆角、阴影、字重各有几档）。顺序从大到小：先抓骨架，再抠皮肤。
这四步前面还有一个第 0 步：眯眼。睁大眼睛细看之前，先把整页糊成一团看一遍，主次和分组自己会浮出来。这一节把五步全部现场演一遍。
图形设计师有个老手艺叫眯眼测试：闭上一只眼，眯起另一只看屏幕。细节糊掉之后，剩下的只有块面、明暗和分组，这时候哪些元素还跳得出来、哪些看上去是一伙的，一眼就有答案。《About Face 4：交互设计精髓》第 17 章把它列为检验层级和关系的首选工具，还提到换个角度看，常能发现之前没注意到的布局问题。
眯眼在验的是什么？同一章给了答案：人看到一屏东西，下意识会连问两个问题，这里什么重要？这些东西有什么关联？好设计抢在你问出口之前就答完了。把这两问翻成白话，就是本节的拆解口诀。
眯眼答第一遍，睁眼验第二遍。答案一致，层级过硬；眯眼时找不到落点、分组糊成一片，睁眼看再精致也白搭。下面的透视镜里新加了眯眼视图，先切它。
下面这张落地页是用本章的规矩现做的：唯一主角、8pt 间距、一个主色。切换视图，看同一张页面在四层拆解里各自长什么样。
好设计的间距不靠手感，靠一把尺子。《About Face 4》第 17 章管这把尺子叫原子网格单位：先定一个最小间距，比如 8px，页面上元素和元素、组和组的距离一律取它的倍数。书里还给网格记了三笔账：位置有规律，用户找东西更快（可用性）；区域之间的比例关系妥帖，看着舒服（美感）；布局决策提前做完，改版省力（效率）。
反过来，这就成了鉴定好设计的硬指标：拿工具量三五个间距，看能不能除尽同一个数。除得尽，说明背地里有一套网格系统在管；除不尽，多半是手摆的。量间距这一步，量的就是这个。
下面这张习惯打卡 App 的周报卡按 8pt 网格现做。透视镜是看别人拆，这回你自己动手：先眯眼看主次，再亮标尺量间距，最后答一道题验收。
信息设计大师 Edward Tufte 给优秀视觉设计下过一个定义，《About Face 4》第 17 章原样转述了它：
顺着这个定义看，拆解这件事就说得通了：你找的主角、量的间距、数的颜色，都是设计者想清楚之后落在页面上的痕迹。拆一张好设计，等于把别人的思考过程倒放一遍，这比看十篇「配色技巧」长眼力。反过来，一张拆不出所以然的页面，多半当初就没想清楚。
把第 0 步补进清单，五步在这里。每步只回答一个问题，勾一个亮一个，回答不上来就停在那一步多看两眼。
看进去有固定顺序：第 0 步眯眼，然后层级、间距、颜色、细节。每层只回答一个问题，从骨架到皮肤。
眯眼答口诀两问：这个界面想让我先看什么？哪些东西被摆成了一伙？眯眼答一遍，睁眼验一遍。
间距拿尺子鉴定：量三五个间距，能除尽同一个数的，背地里有原子网格；除不尽的，多半是手摆的。
存参考图前先配一句判词：它好在哪个变量。收藏夹从图堆变成判例库，下一节就拿它去喂 AI。
内容来源：小山学堂「审美工程」专题原创；部分设计原则整理自《About Face 4：交互设计精髓》第 17 章（Alan Cooper 等著），Tufte 定位句转引自同章。
把参考喂给 AI
你能看出好在哪之后，下一步是让 AI 也知道。这一节讲三种把参考喂进对话的姿势：垫图、风格描述、设计变量，配拿来就用的话术模板。
「温馨一点、再高级一点」，这样的话说十句，九句会在模型那里变形。形容词要经过两次翻译：你把感觉压缩成词，模型再把词展开成画面，两头都有损耗。把参考直接塞给 AI，损耗最小，一次到位。
喂参考有三种姿势，各管一段，对着表选：
| 喂法 | 给什么 | 适合场景 | 短板 |
|---|---|---|---|
| 垫图 | 一到三张参考图 | 整体气质、构图、风格迁移 | 容易连版式一起抄走 |
| 风格描述 | 一段规格文字：密度、主色、圆角 | 能用规则讲清楚的风格 | 讲不清的气质写不出来 |
| 设计变量 | token 清单：主色 / 圆角 / 字体 / 间距 | 让 AI 写 UI 代码 | 管得住样式，管不住布局与文案 |
风格描述不必从零开始编，它有现成的方法论。《About Face 4：交互设计精髓》第 17 章记录了 Cooper 公司的做法，叫体验属性：动手设计之前，先和客户一起挑出 3~5 个形容词，描述这个产品的气质和品牌承诺，比如「干净、克制、可信」。词一旦定下来，就成了后续所有视觉决策的裁判：方案拿不准，回头问这几个词答应不答应。
形容词之间还允许打架。书里说「安全」和「灵活」可以同时在场，这种张力值得保留：两个词冲突的地方，正是早期风格稿要优先回答的问题。
这套方法搬到喂 AI 上刚好严丝合缝：先用形容词把气质钉住，再把每个形容词翻译成具体规格。光给形容词，AI 会按平均值理解；翻译这一步做完，风格描述才算写好。翻译工作交给下面的工作台。
需求：给记账 App 做首页，气质定的是「干净、克制、可信」。A 版把三个词原样发给 AI；B 版先过一遍工作台，逐词翻译成规格再发。点你觉得更好的一版。
三种喂法各配一段现成话术。选喂法，复制，替换里面的占位内容就能发。风格描述那段，直接拿工作台的产出替换正文。
第三种喂法值得单独说一句。把参考图拆成 design token，主色、圆角、字体、间距各落成一个变量，你交出去的已经超出一份参考，那是一套界面标准。
标准为什么值钱？《About Face 4》第 17 章引尼尔森的账：统一的界面标准让用户学得更快、错得更少，因为在一处攒下的经验能预见另一处的行为；对开发团队，现成决策省掉一轮轮争论。这笔账搬到 AI 身上同样成立：token 清单一给，每次生成都落在同一套标准上，改十次稿也不会漂移，你验收时手里也有了对照物。
同一章也把丑话说在前头：遵守标准，除非有极好的其他选择。打破可以，理由要硬，这条对你和对 AI 一样适用。最后看一局对决，把这一节的账当场结掉。
需求：给烘焙工作室做品牌页。A 版的输入只有「温馨一点、高级一点」，B 版带了参考图和变量清单。点你觉得更好的一版。
形容词会变形，参考不会。把图、规格文字、变量清单直接塞进对话，损耗最小。
三种喂法各管一段：垫图管气质，风格描述管规则，设计变量管代码。组合用也行，先分清各自管什么。
风格描述有方法论：先挑 3 个形容词钉住气质（体验属性），再逐词翻译成规格。词是裁判，规格是执行。
token 清单是给 AI 立标准：标准值钱在可预见，每次生成都落在同一套变量上，改稿不漂移，验收有对照。
产出平庸先查输入。输入只有形容词，产出只能落在平均值上；换成参考和变量，同一个模型立刻换脸。
内容来源：小山学堂「审美工程」专题原创；部分设计原则整理自《About Face 4：交互设计精髓》第 17 章（Alan Cooper 等著），体验属性法与标准化论述出自同章。