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

AI 设计工具全景图

我们塑造工具,此后工具塑造我们。 常被归于麦克卢汉(Marshall McLuhan)的一句话,恰好适合此刻

欢迎来到第三部分。先把这一部分的立场亮出来,因为它决定了后面三章的全部写法:AI 把"产出一个还行的设计"的成本压到了接近零——因此"还行"不再值钱,值钱的是判断"还行"和"对"之间的距离。这正是第一章末尾的预言落地的地方:当生成能力人人均等,你在第一、二部分建立的那套眼光,从修养变成了生产资料。

还有一个写作上的声明:AI 工具的版本号以月为单位过期,所以本书拒绝写成工具测评。本章给的是地图(按输入输出分类,象限比产品长寿),下一章给技艺(怎么向 AI 描述设计),十五章给工作流(怎么把 AI 嵌进从需求到上线的全流程)。具体工具名只作举例,过时不影响结论。

13.1四象限:按输入和输出分类

抛开营销名词,所有 AI 设计工具只做一件事:把一种描述转换成另一种描述。按"输出是什么"分,正好四个象限:

A · 文字 → 图像 prompt ⇒ pixels Midjourney、DALL·E、Stable Diffusion 一族 产出:氛围图、插画、图标方案、moodboard 边界:产出像素,不产出结构。 图里的按钮不能点,文字常是乱码—— 它画的是"界面的画像",不是界面 B · 文字 → 设计稿 prompt ⇒ editable layers Figma AI、Galileo、Uizard 一族 产出:可编辑的图层、组件、auto-layout 边界:强于惯例,弱于独特。 产出高度收敛于"标准 SaaS 长相", 适合起稿与探索,不适合定终稿 C · 文字 → 代码 prompt ⇒ running UI v0、Claude、Cursor、Copilot 一族 产出:可运行的组件/页面(常带 Tailwind) 边界:单屏惊艳,全局失忆。 每次生成都可能换一套间距和灰色—— 除非你喂给它 token(第八章的用武之地) D · 设计 → 代码 / 设计 → 设计 design ⇒ code / variants 截图转代码、Figma-to-code、自动变体一族 产出:还原设计稿的实现、批量尺寸适配 边界:翻译者,不是设计师。 输入的设计有多好,输出就有多好; 垃圾进,整齐的垃圾出 输出离"灵感"近 ↑ 输出离"上线"近 ↓
图 13-1 · AI 设计工具四象限 · 本书绘制 · 具体工具名仅作举例,会过时;象限不会 所有工具都在做翻译,区别只是目标语言 每个象限记两样东西就够:它的输出能直接用来做什么,以及加粗的那行边界。注意四条边界惊人地一致:都是"产出局部质量,缺失全局判断"——这个共同规律是 13.2 节的主题。

13.2共同的能力边界:会方言,不会押注

四个象限的工具底层同源(生成模型),所以长板短板也同构。用本书的语言精确描述:

AI 极其擅长的,恰好是本书教过"有标准答案"的部分:执行惯例(表单标签在上、44pt 触达——第九到十一章那些"方言"它都流利)、风格插值("介于 Notion 和 Linear 之间"这种指令它真能执行)、批量变体(一个卡片出二十版,人力不可比)、规范服从(给它 token 和字阶,它比初级工程师更守纪律)。

AI 系统性薄弱的,恰好是本书教过"没有标准答案"的部分:跨页面的一致性(每次生成是独立采样,没有"全局设计系统"的记忆——除非你显式提供);独特性(它的训练目标是逼近数据分布的中心,而"像所有人"正是品牌设计的反义词);取舍(《夜巡》的决定——牺牲付费者的脸换取戏剧性——需要为一个目的押上代价,生成模型的本性是规避极端而不是选择极端);以及知道何时停(它永远能再给你二十个变体,但"够了,就这个"是判断,不是生成)。

核心概念

一句话记住边界:AI 学会了全部方言(惯例与规范),但没学会押注(为意图支付代价)。所以分工是清晰的:让 AI 负责"正确"(合乎惯例、覆盖变体、服从系统),你负责"对"(这个产品此刻应该牺牲什么、强调什么、停在哪里)。第六章四步法里,AI 能做描述和分析,解释与评价的位置上坐着的还是你。

13.3选择工具:一棵决策树

这次产出要交付给谁? 给自己找感觉/定方向 给团队/客户讨论结构 给用户(要上线) 象限 A · 文生图 moodboard / 风格探索 / 插画 象限 B · 文生设计稿 快速起稿 / 布局探索 / 提案 已有设计稿吗? 没有 象限 C · 文生代码 喂入你的 token 与组件约定 象限 D · 转译 设计稿→代码 / 批量适配 不确定时从 A 往 C 走:先便宜地探索方向,再昂贵地落地实现——和人类设计流程同一个顺序
图 13-2 · 工具选择决策树 · 本书绘制 按交付对象选象限 树根的问题不是"哪个工具强",而是"这次产出交付给谁"——给自己(灵感)、给团队(结构讨论)、给用户(上线质量),三种交付对容错的要求完全不同。多数翻车来自错配:拿象限 A 的氛围图直接"照着实现"(像素无结构),或拿象限 C 未经 token 约束的生成码直接合入主分支(单屏惊艳,全局失忆)。

