缩小 ≠ 适配
AI 生成的页面在桌面上通常没问题，一到手机就露馅：
- 48px 的大标题挤成五行
- 三列卡片压成极窄的三列，而不是堆成一列
- 表格横向溢出，整个页面能左右拖动
- 固定定位的导航栏挡住内容
- 按钮小到点不准
根因是模型默认在设计桌面版，移动端只是加了几个断点把尺寸按比例缩小。而真正的适配不是缩小，是重新排布。
四条最有效的约束
1. 明确写出移动端的字阶
不要只给桌面字号，让模型自己缩：
字阶：
桌面 h1 48/1.1，h2 32/1.2，正文 16/1.7
移动（<768px）h1 32/1.15，h2 24/1.25，正文 16/1.7
正文字号在任何断点都不小于 16px
最后一条尤其重要：正文小于 16px 时，iOS Safari 会在输入框聚焦时自动放大页面，体验很糟。
2. 指定多列布局在窄屏怎么变
别让模型猜。逐个区块说明：
移动端布局：
- Hero 左右两栏 → 纵向堆叠，图片在文字下方
- 三列卡片 → 单列纵向堆叠（不要横向滚动）
- 功能对比表 → 保留表格但外层加横向滚动容器，
页面本身不允许横向滚动
- 底部四列导航 → 两列
"页面本身不允许横向滚动"这句值得每次都写。横向溢出是移动端最常见也最影响观感的缺陷，而它在桌面上完全看不出来。
3. 触摸目标尺寸
所有可点击元素在移动端最小 44×44px 触摸区域，
相邻可点击元素间距不小于 8px。
图标按钮和紧挨着的链接是重灾区——视觉上 16px 的图标，如果没有额外内边距，就是 16px 的触摸区。
4. 固定元素要留出安全区
固定导航栏高度 56px，页面主内容顶部相应留出 56px。
底部固定 CTA 需考虑 iOS 安全区：
padding-bottom: calc(16px + env(safe-area-inset-bottom))。
env(safe-area-inset-bottom) 是全面屏 iPhone 底部横条的处理，AI 默认不会加，结果是按钮被横条压住一半。
一个更省事的写法：先写移动端
与其写"桌面这样，移动端那样"，不如反过来：
以移动端（375px 宽）为基准设计，然后向上适配到平板和桌面。移动端是主要场景。
这一句话的效果比一堆断点约束都好。因为它改变了模型的默认视角——从"缩小桌面版"变成"扩展移动版"，而后者天然不会产生溢出和挤压。
三十秒自测
生成完之后：
- 浏览器窗口拖到最窄，从 320px 慢慢拉宽，看哪个宽度开始出问题
- 检查有没有横向滚动条——出现了就说明某个元素溢出了
- 真机打开一次。不是开发者工具的设备模拟——模拟器不会告诉你触摸目标太小、不会显示 iOS 的安全区、也不会暴露真实网络下的加载体验
第 3 条经常被跳过，而它抓到的问题往往是前两条都发现不了的。
可粘贴的完整片段
响应式要求：
- 以 375px 移动端为设计基准，向上适配
- 断点：768px（平板）、1024px（桌面）
- 移动端字阶：h1 32/1.15，h2 24/1.25，正文 16/1.7；正文任何断点不小于 16px
- 多列区块在 <768px 一律纵向堆叠，不使用横向滚动
- 宽表格外层加 overflow-x 容器，页面本身不允许横向滚动
- 可点击元素最小触摸区 44×44px，相邻间距不小于 8px
- 底部固定元素使用 env(safe-area-inset-bottom)
MotionSites 上的提示词都以移动端为基准编写，省掉这一轮返工。