# AI 輔助開發：工具與實作指南

本文是在介紹 AI 輔助開發（AI-Assisted Development），
就是如何用 AI 來賦能軟體工程的開發過程。

好閱讀版本：[AI 輔助開發：工具與實作指南 | Medium](https://medium.com/@timcsy/ai-%E8%BC%94%E5%8A%A9%E9%96%8B%E7%99%BC-%E5%B7%A5%E5%85%B7%E8%88%87%E5%AF%A6%E4%BD%9C%E6%8C%87%E5%8D%97-af8ea9ffe14b)

## 前言

隨著最近 AI 工具的進步，原本的軟體工程開發開始進行典範轉移。

這轉變的速度快得不像話，當你覺得 AI 能產生程式超神奇的時候，突然旁邊就有一個人說：都什麼時代了還在那邊慢慢地將程式碼複製貼上？不是在 IDE（程式編輯器）裡面問一問就有了嗎？而且檔案結構都幫你處理好了。

事實上，軟體工程核心的概念沒有變，還是需要系統系的思考，只不過迭代的速度更快了。

以下的教學特別針對沒有程式基礎的人，我把許多步驟都一步步寫出來，特別是我在教學時學生特別容易遇到的錯誤。所以不用擔心看不懂，如果遇到問題基本上都可以找到解方，再有問題也可以直接問 AI。

就讓我來跟大家介紹如何在短時間內就熟悉 AI 輔助開發吧！

## 環境設定

### 註冊 GitHub

官方網站：https://github.com/

有了 GitHub 帳號，才可以使用 GitHub Copilot 服務。

在註冊申請 GitHub 帳號時，因為安全因素，需要花一些時間驗證你是不是人類，需要有一點耐心。

> 如果有教師或學生資格，可以去申請 [GitHub Education](https://github.com/settings/education/benefits)，上傳相關證明（最好有英文的證明資訊在上面），大約最慢一週內會驗證完成，就可以享有兩年的 GitHub Copilot Pro 訂閱。

### 安裝 Git

下載網址：https://git-scm.com/downloads

> 只有 Windows 系統需要安裝

### 安裝 Visual Studio Code（VSCode）

下載網址：https://code.visualstudio.com/

在安裝時按需求打勾即可，建議是全勾。


Visual Studio Code 安裝完成之後，去 Extensions（延伸模組）搜尋安裝「[Chinese (Traditional) Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hant)（繁體中文語言套件）」、「[Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server)（可以用來預覽網頁）」這兩個外掛。


### 設定 GitHub Copilot

在 VSCode 的右下角，有一個 Copilot 圖示，登入你的 GitHub 帳號來設定 Copilot。

通常按綠色就好，字要看清楚不要按錯按鈕。


設定完成後，等個五秒鐘，會跳出一個聊天的視窗，代表成功了。如果不小心關掉聊天視窗，可以按上方的 Copilot 圖示把視窗叫回來。

然後要確保你已經切換成 Agent 模式，否則很多自動化的功能無法使用。


我實測的經驗是，Claude 系列的模型通常表現最好，Gemini 次之，GPT 最差。但是這關係到點數的消耗，所以一開始可以用 Claude，等點數快用完時，再切換到 GPT。


點擊下方 Copilot 圖示可以看目前的使用量，如果 GitHub Copilot 點數真的用完了，也可以裝 [Gemini CLI](https://blog.google/intl/zh-tw/products/cloud/gemini-cli-your-open-source-ai-agent/) 作為輔助，可以參考教學 [Gemini CLI 使用手冊](https://gemini-cli.gh.miniasp.com/)。


## AI 輔助開發（AI-Assisted Development）

> 開發 development 這個字的字根為：de（脫離）+ velop（古法語的動詞 veloper，意思為包裹、纏繞）+ ment（將動詞轉化為名詞）。綜合來看，development 最初的意思是「解開、展開」。你可以想像一個被包裹起來的東西被慢慢地解開、攤開，這個過程就是一種「開發」。

目前 AI Coding 主要分成 Vibe Coding（氛圍程式設計）和 Agentic Coding（代理式程式設計）：

| Vibe Coding | Agentic Coding |
| - | - |
| AI 是助手 | AI 是總管 |
| 人類提供意圖 | 人類提供目標 |
| 快速實現 | 自動分工 |
| 適合設計原型 | 適合大規模自動化 |

結論：兩者是互補的，混合使用是最好的方式

參考：[Vibe Coding vs. Agentic Coding: Fundamentals and Practical Implications of Agentic AI](https://arxiv.org/abs/2505.19443)

## 程式設計（Programming）

現在流行的 Vibe Coding 開始讓人可以用「自然語言」寫程式了！

### 初始化專案

範例提示詞 Prompt（後面會詳細解釋）：

這個專案採用 TDD（測試驅動開發）。
請先跟我討論完，把需求寫入 PRD.md 再進行開發。
請把目前專案的目標及進度記錄到 AGENTS.md，
並保證之後有可能不同的 AI 只要閱讀這個檔案就能繼續開發專案。

寫一個純前端的網站，請用 CDN 版本的 JS 套件，不要使用任何後端工具。
連線與資料庫用 GUN.js。

我想要寫一個可以腦力激盪的網站，你加入聊天室之後（可選擇要不要匿名），
就可以創建問題、回答問題、大家可以點選喜歡的問題，
然後也可以在各個問題裡面點選喜歡的答案，系統會依據喜歡程度排序。

在旁邊的 GitHub Copilot 聊天視窗輸入初始專案的提示詞（Prompt），接著 AI 會問你要不要開啟空的專案資料夾，按繼續即可。


我們建立一個空的資料夾（可以放在桌面），並選擇它作為專案資料夾。


之後等一下下，按繼續設定就可以了！泡一杯咖啡，欣賞 AI 如何寫程式。


### 測試除錯

等 AI 完成之後，就可以找到 `index.html` 這個檔案，這是我們網站的首頁，開啟檔案之後，點擊右上方的那個圖示就可以預覽網頁。


這 Live Preview 功能有提供一些工具，點擊右上方三條線的工具箱，就可以在瀏覽器中開啟網頁，這在測試多人連線的時候很好用。另外還可以開啟 Devtools 窗格（開發人員工具），下面會說明。


以下就是開發人員工具，通常網頁反應不如預期時我們會去 Console 看看有沒有錯誤訊息，可以直接複製給 AI（AI 夠聰明，多少應該看得懂），另外 Application 和 Network 也蠻常用的，詳細可以參考 [Chrome 的開發人員工具](https://developer.chrome.com/docs/devtools?hl=zh-tw)。


### 上下文工程（Context Engineering）

在進行 AI 開發的時候，可以問自己幾個問題：Context 脈絡（Who/Which/When/Where）、Why、What、How

- Context（脈絡）：連釐清目前的對象（Who/Which）、時間（When）、場合（Where），這是後續開發的基礎與背景。
- Why（動機）：這個產品或專案想要解決的需求、「痛點」。下面提示詞工程的「需求」部分會再更多說明。
- What（規劃）：跟 AI 一起討論關於產品的規劃（例如 PRD）、規格（Spec）。下面提示詞工程的「契約」部分會再更多說明。
- How（細節）：有了 AI 工具，實作的細節基本上就是交給 AI Agent 處理。

### 提示詞工程（Prompt Engineering）

提示詞（Prompt）架構：

<契約>

這個專案採用 TDD（測試驅動開發）。
請先跟我討論完，把需求寫入 PRD.md 再進行開發。
請把目前專案的目標及進度記錄到 AGENTS.md，
並保證之後有可能不同的 AI 只要閱讀這個檔案就能繼續開發專案。

<工具>

寫一個純前端的網站，請用 CDN 版本的 JS 套件，不要使用任何後端工具。
連線與資料庫用 GUN.js。

<需求>

我想要寫一個可以腦力激盪的網站，你加入聊天室之後（可選擇要不要匿名），
就可以創建問題、回答問題、大家可以點選喜歡的問題，
然後也可以在各個問題裡面點選喜歡的答案，系統會依據喜歡程度排序。

AI 契約（`AGENTS.md`）的必要：
- 為了讓 AI 在開發專案時能夠維持目標與進度的一致性，可以先跟 AI 制定一些「契約」，或是說 Spec（規格）。
- TDD（測試驅動開發）
- 在軟體工程界行之有年的開發模式，用在 AI 開發時可以確保品質的穩定性。
- 如果你有其他的軟體工程範式，也可以再把 TDD 改成你想要的範式，例如 BDD（行為驅動開發）。
- 產品需求文檔（PRD，Product Requirement Document）
- 為了釐清產品的功能、特性和具體要求。
- 確保大家對產品有共同的理解，並作為產品開發的核心依據，其中包含使用情境、功能列表、使用者介面設計、開發文件及測試腳本等內容。
- 如果有需要，可以試試叫 AI 生成「流程圖」、「C4 Model」給您審核一下。
- 上下文脈絡
- 可以用 `AGENTS.md` 管理上下文脈絡
- 目標與進度管理：讓專案的開發維持一致性
- 載入專案進度（每次 git pull 後）：
`請閱讀 AGENTS.md 並繼續`
- 儲存專案進度（每次 git push 前）：
`請把目前專案的目標及進度記錄到 AGENTS.md，並保證之後有可能不同的 AI 只要閱讀這個檔案就能繼續開發專案。`
- 如果今天模型或是聊天室出狀況（例如超出模型上下文窗口限制時），還可以還原過去的思路，類似 RAG（檢索增強生成）的效果，幫專案摘要
- 可以在不同的地方開發專案，也可以與別人合作開發專案，只要大家先閱讀這份契約即可
- 目前各大 AI 廠商都有類似的機制：
- OpenAI（Codex）：[AGENTS.md](https://openai.com/index/introducing-codex/)
- Anthropic（Claude Code）：[CLAUDE.md](https://docs.anthropic.com/zh-TW/docs/claude-code/memory)
- Google（Gemini CLI）：[GEMINI.md](https://blog.google/intl/zh-tw/products/cloud/gemini-cli-your-open-source-ai-agent/)

工具細節：
- 要說明清楚要使用什麼樣的 [技術堆疊](https://zh.wikipedia.org/zh-tw/%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%E5%A0%86%E6%A0%88)（tech stack）
- 建議可以再開始專案之前先跟 AI 討論一下
- 比較不同技術的優缺點，以及為何這個技術適合這個專案
- 如果想當免費仔，以下是非常好的建議
- 純前端：靜態網頁，不需要架後端伺服器，像是 GitHub Pages 就有提供免費靜態網頁託管的功能
- 以後很多傳統的程式，像是用 C / C++ / Rust 寫的程式都可以透過 [Emscripten](https://emscripten.org/) 編譯成 [WebAssembly](https://webassembly.org/) 高效率的運行在瀏覽器上，這會帶動很多純前端的應用，效能不再是問題
- 甚至還有人把整套 Linux 作業系統搬到 Web 上：[WebVM](https://webvm.io/)
- CDN：Content Delivery Network（內容傳遞網路) ，可以想成是一種快取的機制（通常用來快取 JavaScript 套件），也不用把所有的套件都放到我們自己的專案裡面佔容量，可以從外部引入（import）就好
- 不要使用任何後端工具：這樣在開發部署的時候對初學者比較友善
- 連線與資料庫用 [GUN.js](https://gun.eco/)：這是一個免費且安全的「前端分散式資料庫」，它打破我們原本覺得資料庫就應該跑在後端的想像。不僅可以拿來做使用者登入機制，也可以用來做多人連線、同步的應用。
- 可以多多探索 Web 可以做到的功能，例如：
- 3D：[Three.js](https://threejs.org/)
- 語音辨識：[Web Speech API](https://developer.chrome.com/blog/voice-driven-web-apps-introduction-to-the-web-speech-api?hl=zh-tw)
- 視訊、音訊擷取串流：[WebRTC API](https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API)
- 語言模型：[Transformers.js](https://huggingface.co/docs/transformers.js/index)
- [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API)
- 可以來這裡尋寶，諸如 Web MIDI、Bluetooth 等等

需求設計：
- 指令要「明確、詳細、清楚、具體」
- 不夠具體，又不符合期待，就會很躁
- 表達需求、設計是需要練習的，如同演奏樂器！
- 可以逐步引導 AI，不用追求一次到位，不然 AI 可能會當掉或跑不動
- 一次一個功能，也比較好測試除錯
- 如果一開始很難詳盡描述，可以採用「[螺旋式開發](https://zh.wikipedia.org/zh-tw/%E8%9E%BA%E6%97%8B%E6%A8%A1%E5%9E%8B)」
- 先產出一個原型（Prototype）
- 然後叫 AI 生成一個重構的計劃，砍掉重練
- 在重構的時候，你可以用更精準的語句來描述
- 在不停的迭代中慢慢將需求與功能收斂
- 以前重構很花時間成本，有 AI 輔助就不成問題了
- 這其實需要更高層次的「運算思維」！
- 要如何解決需求與表達設計理念？
- 人類之後的角色不是越來越抽象，就是越來越具體
- 抽象譬如說要如何用 AI 代理組成一個社會結構？
- 具體譬如說音樂的細節要如何處理才好聽？
- 中間無聊的過程會漸漸交付給 AI 處理

### 內容來源

:::danger
有時候 AI 給的資料是錯的。（例如：明星的生日！！）
:::

:::info
目前要讓 AI Agent 自行生成多媒體資料成本太高，不實際
:::

要如何解決以上兩個問題呢？
- 用 AI 生
- 用不同功能的 AI 先把內容生好
- 這在未來可能會被 MCP（Model Context Protocol）取代，由 AI Agent 自動化來做到
- 串 API
- 很多服務都有提供 API，用 JSON 等等格式就能解讀資料了
- 可以多探索一下 API 提供者，例如政府、Stable Diffusion 等
- 爬蟲
- 間接地取得資料，較為麻煩，可能還有法律問題
- 自行整理
- 一些圖片或是音檔，AI 可能只會給 placeholder（佔位符，例如一張空的照片），叫你用真正的檔案替換掉
- 有時可以人工檢查（例如把不好笑的笑話刪掉，提供一些好笑的）

## 工作流程（Workflow）

已經有很多 AI 工具開始取代 Workflow 這塊了（Agentic Coding）！

不過人還是有最終整合的決定權。

有關更多 Git 的練習歡迎參考：[Learn Git Branching](https://learngitbranching.js.org/?locale=zh_TW)

### 初始化存放庫

有關 Git 的操作都在左邊第三個圖示那邊。


### 版本控制

當你做到一個階段的時候，就可以來「提交（commit）」一個版本，我們習慣上會用一個簡短的訊息描述這個版本（不過現在人類懶到連這段文字也要 AI 幫忙生）。這就很像是遊戲的 checkpoint（檢查點）一樣，如果有想要反悔的話也比較方便，不用從頭來。

:::info
口訣：星星 > 提交

:::

但是第一次還是會碰到一個錯誤，這是正常的，解決步驟如下：

先開啟 Git 記錄，


在輸出那邊往上滑，會出現兩行特別的文字（跟 email、name 有關），把他們複製下來。


到輸出旁邊的「終端機」頁籤，


把剛剛複製的那兩行貼上，就可以繼續提交了。


另外，在提交時還有可能出現的錯誤如下，如果跳出一個 `COMMIT_EDITMSG` 檔案，就代表你沒有先按星星，就直接按提交，所以就沒有 commit 訊息，它叫你用手動來打。處理方法很簡單，只要把這檔案關掉，重新「星星 > 提交」就可以了！


### 發佈專案

提交完成後我們就可以發佈專案了，首先點擊「發佈 Branch」


接下來為專案取一個英文名字（盡量不要用中文），不要跟之前的專案名稱重複。

再來要「選擇 public」！！這很容易按錯，要按第二個


接著第一次發佈會叫你再登入一次 GitHub


當成功授權之後，有可能會跳到一個空白頁面，這其實就算成功了。回到 VSCode，你應該會看到「在 GitHub 上開啟」，點下去。


如果剛剛上面 public 不小心點成 private，應該會在你的 GitHub 專案畫面呈現出來，如果真的不小心按錯了，可以去 Settings 那邊修改。


滑到最底下，會看到一個 Change visibility，照著做改成 public 就好。


### CI/CD（持續整合/持續部署）

使用 GitHub Pages 結合 GitHub Actions 免費發佈前端網站

GitHub 專案 > Settings


找到 Pages > Branch 的 None 改成 main > Save


去 Actions 那邊監控部署進度


等大概 30 秒，就會得到網站網址


你可以把這個網址跟別人分享，也可以建立 QRCode 用手機掃，方便分享


恭喜！！網站大功告成！！！！

### 接續專案

接下來我們用單人的方式來講解專案要如何接續做下去，同樣的流程也可以套用在多人的情境。

首先，為了模擬我們到不同的環境開發（例如學校及住家切換），我們先把剛剛完成的專案直接毫不留情的刪掉。


接著我們去 GitHub 專案頁面那邊複製 git 網址如下：


再來我們在桌面，按右鍵，選擇「在終端中開啟」


終端機會被打開，請在上面輸入以下指令，並且按 Enter 執行。

git clone 你剛剛複製的 git 網址

例如：

git clone https://github.com/timcsy/brainstorming.git

這樣就會把專案複製（clone）下來。


好了之後你應該會看到一個「復活」的資料夾，請把它用 VSCode 開啟。


點選上方的 Copilot 圖示，開啟新的聊天。


請確保目前是在 Agent 模式跟 Claude 模型（或是你自己選擇的模型）。

叫 AI 去讀契約：

請閱讀 AGENTS.md 並繼續


我們會看到 AI 繼續完成更多的部分，我們也可以透過互動的方式來完成更多東西。

覺得差不多之後，確保 AI 有把最新進度寫入 `AGENTS.md` 契約中，如果沒有，就執行下面指令：

請把目前專案的目標及進度記錄到 AGENTS.md，
並保證之後有可能不同的 AI 只要閱讀這個檔案就能繼續開發專案。


最後進行提交（星星 > 提交），並且同步變更，這樣 GitHub 上就會是最新的狀態，而且 GitHub Actions 也會自動觸發部署新版本的網站（大概要等 30 秒）。


### 分工架構

當專案開始成長的時候要分檔案架構，甚至會有多人的分工合作。

分工需要詳細規劃，要盡可能解隅（decouple），然後事先訂好不同模塊之間的溝通方式。這樣才不會每個人的工作範圍模糊不清，還有可能會蓋掉另一個人的工作內容，導致整個專案的完整性受損。

一般來說工作流程（Workflow）有分三種：Git Flow、GitHib Flow、GitLab Flow，對於小型兩三人的組織來說，GitHub Flow 就夠了。

所謂的 GitHub Flow 就是組員會去 Fork 組長的專案，也就是複製一份到自己的 GitHub（像是拿叉子把人家的牛肉搶過來），然後組員就改他自己那一份，就不會動到組長的。


當組員修改好之後，就可以提 Pull Request，告訴組長可以把它修改的部分整合回原本的主專案，這時組長就要去解決檔案中有衝突的部分，並且決定要保留哪一個版本，最後才 Merge 在一起。其他組員也可以去同步到最新的狀態。

:::info
未來趨勢（AI 如何協助工作流程）：

如果你有 GitHub Copilot Pro 版本，還可以自動幫你進行 Code Review，組長只要去 approve 結果就好，可以玩玩看，因為解決衝突這件事真的蠻瑣碎的。
:::


最後，在 VSCode 那邊，只要在點點點那邊選擇提取，就可以同步最新的狀態了！

## 常見錯誤

:::danger
寫程式時沒將詢問（Ask）改成代理模式（Agent）
:::

:::danger
直接把桌面當成專案資料夾，這樣你會把你桌面上的東西也一起傳到 GitHub 上公開
:::

:::danger
組員忘記要先 Fork 組長的專案，所以無法提 Pull Request
:::

## 常見問題

:::success
Q：如何開啟 GitHub Copilot 聊天視窗？
:::
:::danger
A：在上方有一個 Copilot 圖示，點一下即可
:::