13.4放大器定律:输入的品味决定输出的上限

四个象限还共享最后一条性质,也是第三部分的中心论点:同一个工具,在不同人手里产出的差距比工具之间的差距大得多。原因不神秘——生成质量大体由 prompt 的信息量决定,而描述一个界面的信息量,取决于你有没有词汇。回看第六章那张禁用词表(简洁、舒服、高级、干净、现代):那些词不仅是鉴赏的占位符,它们也是糟糕 prompt 的全部模样。"做一个简洁高级的登录页"——AI 只能回以分布中心的平均脸;而"720px 单列、单色相蓝 + 明度层级、唯一强调色给主按钮、标签在输入框上方、错误就地显示"——每个短语都来自本书前十二章,每个短语都在收窄解空间。

你的设计词汇表就是你的 prompt 词库。这就是为什么本书把 AI 放在最后一部分:不是它不重要,而是没有前两部分,第三部分只是魔法咒语集;有了前两部分,它是一门可以精确执业的手艺。下一章就教这门手艺。

13.5失败画廊:AI 设计的六种典型翻车

13.2 说 AI"会方言、不会押注"。这种局限不是随机出错,而是有固定的犯错模式——它们反复出现,认识了就能一眼识破。这恰恰是 AI 时代鉴赏力的直接变现:你前十二章练的眼睛,现在用来给 AI 的产出当 reviewer。下面是六种最常见的"AI 翻车",每一种都精确地踩在本书某一章讲过的原理上:

🚀 开启你的非凡旅程 立即免费开始 ✨ ① 平均脸 无品牌 · 13.2 🔥 超值 💎 限量 ⭐ 精选 ✦ 每个元素都在喊我看我看我 ✦ ② 装饰过载 违反克制 · 7.7 高级感标题 这几行说明文字追求"轻盈通透", 浅到几乎看不见,一部分人直接读不了。 价格 ¥99 按钮文字也是浅灰 ③ 低对比浅灰字 挡住用户 · 9.6 屏 A 屏 B(同一个 App) 蓝/绿、胶囊/直角、粗/细边各不同 ④ 全局失忆 违反一致性 · 第8章 每行都是完美等长的 Lorem ipsum ⑤ 完美假数据 掩盖真实密度 · 9.3 提交 ✓ ← 只画了默认态 空状态?加载中?错误? 禁用?超长文本? ⑥ 只有 happy path 状态矩阵缺格 · 8.7
图 13-2 · AI 生成界面的六种典型翻车 · 本书绘制 认得出,才改得动 把它当一张"通缉令"记住。前三种是 AI 过度发挥的产物:①平均脸(训练数据中心的紫蓝渐变+emoji,谁都见过所以谁也不是)、②装饰过载(你没拦它,它就给每个元素都配上渐变阴影徽章,正是 7.7 克制的反面)、③低对比浅灰字(AI 把"高级感"学成了"调淡",一脚踩进 9.6 的 ✗ 区)。后三种是 AI 视野缺失的产物:④全局失忆(每次生成独立采样,跨屏不一致,除非喂 token)、⑤完美假数据(它填的占位内容长度完美、永不溢出,掩盖了真实数据带来的密度与截断问题)、⑥只有 happy path(默认态画得漂亮,空/错/加载/超长统统没画——8.7 状态矩阵只填了一格)。这六种你都能当场点名,AI 的产出就再也唬不住你了。
程序员视角

把这张图变成一段你脑子里的 lint,在合并任何 AI 生成的界面前跑一遍:它是平均脸吗?(喂 token 和参照锚点,第十四章)· 有没有装饰过载?(删到只剩信息)· 对比度过关吗?(跑 axe,第九章)· 和别的屏一致吗?(token 进 system prompt)· 用真实数据填过吗?(拿最长的真名字、最大的数字、最空的账户试)· 非 happy path 的状态画了吗?(对照 8.7 矩阵)。这六问几乎覆盖了 AI 设计翻车的全部高发区。注意它们没有一个是"AI 不够强"——全是"人没把判断补上"。AI 把执行的成本降到零,正因如此,这六道关卡才是你作为作者无法外包的部分(第十五章会把它做成工作流里的 gate)。

鉴赏练习 13

两道题。① 受控实验:选一个真实的小需求(比如"个人博客的订阅卡片"),写两版 prompt:A 版只许用形容词("好看、简洁、现代、有设计感");B 版禁用一切形容词,只许用本书术语(字阶、单色相、间距节奏、唯一强调色、对齐轴……)。把两版分别喂给任何一个象限 C 工具,对比产出。然后做第二轮:把你项目的 design token 贴进 B 版再生成一次。三个结果排开,你会亲眼看到"放大器"放大的到底是什么。② 抓翻车:让 AI 生成三个不同界面,对照图 13-2 的六种翻车逐一指认——它们中了几种?把命中的翻车名和对应章节写下来,这就是你给 AI 当 reviewer 的第一份报告。