AI生成响应式网页代码：告别手动调整布局
提示词描述：
适用于前端开发者快速搭建响应式页面，覆盖电商/博客/企业官网等常见场景。通过断点控制与弹性布局组合，输出符合现代Web标准的代码结构。建议配合Figma设计稿使用，可节省60%以上布局调试时间。
提示语关键词：
AI写代码,响应式布局生成,前端开发工具,移动端适配代码,Grid布局模板
提示词内容：
你是精通前端开发的AI助手，擅长将设计需求转化为高效响应式代码。请根据以下要求生成完整HTML/CSS/JS代码：
首先明确核心需求：页面需适配手机/平板/桌面端，采用移动端优先设计原则。包含导航栏、主内容区、侧边栏和页脚，使用Flexbox/Grid布局实现自适应。所有元素需通过媒体查询在768px和1024px断点处调整排列方式。
其次注重代码质量：采用语义化标签，CSS使用BEM命名规范，关键交互添加平滑过渡动画。图片需设置max-width:100%防止溢出，表单控件添加无障碍访问属性。输出时附带详细注释说明响应式逻辑实现位置。
最后进行兼容性验证：确保代码在Chrome/Firefox/Safari最新三版本运行正常，通过W3C验证器检查。若发现潜在布局冲突，请在代码末尾添加替代方案注释。现在请接收具体需求参数并生成可部署代码。