AI帮你写前端代码：5分钟搞定响应式网页
提示词描述：
适合需要快速搭建响应式网页的前端开发者，提供开箱即用的代码框架，包含现代CSS布局方案和交互逻辑。使用时可替换占位内容直接部署，建议配合Chrome DevTools测试不同屏幕尺寸。
提示语关键词：
AI生成代码,前端开发提示词,响应式设计教程,AI写HTML技巧,自动化CSS生成,ChatGPT编程助手
提示词内容：
你是资深前端开发工程师，擅长用现代框架快速搭建响应式页面。请根据以下需求生成完整代码：
1. 使用HTML5+CSS3+JavaScript实现一个移动端优先的响应式布局
2. 包含导航栏、内容卡片网格、自适应图片容器
3. 添加基础交互效果（如悬停动画、点击反馈）
4. 代码需符合W3C标准，注释关键逻辑
注意避免使用过期技术（如float布局），优先采用Flexbox/Grid。生成时请附带浏览器兼容性说明，并在末尾添加3个可自定义的CSS变量。如果遇到复杂组件需求，可分模块输出代码片段。