Skip to main content

專案的理想指令示例

✅ 更清楚的初始指令應該是：​

## 專案背景
我有一個 React + TypeScript 的視頻亮點編輯工具，目前使用 styled-components 進行樣式管理。專案結構包含 App.tsx、TranscriptEditor.tsx、VideoUpload.tsx、VideoPreview.tsx 等主要組件。

## 具體需求
1. 將整個專案的樣式系統從 styled-components 遷移到 Tailwind CSS
2. 採用 Google Material Design 3 設計語言
3. 設置自動 CI/CD 部署到 GitHub Pages
4. 確保響應式設計和無障礙性

## 技術要求
- 主色：#2DEA9E (綠色)
- 次色：#080635 (深藍色) 
- 字體：Roboto
- 構建工具：Vite
- 部署：GitHub Pages
- CI/CD：GitHub Actions

## 約束條件
- 保持現有功能完全不變
- 確保在桌面和移動設備上都能正常使用
- 構建後的網站必須能正常訪問

## 成功標準
- 本地 `npm run dev` 正常運行
- `npm run build` 成功構建
- 推送到 GitHub 後自動部署到 Pages
- 網站 URL 可正常訪問，所有功能正常

## 專案文件結構
[提供當前的主要文件列表]

🔧 不同階段的指令建議​

1️⃣ 初始化新專案時​

請幫我建立一個 [專案類型] 專案，使用以下技術棧：
- 前端：React 18 + TypeScript + Vite
- 樣式：Tailwind CSS + Material Design 3
- 部署：GitHub Pages + GitHub Actions
- 主要功能：[具體功能描述]

請包含完整的專案結構、配置文件、CI/CD 設置，並確保：
1. 本地開發環境可正常運行
2. 自動部署正常工作
3. 包含基本的錯誤處理和日誌

2️⃣ 遷移現有專案時​

請幫我將現有專案從 [舊技術] 遷移到 [新技術]：

當前狀態：
- [現有技術棧列表]
- [主要文件結構]
- [已知問題]

遷移目標：
- [目標技術棧]
- [設計要求]
- [性能要求]

請採用漸進式遷移策略，每次處理一個組件，並在每個步驟後驗證功能正常。

3️⃣ 解決特定問題時​

我遇到了 [具體錯誤信息]，在執行 [具體操作] 時發生。

環境信息：
- Node.js 版本：[版本]
- npm 版本：[版本]
- 作業系統：[系統]
- 瀏覽器：[瀏覽器版本]

錯誤重現步驟：
1. [步驟1]
2. [步驟2]
3. [錯誤發生]

請提供解決方案和預防措施。

🚀 讓指令更有效的技巧​

✅ DO（建議這樣做）​

  1. 提供上下文
❌ "幫我修復樣式"
✅ "我的 React 專案使用 styled-components，想遷移到 Tailwind CSS，並採用 Material Design 風格"
  1. 明確技術選擇
	❌ "幫我設置部署"
	✅ "請使用 GitHub Actions 設置自動部署到 GitHub Pages，使用 peaceiris/actions-gh-pages action"
  1. 說明約束條件
	❌ "讓網站更快"
    ✅ "請優化構建體積，目標是首次載入時間 < 3秒，使用 code splitting"
  1. 定義成功標準
	❌ "讓它能用"
    ✅ "確保 npm run build 成功，網站在 Chrome/Safari/Firefox 都能正常顯示"

❌ DON'T（避免這樣做）​

  1. 模糊的指令
	❌ "幫我做個網站"
	❌ "修復這個錯誤"
	❌ "讓它更好看"
  1. 缺少關鍵信息
   ❌ 不提供錯誤信息
   ❌ 不說明當前技術棧
   ❌ 不解釋預期行為
  1. 一次要求太多
	❌ "幫我建立網站、設置資料庫、部署、寫測試、做SEO"

📝 實用的指令模板​

🔨 開發階段​

請幫我 [具體任務]，在 [專案類型] 中：

技術棧：[具體版本]
當前狀態：[現況描述]
期望結果：[具體期望]
注意事項：[特殊要求]

請提供：
1. 完整的程式碼實作
2. 必要的配置文件
3. 測試方法
4. 可能的錯誤處理

🚀 部署階段​

請幫我設置 [部署目標] 的自動部署：

專案資訊：
- 技術棧：[詳細列表]
- 構建指令：[build command]
- 輸出目錄：[output directory]

部署要求：
- 平台：[GitHub Pages/Vercel/Netlify]
- 觸發條件：[push to main/PR merge]
- 環境變數：[如果需要]

請包含完整的 CI/CD 配置和故障排除指南。

🐛 問題修復​

遇到問題需要協助：

錯誤現象：[具體描述]
錯誤信息：[完整錯誤訊息]
重現步驟：[詳細步驟]
環境資訊：[版本資訊]
已嘗試方案：[已試過的方法]

請提供：
1. 根本原因分析
2. 解決方案步驟
3. 預防措施
4. 相關最佳實踐

 總結：高效溝通的關鍵​

  1. 具體而非抽象：說明確切要做什麼，而不是模糊的目標
  2. 完整的上下文：提供技術棧、當前狀態、環境資訊
  3. 明確的期望：說明成功的標準和約束條件
  4. 逐步進行：複雜任務分解成小步驟，逐一完成
  5. 包含驗證：說明如何測試和驗證結果