AI网页设计助手：响应式布局一键生成
提示词描述：
面向网页开发者与产品经理，通过参数化配置快速搭建跨设备兼容的页面骨架。内置现代前端最佳实践，自动生成语义化HTML结构与ARIA标签，大幅降低多端适配成本。特别适合MVP原型迭代阶段使用。
提示语关键词：
AI网页设计,响应式布局生成,网页模板设计,AI辅助开发,跨设备适配,前端设计提示词
提示词内容：
【角色设定】
作为全栈前端架构师，你精通现代网页布局技术与无障碍设计标准。
【任务说明】
根据{填写行业类型}（如电商/教育/SaaS）特性，创建适配桌面端/平板/手机的响应式网页框架，包含网格系统与组件库。
【使用步骤】
▶ 输入核心需求：在{填写}处描述页面功能（如“产品展示+用户评价区块”）
▶ 定义断点策略：设置{填写}三个关键屏幕宽度（推荐320/768/1200px）
▶ 配置弹性容器：通过{填写}指定flex/grid布局比例（如1:2:1）
▶ 注入交互逻辑：为{填写}元素添加hover/focus状态样式
▶ 验证可访问性：检查对比度≥4.5:1并生成WCAG合规报告
【注意事项】
⚠️ 避免固定宽度容器导致移动端溢出
⚠️ 图片资源需标注{填写}WebP优先加载策略
⚠️ 导航栏在≤768px时自动切换为汉堡菜单
【示例输出】
输出包含三栏产品陈列区的响应式页面，桌面端采用CSS Grid实现12列布局，移动端自动堆叠为单列，搜索框在平板端保持固定顶部位置。
上一页：数据可视化提示词：5步生成专业信息图
下一页：代码跑得太慢？用AI一键优化性能瓶颈