1438 字
约 4 分钟
14
生 UI:从形容词到规格书
开场:形容词是许愿,规格是指令
「做个好看的落地页」交出去,AI 会还你一个紫色渐变、居中堆料的大路货。这口锅 AI 只背一半:它没拿到信息,只能输出训练数据的平均值。主色写死、间距锁网格、字重限两级、禁止项列清单,产出立刻换一个档次。
一句话速览:「做个好看的页面」和「参考 Linear 的信息密度、只用一个主色」差出一个档次。
一、同一个需求,三档提示词
| 档位 | 提示词 | 产出 |
|---|---|---|
| 档一 · 许愿 | 「做个好看的落地页」 | AI 默认味:紫色渐变、玻璃卡片、居中堆料、口号文案。像每一个 AI 生成的页面,就是不像你的产品 |
| 档二 · 贴标签 | 「做个现代简约风格的落地页」 | 仍偏平均值,标签不等于规格 |
| 档三 · 规格书 | 主色写死、间距锁网格、字重限两级、禁止项列清单 | 产出换一个档次,AI 没有自由发挥的余地 |
信息给一分,它答一分——Prompt 工程篇的这条规律,生 UI 是它最直观的展台。
二、排印有硬数字,抄就行
界面十有八九是字,字出问题,配色再对也白搭。About Face 4 第 17 章直接给了数,四条全能翻译成提示词:
| 规则 | 硬数字 | 原因 |
|---|---|---|
| 对比度走 80% | 正文与背景明度对比至少 80% | 浅灰叠浅灰的「高级感」,用户读起来是罚站 |
| 屏幕用无衬线 | 正文一律无衬线 | 衬线字体在屏幕上会发毛;衬线只准出现在大字号的装饰性标题 |
| 英文别全大写 | 层级靠字号和字重拉 | 人靠词形认字,全大写把词形抹平,又吵又难读 |
| 10px 是底线 | 字号不小于 10px | 低于 10px 基本没法读,免责声明也得让人读得见 |
还有米莱和萨诺那句判词:不必要的差异是一致设计的大敌。 差不多一样的东西,就做成一样。写进提示词,它就是最值钱的禁止项。
三、规格翻译器:人话 → 带数值的规格
| 你嘴里的人话 | AI 需要的规格 |
|---|---|
| 「字要看得清」 | 正文与背景明度对比至少 80%,正文字号不小于 14px |
| 「标题别那么吵」 | 标题与正文拉开字号差,字重只用两级 800/600 |
| 「屏幕上要好读」 | 正文用无衬线字体,禁止全大写 |
| 「别花里胡哨」 | 禁止渐变、禁止 emoji 图标、阴影不超过一种 |
| 「显得专业一点」 | 全站统一一个主色 + 中性灰,间距走 8pt 网格 |
四、拼一份你自己的规格书
规格书不用背,六个条款各挑一块就拼出来了。哪组选「不提」,哪部分就交回给 AI 赌运气。一份拼好的成品:
做一个 SaaS 工具的落地页,桌面端优先。
信息密度参考 Linear:紧凑,留白给结构不给装饰。
全站唯一主色 #DB2777,其余一律中性灰。
间距走 8pt 网格,所有 margin 和 padding 是 8 的倍数。
标题只用两级字重:800 和 600,不出现第三种。
正文与背景明度对比至少 80%,正文用无衬线,英文标题禁止全大写,字号不小于 10px。
禁止渐变、禁止 emoji 图标、阴影不超过一种。
五、四类条款,抄这几句
| 条款类型 | 作用 | 模板话术 |
|---|---|---|
| 正向规格 | 把能量化的都定死,AI 没得猜 | 「主色 #DB2777,间距走 8pt 网格,圆角统一 12px,字重只用 800 和 600」 |
| 负向约束 | 把 AI 最爱跑偏的路提前堵死 | 「禁止渐变、禁止 emoji 图标、禁止超过一种阴影」 |
| 参考锚点 | 用双方都见过的产品当坐标 | 「信息密度参考 Linear,留白参考 Notion」;别说「大厂风格」,没有指向等于没说 |
| 统一性条款 | 把「差不多一样」提前统成一样 | 「全站只允许一个主色、一套圆角、一种阴影,没有理由的差异一律删掉」 |
第四类就是「不必要的差异是一致设计的大敌」的提示词版。AI 特别爱在细节上加戏:这里 10px 圆角、那里 12px,两种灰、三种阴影。统一性条款把加戏的口子提前封死。
哪句约束最值钱? 是「禁止渐变、颜色只允许一个主色加中性灰」——负向约束性价比最高,三句话砍掉大半 AI 味。
本节要点
- 形容词是许愿,规格是指令: 主色、间距、字重、禁止项,写成能逐条验证的条款。
- 负向约束性价比最高: 「禁止渐变、禁止 emoji 图标、阴影不超过一种」,三句话砍掉大半 AI 味。
- 排印有硬数字可抄: 对比 80%、正文无衬线、英文禁全大写、字号 10px 起,写进提示词就是四行验收标准。
- 下次生 UI,拼一段规格书发给 AI,跟上一次的「随口一句」对比产出。
评论
0 条
还没有评论,先写一条吧。