chapter[14] · part 3 / AI 辅助设计

用 Prompt 生成 UI

把问题描述清楚,问题就解决了一半。 常被归于约翰·杜威(John Dewey)的工程师格言

先纠正一个流行的认知错误:好的 prompt 不是咒语,不靠"魔法词"。prompt 是一份微缩的规格说明书(spec)——你每天给人写的需求文档、给函数写的接口注释,换了个收件人而已。写得好的标准也完全一样:意图明确、约束完整、验收可判。本章把第十三章的"放大器定律"展开成可执行的技艺。

14.1解剖:一个 UI prompt 的五个器官

把任何高质量的 UI 生成请求拆开,都是这五个部分:

器官回答的问题来自本书
① 意图这是什么?给谁用?什么场景下出现?第六章"解释"层——先有意图才有形式
② 结构有哪些信息?层级顺序是什么?7.1 层级 · 10.2 范式由数据结构决定
③ 系统用什么 token?字体、色彩、间距标尺?第八章——治"全局失忆"的唯一药
④ 参照气质靠近什么?(风格锚点)第三章色彩语义 · 第四章字体性格
⑤ 边界不要什么?7.7 克制——负向约束往往最值钱
## 一个完整的五器官模板
[意图] 为一个面向独立开发者的付费 newsletter 做订阅卡片,
       出现在文章末尾,读者刚读完一篇深度长文。
[结构] 信息按重要性:价值主张一句话 > 邮箱输入 + 订阅按钮
       > 隐私承诺小字。不要标题党,不要表情符号。
[系统] 使用以下 token:背景 #FAF7F0,正文 #211D19,
       强调色 #C2452D 仅用于按钮;衬线标题 + 无衬线正文;
       间距用 8px 的倍数;圆角统一 6px。
[参照] 气质像一本严肃杂志的征订页,不像 SaaS 落地页。
[边界] 禁止渐变、禁止阴影堆叠、禁止超过一个强调色块、
       禁止"立即""马上""免费"类催促词。

14.2实例:同一张卡片的三轮演化

看五个器官逐步加入时,产出怎么变。任务:上面那张订阅卡片。下面三个结果是对各轮典型产出的忠实模拟(SVG 重绘):

ROUND 1 · 只有形容词 "做一个好看、现代的订阅卡片" 🚀 订阅我们的 Newsletter! 获取最新资讯,不容错过 输入邮箱… 立即免费订阅 → 已有 10,000+ 人订阅 分布的平均脸:紫蓝渐变、胶囊按钮、 火箭 emoji、催促文案。哪里都见过, 所以谁也不是。 ROUND 2 · + 意图与结构 + 给谁/场景/层级顺序/不要催促 每周一篇,写给独立开发者 深度长文,无广告,随时退订。 you@example.com 订阅 我们不会分享你的邮箱。 CARD · v2 结构对了:层级清晰、文案诚实、 单列单按钮。但颜色字体是工具的 默认审美——还不是"你家的"。 ROUND 3 · + 系统/参照/边界 + token、杂志气质锚点、禁止清单 每周一篇,写给独立开发者 深度长文 · 无广告 · 随时退订 you@example.com 订阅 邮箱只用于发信,永不外泄。 // issue #1 每周四发出 token 进场:纸底、墨字、衬线标题、 唯一朱砂块。它看起来像你产品的 一部分——因为约束就来自那里。
图 14-1 · 同一需求的三轮 prompt 演化 · 本书绘制(对各轮典型产出的模拟) 产出质量曲线 = 约束信息量曲线 从 R1 到 R2,变化来自意图与结构(器官①②):层级和诚实文案就位。从 R2 到 R3,变化来自系统、参照与边界(器官③④⑤):R3 直接套用了本书的 token——所以它看起来像本书的组件。注意三轮里没有出现任何"魔法词",每一轮只是补上了一段被偷懒省略的规格。

14.3六个工作模式

01

描述式:从零生成

14.1 的五器官模板。适合新组件、新页面。纪律:意图永远写在第一行——它是其余约束的判断依据。

02

参照式:风格锚点

"密度像 Linear,温度像 Notion"。锚点把上千个微决定一次性传输。代价是同质化——锚点应该用来定方向,不该用来抄长相(13.2:分布中心没有品牌)。

03

约束式:token 注入

把第八章的 token 文件直接贴进对话(或放进项目的 AI 配置文件,如 CLAUDE.md / system prompt),从此每次生成自动讲你的方言。治"全局失忆"的根治术。

04

迭代式:一次只改一个变量

"不够好→重新生成"是赌博;"间距从 16 改成 24,其余不动"是实验。每轮迭代说出哪一个维度要变,否则你无法知道是什么起了作用——对,这就是控制变量法。

05

系统式:先生成系统,再生成界面

没有 token 时反过来用 AI:"为这个产品生成一套 design token(色彩五角色、1.25 字阶、8px 标尺)",人工审定后再让它依此生成界面。先立法后施工。

06

反向式:让 AI 做 reviewer

贴上截图:"用 Feldman 四步法 review 这个界面:先客观描述,再分析层级/对齐/色彩/间距,再推断意图,最后给出三个最高优先级的修改建议。"AI 的描述与分析极其勤奋(13.2 它擅长的位置),常能看到你已经麻木的问题。

