和 AI 沟通布局的常用说法
说出布局的名字，再补上区块顺序、尺寸和手机上的变化，AI 做出来的页面会稳定很多。
跟 AI 说「做得好看一点」「排版整齐些」，它只能猜。说出布局的名字，再补上区块顺序和尺寸，结果会稳定很多。
先说整体布局
整体布局描述的是页面的大骨架：
- 单栏布局：所有内容排成一列从上往下读，适合手机和只做一件事的页面。
- 顶栏+内容：顶部一条导航，下面是内容，适合官网、博客这类栏目不多的网站。
- 侧边导航+内容：左侧常驻菜单，右侧是内容，适合功能模块多的后台。
- 圣杯布局：中间主内容，左右各一栏，常见于门户、论坛和文档站。
- 主从布局：左边是记录列表，右边是选中那条的详情，点左边、右边原地切换。
- 分屏对比：两份结构相同的内容左右并排，用来找差异。
再说区块怎么排
一个区块里放多条内容时，常用的说法有：
- 卡片网格：一格一张卡片，适合图文并重、靠浏览挑选的内容。
- 简单列表：一行一条，每条两三个字段，适合快速扫读。
- 数据表：有表头和对齐的列，适合字段多、要比较的记录。
- 仪表盘：一屏里放多块不同的指标和图表。
描述细节时可以用这几个词：
- Flex 布局：一组元素沿一个方向排成一排，比如「按钮组横向排列、靠右」。
- Grid 布局：按行和列划分格子，比如「卡片三列网格，间距 16px」。
- 留白和对齐：「区块之间多留些空白」「标题和正文左边缘对齐」比「好看一点」管用得多。
别忘了手机
响应式是指同一套页面在不同宽度下自动调整。告诉 AI 断点在哪、到了断点怎么变，比如「宽度小于 768px 时两栏变一栏，顶部菜单收成汉堡菜单」。
怎么跟 AI 描述
按「整体布局 → 区块从上到下 → 每块怎么排 → 手机上怎么变」的顺序说：
页面整体用顶栏+内容布局，内容区最大宽度 1200px 居中。从上到下是：首屏横幅、三列卡片网格展示产品特点、客户评价的简单列表、页脚。卡片网格用 Grid 布局，间距 24px；宽度小于 768px 时改成单列。
手里有参考页面时，可以直接截图发给 AI（截图生成代码），再补一句「整体是侧边导航+内容，列表部分改成主从布局」。第一版不满意，就用迭代式提示一轮只改一处，比如「只调整卡片间距，其他不动」。