跳到主要内容

前端工程师ChatGPT提示词2026｜Web开发必备Prompt模板

最后更新：2025年12月 | 适用于ChatGPT、Claude、DeepSeek等AI模型

为什么前端开发者需要专业的Prompt？​

前端开发涉及HTML、CSS、JavaScript、框架、工程化等多个领域。使用专业的Prompt可以让ChatGPT提供更精准的代码和最佳实践建议。

使用本页Prompt的优势：

  • 快速生成React/Vue组件代码
  • 解决复杂的CSS布局问题
  • 获得性能优化的专业建议
  • 学习前端最佳实践

核心角色Prompt（复制即用）​

你现在是一名拥有10年经验的资深前端架构师，你：
- 精通React、Vue、Angular等主流框架及其生态
- 深入理解JavaScript/TypeScript、HTML5、CSS3
- 熟悉Webpack、Vite、Next.js、Nuxt.js等构建工具
- 有丰富的大型前端项目架构和性能优化经验

请以这个专业身份回答问题。回答时：
1. 提供可运行的代码示例
2. 解释实现原理和最佳实践
3. 考虑浏览器兼容性和性能
4. 指出潜在问题和改进方向

一、React开发 ⚛️​

组件开发​

场景Prompt模板
组件实现请用React + TypeScript实现一个[可搜索下拉选择器]组件，支持[多选、异步加载]
Hooks使用请用React Hooks实现[防抖搜索]功能，包含loading状态和错误处理
状态管理请用Zustand/Redux Toolkit实现[购物车]的状态管理，包含增删改操作

性能优化​

场景Prompt模板
渲染优化这个React组件存在性能问题，请分析并优化：[组件代码]
代码分割请为这个React项目设计代码分割方案，路由结构：[路由配置]
虚拟列表请实现一个虚拟滚动列表组件，数据量[10万条]，单项高度[固定/动态]

二、Vue开发 🟢​

组件开发​

场景Prompt模板
组合式API请用Vue 3 Composition API实现一个[表单验证]的composable
组件通信请实现父子组件双向绑定，子组件是[自定义输入框]
插槽使用请实现一个支持[具名插槽和作用域插槽]的表格组件

Pinia状态管理​

场景Prompt模板
Store设计请用Pinia设计[用户认证]模块，包含登录、登出、token刷新
持久化请为Pinia store添加localStorage持久化，只持久化[指定字段]

三、CSS布局与样式 🎨​

布局实现​

场景Prompt模板
Flexbox请用Flexbox实现[圣杯布局]：左右固定宽度，中间自适应
Grid请用CSS Grid实现[瀑布流布局]，响应式适配手机和桌面
居中方案请给出5种CSS水平垂直居中的方案，并说明适用场景

响应式设计​

场景Prompt模板
媒体查询请为这个组件添加响应式样式，断点：移动端(小于768px)、平板、桌面
Tailwind请用Tailwind CSS重写这段样式，并添加暗色模式支持：[CSS代码]
移动端适配请实现移动端1px边框和安全区域适配（底部横条）

动画效果​

场景Prompt模板
CSS动画请用CSS实现[卡片翻转]动画效果，支持hover触发
过渡效果请为列表添加[增删时的过渡动画]，使用Vue Transition
性能优化这个动画卡顿，请优化：[动画代码]，使用transform和will-change

四、JavaScript/TypeScript 📜​

代码实现​

场景Prompt模板
工具函数请实现一个[深拷贝]函数，处理循环引用和特殊类型
异步处理请实现一个[并发限制的请求队列]，最多同时5个请求
设计模式请用TypeScript实现[发布订阅模式]，支持once和命名空间

TypeScript​

场景Prompt模板
类型定义请为这个API响应定义TypeScript类型，支持泛型：[API示例]
类型体操请实现一个工具类型[DeepPartial]，递归将所有属性变为可选
类型推断这段代码的类型推断不正确，请修复：[代码]

五、性能优化 ⚡​

加载优化​

场景Prompt模板
首屏优化请分析并优化这个页面的首屏加载速度，当前LCP是[3秒]：[页面描述]
资源优化请给出前端资源优化方案：图片、字体、JS、CSS
懒加载请实现图片懒加载组件，支持Intersection Observer和placeholder

运行时优化​

场景Prompt模板
防抖节流请实现带取消功能的防抖和节流函数，用TypeScript
内存泄漏这个组件可能存在内存泄漏，请分析：[组件代码]
Web Workers请用Web Worker实现[大数据排序]，避免阻塞主线程

六、工程化与工具 🛠️​

构建配置​

场景Prompt模板
Vite配置请配置Vite：路径别名、环境变量、代理、构建优化
Webpack请为这个Webpack配置添加[模块联邦]支持
ESLint请配置ESLint + Prettier，规则：[Airbnb/Standard]，支持TypeScript

测试​

场景Prompt模板
单元测试请为这个React组件编写Jest + RTL测试：[组件代码]
E2E测试请用Playwright编写[登录流程]的E2E测试
测试覆盖这个工具函数的测试用例不完整，请补充边界情况：[函数和测试]

使用技巧​

  1. 说明框架版本：React 18、Vue 3、TypeScript 5等
  2. 提供上下文：项目背景、已有代码、具体需求
  3. 要求最佳实践：让AI解释为什么这样写
  4. 迭代优化：根据实际运行结果继续追问

相关资源​