用 AI 做网页布局，第一次尝试的人大多会经历同一条曲线：输入一段描述，几十秒后出来一个完整的页面，分区清楚、配色顺眼，甚至还能直接跑起来。惊喜来得很快。可再往下改两轮，问题开始冒头：容器宽度换了但内边距没跟着动，手机上打开一塌糊涂，两个区块的间距分别是 13 像素和 17 像素，看着就是“差一点点意思”却说不上哪里不对。
v0、Bolt、Lovable 这类工具已经把“从描述到页面”跑通了，覆盖的是从需求表达到可发布网页的完整链路，但工具评测里反复出现的一句话更值得留意：不同工具解决的环节差异很大，出稿容易，出好稿难。难的地方不是 AI 生成能力不够，而是布局这件事里有四组参数，AI 猜不准也猜不稳，必须由人来定。这四组参数就是栅格、间距、层级、断点。
一、先把期待放对：AI 做布局的能到哪一步
讨论方法之前先校准预期。把 AI 在网页布局上的能力拆开看，会发现它是一条很不均衡的曲线：结构层面的产出能力很强，细节参数层面的稳定性很弱。强的部分可以放心交给它，弱的部分交给它就意味着后面无穷无尽的返工。
| 能力项 | AI 现在能到什么程度 | 需要人做的部分 |
|---|---|---|
| 首屏框架 | 一段描述能生成结构完整、比例合理的首屏，导航、主视觉、行动按钮齐全 | 信息主次怎么排、哪个元素该抢第一眼，取决于业务判断 |
| 常见页面类型 | 落地页、列表页、详情页都能出成套草稿，风格基本在一个路子上 | 品牌一致性、与既有站点的视觉衔接，要靠人给规则 |
| 布局代码 | 输出的代码可以直接运行，Flex、Grid 用法基本正确，改起来不费劲 | 栅格体系、参数刻度这类系统性约束，需要人来定义 |
| 响应式 | 能写出基础的媒体查询，平板和手机能出一个可用的降级版本 | 断点怎么设、移动端砍掉什么保留什么，是做取舍的活 |
一句话概括这张表：AI 擅长把“已经有规则的东西”快速做出来，不擅长“发明规则”。这是全文所有方法的底层逻辑。栅格、间距、层级、断点之所以成为难住人的地方，就是因为它们全是规则本身，而不是规则的执行。行业里讨论 AI 生成栅格代码时的共识也是这个说法：人类定义参数与意图，AI 生成代码草稿。
二、输出不稳的主因：布局描述写成了审美许愿
大部分人给 AI 的第一句描述是这样的：“帮我做一个大气、简洁、有科技感的落地页。”这句话里的每个词都是审美形容词，模型对它们的理解空间巨大，产出的不确定性也巨大。行业讨论里有个观点切中要害：AI 生成响应式布局最常见的问题，就是需求表达停留在“做一个自适应页面”这种宽泛程度，结果自然不可控。
布局描述的正确形态是结构语言，不是美学语言。把页面当成一份施工图来说：分几个区、每个区放什么、主次关系如何、约束条件是什么。审美形容词最多作为风格备注放在末尾，起锦上添花的作用。一段结构化的描述大概长这样：
页面类型：产品落地页（PC + 移动端）容器：最大宽度 1200px，两侧留白自适应栅格：12 栏，栏间距 24px分区（从上到下）：1. 顶部导航：Logo 左置，4 个菜单项居中，右侧行动按钮2. 首屏：左侧标题 + 副标题 + 按钮，右侧产品截图，两栏比例 1:13. 功能展示：3 列卡片，等宽，卡片间距 24px4. 底部：版权信息 + 2 列链接间距刻度：8 / 16 / 24 / 32 / 48，只允许取这五个值移动端：单列排列，导航折叠为菜单按钮，首屏图文上下堆叠风格备注：主色深蓝，整体克制这段描述里没有一句“好看”“高级”，但每个参数的边界都清清楚楚：容器多少、栏数多少、间距只准取哪几个值、移动端怎么降级。AI 拿到这种输入，产出稳定性会肉眼可见地提升，因为需要它“猜”的部分被压缩到了最小。描述里给得越具体，改稿轮数越少，这个规律在布局场景里尤其明显。
值得注意的是上面这段模板里出现了四个参数名：容器与栅格、间距刻度、主次结构、移动端处理。它们就是接下来要逐个拆开的四样东西，每一项都是“人来定义、AI 来执行”的分工。
三、栅格：全页的骨架参数，别让 AI 自由发挥
栅格是布局的骨架，也是 AI 最容易自由发挥的地方。不给约束的情况下，模型每一轮生成可能用不同的容器宽度、不同的栏数逻辑：首屏两栏比例 6:4，到功能展示区就变成三个 350px 的等宽卡片，到页脚又是另一套对齐。单看每个区块都说得过去，拼在一起就是“说不上来的不整齐”。
12 栏栅格加固定容器宽度是通用性最高的方案，通栏区块按整宽处理、内容区块按 8/6/4 栏分配，规则一旦确立，所有页面的骨架就统一了。这个体系不需要多复杂，需要的是“每页都遵守”。
三列卡片是常见选择，但如果每张卡片的内容天生短，三列会显得空；内容长的塞两列又挤。栏数选择的标准是“内容放进去舒不舒服”，这一步的判断 AI 做不了，它只会平均分配。
行业里比较高效的流程是把 AI 定位成“栅格代码草稿生成器”，人类拿着参数核对：容器边缘是否一致、卡片顶部基线是否齐平、图片与文字是否同一套对齐线。核对一遍比生成十遍有用。
一个现实的提醒：栅格出问题的页面，往往在视觉上表现为“说不上哪里乱”。用户表达不出来，但体验感就是会打折。把栅格参数定死这件事，投入产出比在四样里排得上前列，因为它一次性解决了所有页面的骨架一致性问题。
四、间距：页面廉价感的主要来源
如果说栅格决定页面“齐不齐”，间距决定页面“贵不贵”。这一条在 AI 生成场景里格外突出，因为它几乎是所有生成工具的默认短板：不给间距约束时，产出的数值经常是随机的，13px、17px、21px 这类“看起来差不多”的值混在一起，单看每个毫厘之差，整页的节奏就是散的。这个痛点行业里已经形成共识，甚至催生了专门做 AI 生成 UI 间距与栅格质量检查的讨论和工具概念。
间距问题的隐蔽性在于：它不会让页面“不能用”，只会让页面“不值钱”。用户说不出哪里不对，但付费按钮旁边的呼吸感、卡片之间的疏密，都在悄悄影响信任度。做转化型页面的人对这一点尤其敏感。
解决办法是给间距定一套刻度，要求所有生成都在刻度内取值。8、16、24、32、48 这样一组数够用了，区块之间用大刻度，区块内部元素之间用小刻度，层级关系在数值上直接体现。把刻度写进布局描述的那一刻，AI 的输出从“随机散布”变成“按谱演奏”，这一步的收效立竿见影。
刻度之外还有一条检查规则值得记住：相邻两个区块之间的距离，应该大于区块内部元素之间的距离。这条规则利用了人对“分组”的本能感知：间距近的自动被视为一组，间距远的自动被视为另一组。AI 生成经常违反这条，把区块间和区块内的间距用得一样大，页面读起来就没有了段落感，像一堵墙。
五、层级与断点：显性功力和隐性功力
剩下两样一个在明处，一个在暗处，合起来决定页面“能不能用”。层级是用户打开页面后第一秒的体验：先看什么、后看什么、被引导到哪里去。断点则是换设备之后页面还认不认人的问题，在移动流量为主的当下，它的重要性已经超过 PC 端本身。
不给指令的情况下，生成结果倾向于把区块做得轻重相当：标题不够突出、正文和辅助文字同样浓重、行动按钮淹没在一堆元素里。人的工作是在描述里写清视觉权重：谁是第一眼元素（通常是核心价值主张或行动按钮）、谁是第二眼（支撑信息）、什么东西应该弱化处理。权重写明白之后，AI 执行得很稳定，因为它擅长的是“按规则做轻重”，不是“猜你想要什么轻重”。
只写“要自适应”或者“做个响应式”，得到的往往是“能缩但不能用”的中等结果：三列卡片缩到手机上变成三条细缝，横向排列的表单挤成一团，桌面端的大横幅把手机首屏全部占满。可用的做法是把策略说透：断点定在哪些宽度（如 768 和 1024）、移动端哪些结构改变（多列怎么转单列、导航怎么折叠）、哪些元素直接隐藏、字号和间距如何整体缩放。策略级指令比“自适应”三个字有效得多。
层级和断点有个共同点：它们在 PC 端的大屏幕上都很容易被忽略，问题要么藏在移动端，要么藏在用户的行为数据里。所以这两项的检查不能只看生成结果，得把页面缩到手机宽度再滑一遍，再站在“用户第一眼会看哪”的视角扫一遍。生成速度越快，这种逆向核查的习惯越值钱。
六、从一页到一批页：布局规则要沉淀到模板层
单个页面的布局，按前面的方法调几轮就能到位。但做站的人面对的从来不是一页：一个站少则十几个页面，多站矩阵动辄成百上千页。如果每一页都靠对话来回调，前面积累的所有效率优势会在重复劳动里全部还回去。批量场景的正解只有一个方向：把四组参数从“每次对话的输入”升级成“模板层的固定配置”。
栅格体系、间距刻度、层级规范、断点策略一次性定好，形成一份站内通用的布局规范，谁来做页面都按这份走，不再逐页重新讨论。
把规范沉淀成几套基础布局模板，覆盖落地页、列表页、详情页这些常见类型。AI 的生成能力用在模板层的定制上，做一次、用一片。
新页面不再从零生成，而是“模板 + 内容”组装出来。布局质量由模板保证，内容由内容中台批量供给，页面产生的速度和质量都稳定下来。
定期抽查成稿页面的栅格对齐、间距刻度和移动端表现，发现共性问题就回到模板层改一次，让所有页面同步受益。
用 UC 建站系统做多站矩阵的团队，跑的就是上面这条链路：布局规则在模板层定死，内容通过内容中台差异化供给，人在策略端拍板，AI 在执行端出活。站与站之间用独立模板保持视觉差异，避免“一眼看出是一家人”的同质化；站内则共享同一套健康的布局体系，任何一页拿出来，栅格、间距、层级、断点都在水准线以上。单页精修靠手艺，批量页面靠体系，这是两件不同的事。
七、AI 替不了的那部分，恰好是最值钱的部分
把四组参数管好之后，AI 在布局执行端的产出已经相当可靠。但它替代不了的，是这几件更靠上游的事：
- 审美与品牌的判断：什么风格配什么业务、页面气质和品牌调性搭不搭，这类判断没有标准答案，靠的是对用户和行业的理解
- 用户路径的设计：访客从哪里进来、被引导往哪里走、在哪一步完成转化，这是布局背后的商业逻辑，AI 只会忠实呈现你给的路径，不会替你设计路径
- 取舍的决策：信息太多必须砍、板块太满必须删的时候，砍哪个留哪个，是需要担责的判断，也是页面质量的分水岭
- 数据反馈后的迭代方向：页面数据不好，是改层级、调间距还是换行动按钮，诊断和决策依然在人这边，AI 负责的是改造的执行速度
“AI 能很快把布局搭出来，但决定用户在页面上往哪走的，始终是人的判断。”
回到标题里的四样东西：栅格、间距、层级、断点。它们难住人的原因是一致的，都是“规则先于执行”的参数，而 AI 的强项在执行端。把这四组参数的定义权拿在自己手里，把执行权放心交给工具，AI 做网页布局的效率优势才能完整释放出来；反过来，这四件事如果也指望 AI 去猜，得到的就会是那个熟悉的循环：生成、不满意、重新生成。
工具会继续进化，生成的完整度和精细度只会越来越高，但“定义规则”这件事的价值不会随之缩水，反而会因为执行成本的下降而更加凸显。布局如此，内容如此，运营也多如此。
