跳至主要内容

前端工程師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. 迭代最佳化：根據實際執行結果繼續追問

相關資源​