# 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 Copilot

官方網站：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（後面會詳細解釋）：

請把目前專案的目標及進度記錄到 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)。


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

提示詞（Prompt）架構：

<契約>

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

<工具>

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

<需求>

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

AI 契約（`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 圖示，點一下即可
:::