誰(shuí)說(shuō) AI 只能干重復(fù)活？用對(duì)了提示詞，ChatGPT 能成為你的技術(shù)合伙人。直接上 50 個(gè)實(shí)戰(zhàn)場(chǎng)景，每個(gè)都附可復(fù)制的中文提示詞。

一、代碼生成：從零到整，AI 寫完你收工

（一）語(yǔ)義化 HTML + CSS 組件

提示詞模板：

用 [框架] 生成一個(gè)語(yǔ)義化的 [組件名稱]，包含 [組件元素]，布局為 [布局方式]

示例：

用 Tailwind CSS 生成一個(gè)語(yǔ)義化的“聯(lián)系支持”表單，包含用戶姓名、郵箱、問題類型和留言，布局為垂直堆疊的卡片式。

效果：

<div class="max-w-md mx-auto bg-white p-6 rounded-lg shadow-md">
  <form>
    <div class="mb-4">
      <label class="block text-gray-700 font-bold mb-2">姓名</label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
    </div>
    <!-- 郵箱、問題類型、留言類似 -->
  </form>
</div>

（二）函數(shù)邏輯

提示詞模板：

寫一個(gè) [語(yǔ)言] 函數(shù)，輸入 [輸入類型]，返回 [輸出類型]

示例：

寫一個(gè) JavaScript 函數(shù)，輸入完整姓名，返回頭像字母。

效果：

function getAvatarLetters(fullName) {
  return fullName.split(' ').map(name => name[0].toUpperCase()).join('');
}
console.log(getAvatarLetters("張三")); // 輸出 ZS

（三）API 接口

提示詞模板：

用 [框架] 寫一個(gè) API，功能是 [功能描述]，用 [數(shù)據(jù)庫(kù)] 存儲(chǔ)數(shù)據(jù)

示例：

用 Express.js 寫一個(gè) API，功能是獲取當(dāng)前用戶資料，用 MongoDB 存儲(chǔ)數(shù)據(jù)。

效果：

const express = require('express');
const router = express.Router();
const mongoose = require('mongoose');


// 連接 MongoDB
mongoose.connect('mongodb://localhost:27017/userDB');


// 定義用戶模型
const User = mongoose.model('User', new mongoose.Schema({
  name: String,
  email: String
}));


