AI生成UI怎么做移动端适配？响应式布局注意事项

同一张预约页，AI 生成了桌面端看着很从容，到了手机上却不能只是等比例缩小。门店照片、地址、营业时间、可预约时段和“立即预约验光”都要留下，空间却少了一大半。先决定用户在手机上要完成什么：找到门店、确认时间、选中时段，然后进入预约。

，比反复要求AI“再紧凑一点”更有效果。

，桌面版左侧是门店照片，右侧放上海旗舰店的地址、营业时间、电话、时段和预约按钮；顶部还能切换城市。它的响应式布局的移动版，就把照片移到信息前面，导航收为图标和菜单，六个时段由一行改成多行，预约按钮仍跟在时段之后。内容并没有简单删掉，阅读顺序变了。

用户打开这页，多半是想知道门店在哪儿、今天还有没有空位。桌面版的城市切换、门店图片和预约信息可以并排铺开；手机上若照搬，地址会被挤成很多行，时段按钮也可能小到难点。因此移动版让信息单列排布，先用照片确认门店，再看名称、地址、营业时间和时段。

这里有个细节，移动版首屏先出现大图，预约时段要往下滑才看得到。照片能帮助识别门店，但若页面流量主要来自“立即预约”的入口，用户更关心可选时间，图片高度就可以再收一点，或让门店名称与最早可约时段更早露出。

在Paico里做网站或网页设计，生成结果自带响应式布局，可以先得到桌面和移动端的结构，再在可编辑设计稿中调整。如果是专门做不同端的布局，就要说得更清楚一些。提示词里最好别只写“做一个响应式预约页”，而是

：桌面端门店图片与预约信息左右排列；移动端改为上下排列；地址、营业时间和电话不省略；时段按钮允许换行，选中状态保持醒目；预约按钮跟随时段列表，不要被长地址推得太远。

这样写的重点是业务关系，桌面端六个时段横向排开，移动端变成四个加两个，蓝色选中态没有丢。按钮文案和颜色也延续下来。看到这些变化，才能说布局确实随宽度重排了，而不是把桌面画面缩小后塞进手机框。

。生成后检查桌面和手机的蓝色主按钮、时段选中态、图标和文字层级是否一致。Paico可以把生成稿继续编辑，局部不合适时直接调整，不必把整页重新生成。

AI 生成响应式布局之后，不光用肉眼去看界面，更要检查这些：

最后，把画布拖到平板或窄桌面尺寸，看看照片与信息何时从并排变为上下排列，导航何时收起，时段按钮换行后是否留有足够间距。断点应由内容撑不下的时刻决定，不必先套一个固定数字。

交给开发时，写明布局变化、隐藏与保留的内容、按钮状态，以及预约流程。图里出现的门店地址和电话也要当作示例内容核对，别未经确认就当成真实营业信息上线。AI 已经帮我们把响应式初稿搭起来了，但最后这轮检查才决定它能否真正服务预约任务。