让 AI 做一个官网首页，在电脑上看着结构很完整，放在手机端看却可能出现另一番景象：导航挤在一起，标题压住图片，按钮难点，页面底部还有内容被悬浮栏挡住。很多 AI 在生成网页时，没有考虑过移动端适配，也有些 AI 工具能生成，但不理解两个屏幕上内容该怎样重新安排。
下面以一组 Paico 生成的宠物医院官网页面为例，看看响应式布局该如何提出需求、检查结果和继续修改。这里讨论的是提供的桌面端与手机端截图所呈现的界面；预约等交互是否真正可用，还需要在预览页中逐项验证。
一、先让 AI 理解两个屏幕上的任务
这个官网的首屏任务很明确：告诉访客这是什么医院、能提供什么服务，并引导他们预约或查找院区。桌面端空间充足，可以同时展示完整导航、主标题、两个操作入口和机构信息；手机端宽度有限，访客更可能先找预约入口。
虽然 Paico 是自带生成响应式布局 的功能的，但为了避免后期改动，我们在提示词就可以先提前约束，至少要说清楚内容优先级和布局变化。下面是一个可复用需求模板：
请设计一个宠物医院官网首页，同时适配电脑端和手机端。
核心任务：让访客了解诊疗服务，并能快速找到"预约门诊"和"查找院区"。
首屏内容：医院名称、导航、服务主张、简短说明、两个主要操作入口，
以及院区数量、医生团队、夜间服务等信息。演示数据请标明为占位内容。
响应式要求：
1. 电脑端展示完整导航；手机端改为可展开菜单。
2. 主标题和说明文字允许重新换行，不通过整体缩小页面来适配。
3. 电脑端两个操作按钮可横向排列；手机端按重要性纵向排列。
4. 图片裁切要保留主体，同时保证文字可读。
5. 手机端如使用底部固定操作栏，正文要留出空间，不能遮挡内容。
6. 检查窄屏下的长文字、按钮、信息卡片和页面状态。提示词的关键不是规定每个像素，而是告诉工具：哪些信息必须保留，哪些结构可以随屏幕变化。生成首版后，再根据实际页面提出局部修改，通常比反复要求"再优化一下响应式"更容易得到可判断的结果。
二、看首屏：响应式不是把电脑页面缩小
网页顶部是完整导航，右侧有"立即预约"；手机端保留医院标识，导航收进菜单。这个变化合理，因为手机屏幕上硬塞六个栏目，只会挤占真正重要的内容。
主视觉也没有简单等比缩小，桌面端标题与说明位于图片左侧，两枚按钮横向排列；手机端标题换成更短的行宽，按钮改为上下排列。访客不用放大页面，也能看到"预约门诊"和"查找附近院区"两个动作。
这里有三个值得借鉴的布局判断：
- 第一，重排比缩放重要。桌面端横排的内容到了手机端，可以改成纵排；完整导航可以收起，但入口不能消失。
- 第二，图片裁切要服从文字。这张主视觉在两端都保留了猫和人的画面，同时叠加暗色处理，让白色标题有较清楚的阅读区域。不过换一张图、换一句更长的标题后，仍需重新检查对比度和遮挡。
- 第三，操作顺序要稳定。"预约门诊"在两端都是更醒目的主操作，"查找附近院区"是次操作，布局变化没有改变这层关系。
底部还出现了一组固定操作按钮，这类设计方便访客滑动到下方的详情页也能随时预约，但也带来新问题：底栏会不会挡住最后一段内容？在更窄的手机上，"紧急咨询"能否完整显示？这些都要反复实操演示和考虑。
三、生成后，按宽度和页面状态检查
只看一张电脑端页面和手机端页面，不能证明页面已经适配所有屏幕。检查时可以先选几个有代表性的视口：窄手机、常见手机、平板宽度、普通笔记本和宽桌面。重点观察内容何时开始拥挤，而不是机械地要求某个固定断点。
网页首屏至少检查下面几件事：
| 检查对象 | 具体看什么 |
|---|---|
| 导航 | 手机菜单能否展开、关闭；键盘能否操作；展开后是否盖住关键按钮 |
| 标题与图片 | 长标题换行后是否仍清楚；不同宽度下图片主体是否被裁掉 |
| 操作按钮 | 文字是否完整、点击区域是否足够；固定底栏是否遮挡正文 |
| 信息区 | "7家""40+"等信息在窄屏下是否过挤；文字变长后能否换行 |
| 页面滚动 | 是否出现无意的横向滚动；底部内容能否完整看到 |
在布局之外，还要补业务状态。以预约为例，正常状态可以显示入口，但真实页面还会遇到"没有可约时段""提交中""提交失败""预约成功"。院区查询也可能出现定位未授权、附近没有院区或查询失败。AI 生成的首版通常更容易呈现理想状态，这些情况需要在需求中单独提出，再检查页面如何反馈。
就像这个网页案例只是作品演示，后期如果要上线，必须由业务方核实院区、资质、服务时间和预约规则。
四、怎么修改，才算真正兼顾两端
当你发现问题后，对 AI 的修改要求越具体越好。例如，不要只说"手机版不太好看"，可以改为："在窄手机宽度下，主标题保持完整且不压住猫的主体；两个首屏按钮纵向排列；底部固定栏不能遮挡页面末尾内容。"这句话同时给出了场景、问题和验收条件。
如果桌面端正常、手机端异常，也要明确只调整手机布局，**避免一次修改把桌面端带乱。**比较稳妥的顺序是：先确认内容与操作是否完整，再调布局和换行，然后处理图片裁切、间距与颜色，最后检查交互和异常状态。每改完一轮，都回到电脑端与手机端各看一次。
完成设计后，前端接手时仍要确认实际断点、图片资源、组件结构、菜单行为、预约接口、表单校验和无障碍操作。