以下是20个经过实战验证的前端场景Prompt模板，涵盖表单、组件、工具函数等高频场景，可直接复制使用：

---

表单场景

1. 登录表单生成

作为资深前端工程师，请用Vue3+ElementPlus实现：
1. 响应式登录表单（用户名+密码）
2. 用户名实时校验（5-20位字母数字）
3. 密码强度检测（弱/中/强三级）
4. 防重复提交机制（按钮禁用+loading状态）
要求：
- 使用VeeValidate进行表单验证
- 适配移动端（屏幕<768px时垂直布局）
- 通过ESLint standard规则校验

2. 动态表单生成器

用React18+TypeScript实现动态表单配置：
1. 根据JSON配置生成表单项（输入框/下拉框/日期选择）
2. 支持条件显示（如选择"其他"时显示额外输入框）
3. 数据收集格式：{ [fieldName]: string | number }
约束：
- 使用Ant Design v5组件
- 包含表单数据缓存功能（页面刷新不丢失）
- 严格类型检查（禁用any）

---

表格场景

3. 分页表格生成

作为前端架构师，请用Vue3+TypeScript实现：
1. 带分页的用户数据表格（列：ID/姓名/注册时间）
2. 支持按姓名搜索（防抖500ms）
3. 表格行点击展开详情面板
技术约束：
- 使用Naive UI组件库
- 接口模拟使用Mockjs
- 分页器支持每页10/20/50条选择

4. 可编辑表格

用React18+Ant Design实现可编辑表格：
1. 双击单元格进入编辑模式
2. 支持数字输入验证（最小值/最大值）
3. 自动保存修改到本地IndexedDB
特殊要求：
- 使用immer处理不可变数据
- 键盘导航支持（方向键切换单元格）
- 单元测试覆盖率达80%

---

可视化场景

5. ECharts仪表盘

使用Vue3+ECharts 5生成实时监控仪表盘：
1. 折线图显示CPU/内存使用率
2. 饼图展示磁盘空间分布
3. 数据每10秒通过WebSocket更新
要求：
- 响应式布局（PC/移动端适配）
- 图表颜色遵循公司VI规范（主色#1890ff）
- 内存优化（避免重复实例化）

6. 地图可视化

用React+Mapbox GL实现疫情数据地图：
1. 根据GeoJSON数据渲染区域颜色深浅
2. 悬浮显示该地区详细数据
3. 时间轴控件动态播放传播过程
约束：
- 使用Web Worker处理数据解析
- 首次加载体积不超过500KB
- 支持深色/浅色主题切换

---

工程化场景

7. Webpack配置生成

作为构建专家，生成Webpack5配置：
1. 支持React18+TypeScript
2. 代码分割策略（按路由分块）
3. 生产环境优化（压缩/PurgeCSS）
4. 开发环境HRM+SourceMap
特殊要求：
- 配置需通过webpack-bundle-analyzer验证
- 编译时间控制在30秒内
- 输出ES2017+代码

8. 微前端配置

生成基于qiankun的微前端主应用配置：
1. 子应用动态加载（React+Vue双技术栈）
2. 全局状态共享（使用redux）
3. 子应用间通信方案
4. 公共依赖共享（react/react-dom）
约束：
- 沙箱隔离严格模式
- 性能监控集成（FP/FCP指标）
- 兼容IE11

---

工具函数

9. 防抖/节流函数

用TypeScript实现高阶工具函数：
1. 防抖函数（debounce）支持立即执行模式
2. 节流函数（throttle）支持尾调用
3. 完善的类型定义（泛型支持）
测试要求：
- Jest单元测试覆盖所有边界条件
- 包含使用示例（搜索框/滚动事件）

10. 文件上传组件

用React18+axios实现文件上传组件：
1. 拖拽上传+传统选择文件
2. 分片上传（每片2MB）
3. 进度条显示（整体+分片）
4. 上传失败自动重试（最多3次）
约束：
- 使用react-dropzone库
- 支持文件类型/大小校验
- 内存管理（释放临时对象）

---

性能优化

11. 首屏加载优化

生成Vue3项目首屏优化方案：
1. 路由级代码分割
2. 关键CSS提取
3. 预加载重要资源
4. 图片懒加载策略
验证指标：
- Lighthouse评分>90
- FCP<1s
- TTI<2s

12. Web Workers实战

用JavaScript实现Web Workers优化方案：
1. 将图像处理（滤镜应用）迁移到Worker
2. 主线程与Worker通信协议
3. 错误处理与降级方案
要求：
- 包含性能对比数据
- 兼容现代浏览器
- 内存泄漏防护机制

---

框架高级用法

13. React状态管理

用React18+Zustand实现全局状态管理：
1. 用户登录状态管理
2. 购物车数据持久化
3. 跨组件更新优化（浅比较）
约束：
- 使用immer处理嵌套对象
- 开发调试工具集成
- 单元测试覆盖核心逻辑

14. Vue插件开发

开发Vue3图片懒加载指令：
1. 基于Intersection Observer实现
2. 支持占位图显示
3. 加载失败显示默认图片
要求：
- 按需加载支持
- 指令参数配置（threshold等）
- 性能优化（避免重复监听）

---

创新场景

15. AI代码审查

生成基于ESLint的AI审查规则：
1. 检测潜在内存泄漏（定时器未清除）
2. 识别不安全的方法调用（innerHTML）
3. 复杂条件判断简化建议
输出要求：
- 可集成到CI/CD流程
- 提供自动修复建议
- 误报率<5%

16. 低代码平台扩展

为低代码平台开发自定义组件：
1. 生成可配置的轮播图组件
2. 支持JSON配置（图片列表/切换速度）
3. 暴露生命周期钩子
约束：
- 框架无关（Web Components实现）
- 样式隔离（Shadow DOM）
- 文档自动生成（TypeDoc）

---

移动端专项

17. H5活动页

用Vue3+Vant实现秒杀活动页：
1. 倒计时组件（天/时/分/秒）
2. 滚动商品列表（虚拟滚动）
3. 微信分享功能集成
优化要求：
- 首屏加载<800ms
- 点击延迟处理（fastclick）
- 兼容iOS/Android主流机型

18. PWA应用

生成React PWA应用基础框架：
1. Service Worker离线缓存策略
2. 添加到主屏幕引导
3. 网络状态检测
4. 本地数据同步机制
指标要求：
- 离线可用核心功能
- Lighthouse PWA评分>90
- 更新推送通知

---

前沿技术

19. WebAssembly集成

用Rust+React实现图像处理模块：
1. 编写Rust实现的滤镜算法
2. 编译为WebAssembly
3. React组件调用WASM模块
约束：
- 内存管理安全
- 性能对比原生JS实现
- 构建流程自动化

20. SSR优化

为Nuxt3项目生成SSR优化方案：
1. 组件级数据预取
2. 静态页面生成策略
3. 客户端激活优化
4. 缓存策略（Redis+CDN）
验证指标：
- TTFB<300ms
- 首屏数据请求减少50%
- SEO收录提升30%

---

使用技巧：

1. 参数替换：将技术栈（如Vue3→Svelte）和UI库（Ant Design→Element Plus）替换为项目实际使用
2. 约束增强：根据项目需要添加额外限制（如"兼容IE11"、“遵循WCAG标准”）
3. 结果迭代：基于首次生成结果补充Prompt（如"优化上述代码的内存管理"）