AI生成响应式网页，不是把桌面截图缩小到手机里。要在输入时说明内容顺序、布局变化与主要操作，再分别检查宽屏和窄屏。导航是否收纳、卡片是否换列、表格是否保留关键信息，才决定网页在不同设备上是否好用。
可以用墨刀AI生成网页先做一版页面，再逐段修改。本教程以金融SaaS官网为例，把重点放在生成之后怎样检查多端适配，以及怎么写出AI能执行的局部修改要求。
先说明响应式规则，再要求好看的页面
“适配手机和电脑”只说明目标，没有说明取舍。假设桌面首屏是左标题、右数据卡，手机端应该先看标题还是数据？价格卡是否由三列改为单列？导航中的次要项是否进入菜单？这些关系最好在生成前明确。
| 区域 | 宽屏安排 | 窄屏安排与检查 |
|---|---|---|
| 导航 | 品牌、栏目和主操作并排 | 次要栏目收进菜单，主操作仍容易找到 |
| 首屏 | 标题与产品卡片分列 | 按标题、说明、按钮、产品图依次排列 |
| 功能卡片 | 按内容比较需要排列多列 | 改为单列或合适的少列，文字不被截断 |
| 数据表格 | 显示完整比较维度 | 保留关键列或在容器内滚动，不撑宽整页 |
| 预约表单 | 相关字段可并列 | 标签、输入框和错误提示依次阅读 |
例如原来输入“社区生活App”会把输出引向移动端应用。要做官网，应明确写“网页”“访问者任务”和栏目结构，而不是只切换一个屏幕尺寸。
第一步：为SaaS官网准备一份可执行的需求
打开墨刀AI，在输入框下方选择“生成应用”，再选择图中的“AI生成Web应用”入口。将整理好的官网需求输入对话框，确认页面类型是网页后发送；不要沿用“AI生成App应用”的任务标签。
设计一个金融SaaS产品官网，访问者主要想了解功能并预约演示。页面包含：首页、功能、数据展示、解决方案、案例、价格、关于、联系。使用柔和渐变、清晰黑色文字和圆角卡片。桌面首屏标题与财务看板分列；手机端先显示标题与预约按钮，再显示看板。价格卡在窄屏依次排列，表单保留标签与错误提示。暂不连接真实支付，不编造客户评价和经营数据。
视觉描述要服务于业务内容。准备好真实产品功能、价格和联系方式；没有确认的数据先留待补充，避免把AI填入的数字直接用作对外宣传。
第二步：选择设计基础，先看桌面结构
如果任务入口提供设计系统或风格选择，可以选与团队常用组件接近的方向。下图的操作界面展示了Shadcn UI、Ant Design、Material UI、Arco Design与TDesign等选项。选择这些名称有助于表达视觉约束，但仍需检查生成代码是否真正引用团队的组件。
生成后先看内容和顺序：首屏能否说明产品用途，主要操作是否明确，功能与价格是否容易找到。若信息顺序错误，先改结构；不要一开始把时间花在阴影和动效上。
第三步：切换窄屏，按区域检查变化
在预览中切换设备或调整宽度，先检查首屏，再向下滚动到表格、价格和表单。常见问题不一定出现在最窄尺寸，而可能出现在导航刚好放不下、卡片刚好挤成两列的中间宽度。
把问题写成带对象和规则的修改指令：
- “窄屏时将首屏标题、说明、预约按钮放在财务看板之前，其他区块顺序不变。”
- “价格卡改为单列，套餐名称和金额不换成逐字竖排，按钮与卡片等宽。”
- “导航放不下时收纳次要栏目，菜单展开后提供清晰关闭入口。”
- “数据表格只在自己的容器内横向滚动，页面整体不出现左右空白。”
改动列表加载方式时，还应说明返回后是否保留原位置。可以结合分页、加载更多与无限滚动的选择方法，避免只解决卡片排版，却让用户看完详情找不到之前的位置。
第四步：用真实内容替换占位信息
案例区域也是需要核对的重要内容。正式使用前，把产品名、客户案例、比例、服务条款和价格换成已确认信息，再测试最长标题与最复杂的一条数据。不要让短占位文字掩盖布局问题。
特别检查两类“看起来能用”的问题：按钮视觉可点但没有正确结果；表单只做了成功状态，没有说明必填错误和发送失败。它们与网页是否响应式一样影响实际使用。
第五步：查看代码或发布预览，再做实际访问检查
需要交给研发时，查看生成文件、页面组件与资源引用，再说明哪些接口和数据尚未接入。下图展示了代码文件视图；导出格式和入口以本次项目实际提供的选项为准。
浏览器模拟尺寸通过后，还应使用真实手机访问预览。检查字体放大、输入法弹出、菜单开合、按钮点击与横向滑动；不要只依据编辑器中的缩略预览判断。若页面向左右滑出空白，定位超宽元素，常见来源包括固定宽度图片、长文本、表格和绝对定位装饰。
一份可直接交付的适配检查清单
- 宽屏、窄屏和至少一个中间宽度均能阅读主要内容。
- 主要标题、导航和按钮没有逐字换行或遮挡。
- 图片保留正确比例，关键内容没有被裁掉。
- 表格与代码等长内容在自己的容器中处理，不撑宽全页。
- 表单聚焦后仍能看到当前输入和错误提示。
- 菜单关闭后回到原页面位置，用户能继续刚才的任务。
- 实际手机中没有异常横向空白，主要操作可完成。
常见问题
AI已经说“完成响应式适配”，还要手动检查吗？
要看实际页面。生成说明不能代替真实渲染结果，尤其是长内容、表格与中间宽度。直接把发现的问题和预期行为反馈给AI更有效。
所有元素都要在手机上原样保留吗？
核心内容和主要操作应保留，但布局可以调整，次要导航可收纳，复杂表格可以提供局部滚动或重点列。应按任务取舍，不能简单等比例缩小。
