以下是一份整理好的前端AI提示词模板，适用于与AI对话生成代码、设计建议、优化方案等场景。可根据具体需求调整参数和内容：

一、基础功能类提示词模板

1. 生成响应式页面结构
   生成一个响应式网页布局模板，包含顶部导航栏（带LOGO和菜单）、轮播图区域、3列功能卡片区和页脚。使用HTML/CSS（Flexbox/Grid）实现，要求适配移动端。

2. 创建交互组件
   用React/Vue编写一个可复用的模态框组件，要求支持动态内容、遮罩层点击关闭、动画过渡效果，并提供使用示例。

3. CSS样式优化
   为以下HTML结构提供CSS优化方案，要求减少重复代码、使用变量管理颜色，并支持暗黑模式切换： [粘贴代码]

二、AI设计辅助类模板

1. 配色方案生成
   基于主色#2F80ED，生成一套包含5种辅助色的现代风配色方案，给出CSS变量命名建议。

2. UI组件设计
   描述一个包含搜索框+过滤下拉框+排序按钮的组合控件，提供3种不同风格的Sketch/Figma设计建议，适合电商场景使用。

3. 动效建议
   为页面切换过渡设计3种符合Material Design规范的微交互动画，给出CSS关键帧代码示例。

三、复杂功能实现类模板

1. **API对接功能**
   任务：用JavaScript实现天气API数据获取与展示
   要求：
   - 使用OpenWeatherMap API
   - 显示城市、温度、天气图标
   - 错误处理机制
   - 每小时自动刷新
   示例输出格式：
   {
     city: "北京",
     temp: "22℃",
     icon: "☀️"
   }

2. **状态管理方案**
   技术栈：Vue3 + Pinia
   需求：实现用户登录状态全局管理
   包含功能：
   - Token存储/刷新
   - 自动跳转登录页
   - 多角色权限控制
   - 持久化存储

四、性能优化类模板

1. 加载速度优化
   分析以下网站性能瓶颈（Lighthouse评分65分），提出10条前端优化建议：[提供URL或关键指标]

2. 打包配置优化
   `为基于Webpack的React项目提供构建优化方案，要求：

   • 分包策略
   • 压缩效率提升
   • 开发环境热更新加速`

3. 内存泄漏检测
   `编写JavaScript内存泄漏检测方案，包含：

   • 常见场景示例
   • Chrome DevTools排查步骤
   • 预防编码规范`

五、智能生成类模板

1. 文档自动化
   `为以下React组件生成Markdown格式文档：
   [粘贴组件代码]
   要求包含：

   • Props说明表
   • 使用示例
   • 注意事项`

2. 测试用例生成
   为以下工具函数生成Jest单元测试用例： function formatDate(isoString) {...}

3. 流程图生成
   `将用户登录流程转化为Mermaid流程图，包含：

   • 正常登录路径
   • 密码错误处理
   • 第三方登录分支`

六、调试排错类模板

[错误场景描述]
在Next.js项目中使用动态路由时出现404错误

[已尝试方案]
- 检查文件命名规范
- 重启开发服务器

[相关代码片段]
pages/post/[id].js:
export default function PostPage() {...}

[请求帮助]
请分析可能原因并提供解决方案

使用技巧

1. 结构化描述：角色 + 任务 + 具体要求 + 输出格式
2. 渐进式提问：先获取基础实现，再追加优化需求
3. 示例加持：提供代码片段/设计稿链接等参考
4. 技术栈限定：明确指定框架/工具链版本

可根据实际需求组合使用多个模板，通过迭代对话逐步完善输出结果。建议保存常用模板为代码片段，配合AI工具快速调用。