chapter[15] · part 3 / AI 辅助设计
前两章给了你工具地图（第十三章）和单次生成的技艺（第十四章）。但真实产品不是一次 prompt 生成出来的——它是几十次生成、评审、迭代的累积。本章把零散的能力组装成一条端到端的流水线：从一句话需求，到一个能上线的首页。核心主张只有一个：AI 改变了每一道工序的执行者，但没有改变工序本身，更没有改变谁对成品负责。你不是流水线上的工人，你是它的架构师和每一道质量门的审查官。
先看整张图。注意两件事：每道工序都标了"谁主导"（人/AI），以及工序之间那些红色的质量门（gate）——它们是人必须签字、产出才能流向下一道的关卡。
用一个虚构小产品走一遍全程。产品：FocusForest——一个给开发者用的极简专注计时器，每完成一个番茄钟，森林里长出一棵树。
① 定义意图（人）。一句话："给容易分心的开发者一个不打扰、有成就感的专注计时器。"用户：程序员。场景：写代码时挂在第二屏角落。情绪关键词：安静、克制、一点点温暖的回报感。这一步我没问 AI——它不知道我想赌"安静"而不是"激励"。这个赌注将否决后面一切花哨方案。
② 方向（AI 出草稿，人定夺）。用象限 A 生成四个 moodboard 方向：(a) 游戏化森林，鲜艳卡通；(b) 深色极客终端风；(c) 自然纪录片质感，柔和绿；(d) 纸感杂志风，米白衬线。按意图里的"安静+克制+温暖"否掉 a（太吵）和 b（太冷），在 c 和 d 间选了 d 的骨架 + c 的绿色点缀。gate 通过：方向唯一了。
③ 立法（AI 出草稿，人审定）。用模式 05 让 AI 生成 token，我按第八章三层架构审定后冻结：
// FocusForest design tokens —— 经人工审定后冻结
// primitive
--paper:#F7F4EC; --ink:#2A2723; --forest:#3E6B4F; --bark:#9A7B53;
--space:8px(基); --ratio:1.25(字阶); --radius:8px;
// semantic（仅这一层允许被界面引用）
--bg:var(--paper); --text:var(--ink);
--accent:var(--forest); // 唯一强调色，给"开始"和成长反馈
--text-muted: #8A8276;注意 --accent 只有一个，而且绑定到"开始专注"和"长出树"——把第七章的克制写进了宪法。token 写入项目的 AI 配置文件，从此每次生成自动讲这门方言。gate 通过。
④ 施工（AI）。象限 C，prompt 用第十四章五器官模板，附上冻结的 token，一次只要"专注页主屏"一个屏。首版产出见下方左图。
⑤ 评审（人 + AI）。对首版跑第六章四步法。描述：居中大计时数字、一个开始按钮、底部一行小树。分析：层级对（计时器独占字阶顶端），但按钮用了实心森林绿 + 投影 + 圆角 20，和 token 的 radius:8 冲突；底部小树排成均匀一行（2.4 的单调节拍）；"开始"右边还自作主张加了个"设置"齿轮，抢了唯一动作的注意力。再用模式 06 让另一个 AI 四步评审，它额外指出：计时数字用了等宽以外的字体，和"精确"气质不符。这些都是 gate 该拦下的——打回。用模式 04 迭代，一次一个变量：先修圆角→再删设置齿轮（移进长按菜单）→再让小树高低错落（给节奏一个切分音）→再把计时数字换等宽。四轮后得到右图。
⑥ 落地（人）。定稿的按钮、计时器排版、树的组件回填进 FocusForest 的组件库，token 文件提交进仓库。下次做"休息页""统计页"时，AI 直接复用这套已审定的方言——工作流的产出不只是一个页面，是一个会自我增厚的设计系统。
个人流程放大到团队，多两条纪律：token 是唯一事实源——AI 配置、Figma 变量、代码里的 CSS 变量必须指向同一份 token，否则三处会各自漂移成第八章讲的"风格腐烂"，而 AI 会忠实地把腐烂复制到每个新页面（它放大一切，包括你的债）。AI 产出必须经过人的 gate 才能进主干——把"AI 生成的代码同样要 code review"写进团队约定；最危险的不是 AI 犯错，是没人觉得自己该为 AI 的产出负责，于是无人审查的生成代码悄悄堆积成无主之地。
AI 把生成做到了近乎免费，于是瓶颈整段位移了：难的不再是"做出一个界面"，而是"让几百个界面始终是同一套界面"。这恰恰是 AI 最薄弱的地方（13.2 的"全局失忆"、13.5 第④种翻车）——每次生成都是独立采样，今天的按钮圆角 6，明天可能悄悄变成 16；颜色、间距、阴影都会一点点漂。而人眼跟不上 AI 的产出速度：你没法用肉眼逐屏 review 五百个生成页面。结论很直接：当一致性靠自觉守不住时，就得让它变成机器可检的。
第一道自动护栏叫视觉回归测试（visual regression）。它的原理就是第六章的对比鉴赏法（6.4）的全自动版——给每个组件、每个页面拍一张"基线"快照，之后每次改动都自动截图、和基线做像素级 diff，把变化的区域高亮出来，交给人判断这是"有意的改进"还是"意外的漂移"：
视觉回归之外，一致性还有两道更便宜的护栏：设计 lint（8.2 的延伸——禁止裸色值、强制只引用语义 token，提交时自动拦截，这道关在像素变成截图之前就挡住了漂移）；以及AI 一致性巡检（把模式 06 放大到全站：定期让 AI 拿着设计系统文档扫一遍所有页面，列出"哪里用了系统外的颜色/间距/组件"——让 AI 来抓 AI 自己制造的漂移）。三道护栏层层递进：lint 防漂移于源头，视觉回归在合并前拦截，AI 巡检定期兜底。
这些全都装在你熟悉的 CI 里，没有新概念：视觉回归用 Playwright 的 toHaveScreenshot()、或 Chromatic / Percy 这类托管服务，把"未经审查的像素变化"变成构建失败——就像快照测试，只不过断言的是长相。设计 lint 用 stylelint 的 declaration-property-value-allowed-list 把裸 hex 拦在 PR 外。组合起来，你得到一条对外观的 CI 流水线：AI 可以随便生成，但任何未经人确认的视觉漂移都进不了主干。这就把第八章"风格腐烂"从"迟早发生的熵增"变成了"每次提交都被检查的不变量"。注意它和功能测试的分工——单元测试保证它能用，视觉回归保证它没走样，两者都不可省。
AI 设计工作流的本质，是把你的判断力部署到流程的关键节点上，而把执行外包出去。这和优秀工程团队的做法同构：自动化承包可重复的部分（CI、生成、lint、视觉回归），人把精力集中在不可自动化的判断上（架构、取舍、验收、裁决一次漂移是改进还是事故）。流程不是用来约束 AI 的，是用来确保"署名的人始终在决策"的。谁守着 gate，谁就是作者。
整套工作流可以装进你已有的工具链，不需要新平台：token 写进 CLAUDE.md / system prompt（让方言全局生效）；生成的组件走正常 PR；第七章的七条 lint 写成 PR 模板的 checklist；模式 06 的"AI 四步评审"可以挂成一个 review bot。AI 设计不是设计师的活流到了程序员手里，而是软件工程的纪律流到了设计里。你本来就擅长这个。
用第十四章练习存档的那份材料，补完整条流水线：为你的小需求走完①→⑥，每道 gate 都明确写下"通过"或"打回，因为___"。重点不在产出多漂亮，在于你能否在每个 gate 上说出一个具体的、来自本书前十四章的拒绝理由。如果某个 gate 你发现自己只能说"感觉还行"——回到对应章节补课，那里就是你判断力的当前边界。把这条边界记进 swipe file。护栏加练：给你项目里一个组件加一条视觉回归快照（Playwright toHaveScreenshot() 或 Chromatic 任选），然后故意让 AI"优化"一下这个组件，看回归测试能不能逮住它引入的漂移——你会第一次亲眼看到"机器发现差异、人来裁决"这条关卡在替你干活。