生 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 章。