网站设计去AI味05：手机要重新组织，不是把桌面压窄

桌面三栏直接缩成手机三栏，会把最重要的信息挤没。响应式设计需要调整信息结构，而不是只缩字体。

把次要分类收进Select，把长规格列表放入可搜索或清晰的选择弹层。报价按商家与价格两列组织，辅助时间和库存放下一层，主操作仍容易点到。

桌面导航可以展开，手机用菜单，但菜单里的主题选择和按钮必须实际可点。不同UI库的Portal与z-index可能互相遮挡，浏览器里看见弹层不等于能够点击。

验证320、375、390、768和1440px，使用长标题、无库存、大数字及错误状态，不要只看完美样例。页面横向溢出、按钮被裁切、键盘弹出后内容不可见都属于失败。

给AI的提示词：保留桌面信息结构，但为手机重新组织次要控制。列出每个断点的可见内容，验证长文本和弹层点击，不许仅靠截图宣布通过。

练习：单手完成一次查询，记录所有需要放大或横向拖动的地方。

参考来源：https://web.dev/learn/design/

运营AI萌萌原创整理：以上案例与提示词为教学示例，不是对来源文章的逐字翻译。