14.4失败模式速查表

症状诊断处方
产出是"平均脸",像所有人的落地页形容词污染:prompt 全是"简洁现代高级"形容词换术语(第六章禁用词表反向使用),补器官③④
每个页面各自好看,放一起像三个产品全局失忆:逐页独立采样模式 03/05——token 进 system prompt,不进单条消息
第五轮迭代比第一轮还差赌博式重生成 + 要求互相打架模式 04:回到最好的一版,一次只动一个变量
一个 prompt 提了十个要求,每个都只做了一半kitchen sink:约束过载且无优先级砍到 5 条以内,意图置顶;剩下的留给迭代轮
AI 对你的每个想法都说"好主意"过度顺从:你在用它求安慰,不是求判断强制要价:"给出这个方案的三个代价,以及你会怎么取舍"
生成的界面"技术上对"但毫无生气只给了规则,没给意图与张力回器官①:场景、情绪、用户那一刻在想什么——形式追随的那个"功能"

14.5给 AI 看,而不只是说给 AI 听:多模态 prompt

纯文字 prompt 有个天花板:用语言描述视觉,是有损压缩。"克制的留白、温暖的中性灰、紧凑但不拥挤的间距节奏"——写得再准,也不如直接甩一张图过去。今天的工具大多能看图,于是 prompt 从"说给 AI 听"升级成"给 AI 看"。但图是一种高带宽却很的输入:你给它一张参照图,它会把图里的一切都当成指令照单全收,包括你没想要的部分。所以多模态的关键不是"附张图",而是给每张图指定一个角色,并说清要取它哪个维度、丢它哪个维度

一次多模态 prompt = 文字意图(五器官)+ 每张图一个角色 [风格参照] 竞品/Moodboard 角色:传气质。说"学它的留白比例和中性灰, 别学它的圆角和插画风"。 [线框草图] 手绘 / 低保真 角色:锁结构与层级。说"严格按这个 布局,用我的 token 上色和排版"。 [现状截图] 你当前的界面 角色:定点修改。说"整体保持不动, 只把圈出的按钮区改成主次两级"。 超长企业全称股份有限公司(北京) 第二行换行了 ↩ 短名 ¥1,280,004.50 —— 空字段 [真实内容] 真实数据截图 角色:暴露真实密度。说"用这些真实 条目排版,处理好最长项和空字段"。 钝刀要点:参照图会被整张克隆,包括它的缺点。 每给一张图,必须配一句"取哪个维度 / 弃哪个维度"——否则你会把竞品的圆角、它的低对比、它的装饰一起继承过来(正是 13.5 的翻车来源)。
图 14-3 · 四种图像输入及其角色 · 本书绘制 每张图都该带一句"取什么、弃什么" 四张图各司其职,对应你脑子里四种不同的需求:传气质用风格参照、锁结构用线框草图、做定点修改用现状截图、验真实密度用真实数据截图(直接治 13.5 的"完美假数据"翻车)。但底部红框那句是全节的命门:图是钝刀,AI 会把参照图整张当指令——你不说"只取留白、别取圆角",它就连缺点一起复制。这正是 14.3 模式 02 那句"锚点定方向、别抄长相"的多模态版本。
程序员视角

多模态里最高杠杆的一招是截图迭代闭环:把当前界面截图发给 AI,配一句"现在长这样,问题是 X,改成 Y"——它能看到自己上一版的真实渲染结果,而不是凭文字想象,迭代收敛快得多(这把 14.3 的模式 04"一次一变量"装上了眼睛)。两个工程提醒:① 喂真实内容,别让 AI 自己编占位——把你数据库里最长的名字、最大的金额、最空的账户截图给它,逼它当场处理换行、截断、空态,直接堵死 13.5 第⑤种翻车;② 参照图要标注——能在图上圈一笔、或在文字里指明"看红圈处",就别让 AI 猜你指的是哪儿。一句话:文字给意图,图给事实;意图说"我要什么",图说"长这样、就这里、用真的"。

核心概念

把本章压缩成一条公式:prompt 质量 = 意图清晰度 × 约束完整度 × 迭代纪律。三个因子全部是第一、二部分能力的直接变现——意图来自鉴赏(你得知道自己要什么),约束来自系统(第八章),纪律来自方法论(第六章)。多模态只是给"约束"开了一条更高带宽的通道:能给 AI 看的,就别只说给它听。AI 没有改变设计能力的构成,只是把它从手上转移到了嘴上和眼里。

鉴赏练习 14

完成第十三章练习的进阶版:把你那个真实小需求按 14.1 模板写满五个器官,跑模式 01 生成;然后连续做四轮模式 04 迭代(每轮记录你改的那一个变量和效果);最后用模式 06 让 AI review 自己的产出,看它的四步分析与你的判断差在哪里。整个过程存档——这份记录在下一章会直接用上:它就是你个人 AI 设计工作流的第一块样本。多模态加练:找一张你欣赏的界面截图当风格参照喂给 AI,但只准它取一个维度(比如"只学这张的间距节奏"),明确写下"别学它的 X、Y、Z"。看 AI 能不能做到"取一维、弃其余"——做不到的地方,往往就是你那句"取什么弃什么"还说得不够具体。