// 獲取用戶資料接口
router.get('/profile', async (req, res) => {
  try {
    const user = await User.findById(req.userId);
    res.json(user);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});


module.exports = router;

二、代碼補(bǔ)全：AI 幫你“寫一半，猜一半”

提示詞：

補(bǔ)全以下代碼：

示例：

const animals = ["dogs", "cats", "birds", "fish"];
let animal = animals[Math.floor(Math.random() * animals.length)];


switch (animal) {
  case "dogs":
    console.log("Dogs are wonderful companions...");
    break;
  // 需要補(bǔ)全 cats、birds、fish 的 case
}

AI 補(bǔ)全效果：

  case "cats":
    console.log("Cats are graceful and independent...");
    break;
  case "birds":
    console.log("Birds bring color and song...");
    break;
  case "fish":
    console.log("Fish create a peaceful underwater world...");
    break;

三、代碼轉(zhuǎn)換：用 AI 實(shí)現(xiàn)跨語(yǔ)言“翻譯”

（一）語(yǔ)言互轉(zhuǎn)

提示詞模板：

把以下代碼從 [源語(yǔ)言/框架] 轉(zhuǎn)換為 [目標(biāo)語(yǔ)言/框架]

示例：

把以下代碼從 JavaScript 轉(zhuǎn)換為 TypeScript：

function nonRepeatingWords(str1, str2) {
  const map = new Map();
  const res = [];
  const str = str1 + " " + str2;
  str.split(" ").forEach(word => {
    map.has(word) ? map.set(word, map.get(word) + 1) : map.set(word, 1);
  });
  for (let [key, val] of map) {
    if (val === 1) res.push(key);
  }
  return res;
}

AI 轉(zhuǎn)換效果：

function nonRepeatingWords(str1: string, str2: string): string[] {
  const map = new Map<string, number>();
  const res: string[] = [];
  const str = str1 + " " + str2;
  str.split(" ").forEach(word => {
    map.has(word) ? map.set(word, map.get(word)! + 1) : map.set(word, 1);
  });
  map.forEach((val, key) => {
    if (val === 1) res.push(key);
  });
  return res;
}

（二）CSS 框架互轉(zhuǎn)

提示詞模板：

把以下代碼從 [源 CSS 框架] 轉(zhuǎn)換為 [目標(biāo) CSS 框架]

示例：

把以下代碼從 Bootstrap 轉(zhuǎn)換為 Tailwind CSS：

<div class="container">
  <div class="row">
    <div class="col-md-6">內(nèi)容</div>
  </div>
</div>

AI 轉(zhuǎn)換效果：

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  <div class="flex flex-wrap -mx-4">
    <div class="w-full md:w-1/2 px-4">內(nèi)容</div>
  </div>
</div>

四、代碼解釋：讓 AI 成為你的“代碼翻譯官”

提示詞模板：

解釋以下 [語(yǔ)言] 代碼：

示例：

const regex = /^[A-Za-z0–9._%+-]+@[A-Za-z0–9.-]+\.[A-Za-z]{2,}$/;

AI 解釋效果：

這是一段 JavaScript 正則表達(dá)式，用于驗(yàn)證電子郵件地址格式。具體規(guī)則如下：
- 允許字母（大小寫）、數(shù)字、點(diǎn)號(hào)、下劃線、百分號(hào)、加號(hào)和短橫線作為用戶名部分
- 必須包含 @ 符號(hào)
- 域名部分允許字母（大小寫）、數(shù)字和短橫線
- 最后必須有一個(gè)點(diǎn)號(hào)，后面跟至少兩個(gè)字母（頂級(jí)域名）

五、代碼審查：讓 AI 幫你揪出“隱形炸彈”

提示詞模板：

審查以下 [語(yǔ)言] 代碼，找出代碼味道并提改進(jìn)建議

示例：

function processOrder(order) {
  if (order.total > 1000) {
    order.status = "完成";
    sendEmail(order.user, "您的訂單已處理");
  } else {
    order.status = "待審核";
    sendEmail(order.manager, "新訂單需要審核");
  }
  return order;
}

AI 審查效果：

1. **硬編碼問題**：1000 的金額閾值直接寫在代碼里，建議抽取為配置項(xiàng)。
2. **職責(zé)過(guò)載**：函數(shù)既處理訂單狀態(tài)又發(fā)送郵件，建議拆分為 updateOrderStatus 和 notifyOrderEvent。
3. **錯(cuò)誤處理缺失**：sendEmail 如果失敗沒有回滾邏輯，建議加入 try-catch 并記錄日志。

六、代碼重構(gòu)：用 AI 讓“老舊代碼”煥然一新

（一）提升錯(cuò)誤處理

提示詞模板：

重構(gòu)以下 [語(yǔ)言] 代碼，優(yōu)化錯(cuò)誤處理和容錯(cuò)能力

示例：

function fetchData(url) {
  return fetch(url).then(res => res.json());
}

AI 重構(gòu)效果：

async function fetchData(url) {
  try {
    const res = await fetch(url);
    if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
    return await res.json();
  } catch (err) {
    console.error("Fetch failed:", err);
    Sentry.captureException(err); // 假設(shè)已集成錯(cuò)誤監(jiān)控
    throw err;
  }
}

（二）提升響應(yīng)式設(shè)計(jì)

提示詞模板：

重構(gòu)以下組件代碼，使其適配移動(dòng)、平板和桌面設(shè)備

示例：

<div class="container">
  <div class="product-grid">
    <div class="product-card">商品 1</div>
    <div class="product-card">商品 2</div>
  </div>
</div>

AI 重構(gòu)效果：

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
    <div class="bg-white p-4 rounded-lg shadow-sm">商品 1</div>
    <div class="bg-white p-4 rounded-lg shadow-sm">商品 2</div>
  </div>
</div>

七、Bug 檢測(cè)與修復(fù)：讓 AI 成為你的“除蟲雷達(dá)”

提示詞模板：

以下代碼報(bào)錯(cuò) [錯(cuò)誤信息]，幫我修復(fù)：

示例：

以下代碼報(bào)錯(cuò) "Uncaught TypeError: Cannot read properties of undefined (reading 'name')"，幫我修復(fù)：

function greetUser(user) {
  console.log(`Hello, ${user.name}!`);
}

AI 修復(fù)效果：

function greetUser(user) {
  if (!user || typeof user.name === "undefined") {
    console.error("Invalid user object:", user);
    return "Hello, Guest!";
  }
  return `Hello, ${user.name}!`;
}

八、系統(tǒng)設(shè)計(jì)：AI 幫你畫出“技術(shù)藍(lán)圖”

提示詞模板：

假設(shè)你是一個(gè)系統(tǒng)設(shè)計(jì)專家，用 [技術(shù)棧] 設(shè)計(jì)一個(gè) [系統(tǒng)名稱]

示例：

假設(shè)你是一個(gè)系統(tǒng)設(shè)計(jì)專家，用 Next.js 和 Firebase 設(shè)計(jì)一個(gè)酒店預(yù)訂系統(tǒng)。

AI 設(shè)計(jì)效果：

### 系統(tǒng)架構(gòu)概覽
1. **前端**：Next.js 負(fù)責(zé)頁(yè)面渲染和路由管理，采用 Server Components 提升首屏速度。
2. **后端**：Firebase Functions 提供無(wú)服務(wù)器 API 端點(diǎn)，處理預(yù)訂邏輯和數(shù)據(jù)驗(yàn)證。
3. **數(shù)據(jù)庫(kù)**：Firebase Firestore 存儲(chǔ)酒店、房間、用戶和預(yù)訂數(shù)據(jù)，啟用 indexing 提升查詢效率。
4. **認(rèn)證**：Firebase Auth 管理用戶登錄狀態(tài)，集成第三方登錄（Google、Apple）。
5. **支付**：Stripe API 集成，通過(guò) Firebase Functions 調(diào)用完成支付流程。
6. **部署**：Vercel 部署 Next.js 前端，F(xiàn)irebase Hosting 靜態(tài)資源全球加速。


### 數(shù)據(jù)流
1. 用戶瀏覽酒店列表 → Next.js 從 Firestore 獲取數(shù)據(jù)并緩存。
2. 用戶提交預(yù)訂 → Firebase Function 驗(yàn)證庫(kù)存并扣減房間數(shù)量。
3. 支付成功 → 訂單狀態(tài)更新為“已確認(rèn)”，觸發(fā)郵件通知。

九、SEO 優(yōu)化：AI 幫你寫出“搜索引擎友好”的代碼

提示詞模板：

為 [網(wǎng)站類型] 生成一個(gè)優(yōu)化 SEO 的 <head> 標(biāo)簽

示例：

為運(yùn)動(dòng)員社交網(wǎng)站生成一個(gè)優(yōu)化 SEO 的 <head> 標(biāo)簽

AI 生成效果：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>運(yùn)動(dòng)伙伴 - 連接全球運(yùn)動(dòng)員的社交網(wǎng)絡(luò)</title>
  <meta name="description" content="發(fā)現(xiàn) nearby 運(yùn)動(dòng)員，組隊(duì)跑步、騎行或健身，分享訓(xùn)練心得和賽事經(jīng)驗(yàn)。">
  <meta name="keywords" content="運(yùn)動(dòng)員社交, 運(yùn)動(dòng)組隊(duì), 健身伙伴, 跑步俱樂部">
  <meta property="og:title" content="運(yùn)動(dòng)伙伴 - 連接全球運(yùn)動(dòng)員">
  <meta property="og:description" content="加入 100,000+ 運(yùn)動(dòng)員的社交網(wǎng)絡(luò)，找到你的運(yùn)動(dòng)伙伴">
  <meta property="og:image" content="https://example.com/og-image.jpg">
  <link rel="canonical" >
</head>

十、測(cè)試：AI 幫你寫出“bulletproof”測(cè)試用例

提示詞模板：

為以下 [框架] 組件寫單元測(cè)試，使用 [測(cè)試框架]

示例：

為以下 React 組件寫單元測(cè)試，使用 Jest 和 React Testing Library：

function LoginForm({ onSubmit }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');


  return (
    <form onSubmit={() => onSubmit({ email, password })}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
      <button type="submit">登錄</button>
    </form>
  );
}

AI 生成效果：

import { render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import LoginForm from './LoginForm';


test('提交表單時(shí)觸發(fā) onSubmit 回調(diào)', async () => {
  const mockOnSubmit = jest.fn();
  render(<LoginForm onSubmit={mockOnSubmit} />);


  await userEvent.type(screen.getByLabelText(/email/i), 'test@example.com');
  await userEvent.type(screen.getByLabelText(/password/i), 'password123');
  await userEvent.click(screen.getByRole('button', { name: /登錄/i }));


  expect(mockOnSubmit).toHaveBeenCalledWith({
    email: 'test@example.com',
    password: 'password123'
  });
});

十一、文檔：讓代碼“自述其意”

提示詞模板：

為以下代碼寫注釋：

示例：

function calculateDiscount(price, discountPercentage) {
  return price * (1 - discountPercentage / 100);
}

AI 生成效果：

/**
 * 計(jì)算折扣后的價(jià)格
 * @param {number} price - 原價(jià)
 * @param {number} discountPercentage - 折扣百分比（例如 20 表示 8 折）
 * @returns {number} 折扣后的價(jià)格
 * @example calculateDiscount(100, 20) // 返回 80
 */
function calculateDiscount(price, discountPercentage) {
  return price * (1 - discountPercentage / 100);
}

十二、Shell 命令：用 AI 替代“人肉百度”

提示詞模板：

寫一個(gè)命令 [需求描述]

示例：

寫一個(gè)命令 刪除 logs 文件夾下所有 .log 文件

AI 生成效果：

find ./logs -type f -name "*.log" -exec rm -f {} \;

十三、正則表達(dá)式：讓 AI 成為你的“模式匹配專家”

提示詞模板：

生成一個(gè)匹配 [文本模式] 的正則表達(dá)式

示例：

生成一個(gè)匹配手機(jī)號(hào)碼（13/15/18開頭，共11位）的正則表達(dá)式

AI 生成效果：

const regex = /^(13|15|18)\d{9}$/;

十四、內(nèi)容生成：用 AI 寫出“有溫度”的文案

提示詞模板：

為 [網(wǎng)站類型] 生成 [內(nèi)容類型]，包含 [關(guān)鍵信息]

示例：

為電商服裝網(wǎng)站生成 5 個(gè)產(chǎn)品示例的 JSON 數(shù)據(jù)

AI 生成效果：

[
  {
    "id": 1,
    "name": "休閑棉麻襯衫",
    "price": 199,
    "color": "淺藍(lán)",
    "size": ["S", "M", "L"],
    "imageUrl": "https://example.com/image1.jpg"
  },
  {
    "id": 2,
    "name": "修身牛仔褲",
    "price": 299,
    "color": "深藍(lán)",
    "size": ["28", "29", "30"],
    "imageUrl": "https://example.com/image2.jpg"
  }
]

十五、簡(jiǎn)歷與求職信：讓 AI 成為你的“職業(yè)包裝師”

提示詞模板：

根據(jù)我的簡(jiǎn)歷，寫一份申請(qǐng) [職位名稱] 的求職信，語(yǔ)氣 [風(fēng)格]

示例：

根據(jù)我的簡(jiǎn)歷，寫一份申請(qǐng) React 前端開發(fā)工程師的求職信，語(yǔ)氣專業(yè)但不失親和力。

AI 生成效果：

尊敬的招聘經(jīng)理：


您好！我是一名熱愛前端開發(fā)的工程師，附上我的簡(jiǎn)歷供您審閱。


在過(guò)去 3 年中，我主導(dǎo)了多個(gè)中大型 React 項(xiàng)目，熟練運(yùn)用 Hooks、Context API 和 Redux 管理狀態(tài)。在 [公司名稱]，我通過(guò)引入代碼分割和懶加載機(jī)制，將首屏加載時(shí)間從 4.2s 優(yōu)化到 1.8s，提升轉(zhuǎn)化率 15%。


我對(duì)您的職位描述中提到的“性能優(yōu)化”和“組件庫(kù)設(shè)計(jì)”特別感興趣。我相信我的經(jīng)驗(yàn)與貴司需求高度契合。


期待與您進(jìn)一步溝通！


此致  
[你的姓名]

十六、面試準(zhǔn)備：AI 成為你的“面試陪練”

提示詞模板：

我即將面試 [職位名稱]，請(qǐng)幫我準(zhǔn)備回答以下問題：

示例：

我即將面試高級(jí) React 開發(fā)工程師，請(qǐng)列出 10 個(gè)高頻面試問題。

AI 生成效果：

1. React 中的虛擬 DOM 是如何工作的？它比真實(shí) DOM 操作快在哪里？
2. 請(qǐng)解釋 React Hooks 的工作機(jī)制，以及為何函數(shù)組件現(xiàn)在可以替代類組件？
3. 在性能優(yōu)化方面，您有哪些經(jīng)驗(yàn)？請(qǐng)舉例說(shuō)明如何解決過(guò)組件反復(fù)渲染的問題。
4. 如何設(shè)計(jì)一個(gè)可擴(kuò)展的組件庫(kù)？您會(huì)如何處理主題切換和全局狀態(tài)？
5. 您對(duì) Suspense 和 Concurrent Mode 的理解是什么？它們解決了什么問題？

十七、學(xué)習(xí)提升：AI 成為你的“技術(shù)導(dǎo)師”

提示詞模板：

作為 [學(xué)習(xí)階段] 的 [語(yǔ)言/框架] 學(xué)習(xí)者，請(qǐng)推薦 5 個(gè)必關(guān)注的 [學(xué)習(xí)資源類型]

示例：

作為入門級(jí)的 TypeScript 學(xué)習(xí)者，請(qǐng)推薦 5 個(gè)必關(guān)注的 YouTube 頻道。

AI 生成效果：

1. **TypeScript Official** - 官方頻道，發(fā)布語(yǔ)言更新和最佳實(shí)踐。
2. **Fireship** - 以極簡(jiǎn)動(dòng)畫講解 TypeScript 核心概念。
3. **Ahfarmer** - 深入淺出的進(jìn)階技巧，適合有一定基礎(chǔ)的學(xué)習(xí)者。
4. **Code with Hlove** - 結(jié)合實(shí)際項(xiàng)目演示 TypeScript 在 React 中的應(yīng)用。
5. **The Net Ninja** - 適合完全新手的 TypeScript 入門系列。

附：50 個(gè)提示詞速查表（直接復(fù)制用）