iT邦幫忙

2026 iThome 鐵人賽

DAY 20
0
Vibe Coding

從 Prompt 到成品:30 天 Vibe Coding 入門與實作系列 第 20 篇

Day 20|Git × AI:連 Commit Message 都能交給它?

  • 分享至 

  • xImage
  •  

昨天我們讓 AI 幫忙整理程式碼、產生 README,今天繼續來看看開發時另一個很常使用的工具——Git。

只要有用 Git 管理專案,應該多少都有遇過一個小問題:程式改完了,準備 Commit 的時候,突然不知道 Commit Message 到底要寫什麼。

最後可能就變成:

update
fix bug
修改程式
改一下

當下看好像沒什麼問題,但過了一兩個月再回來看 Git 紀錄,就會開始懷疑:

「我那時候到底 update 了什麼?」

既然前幾天已經開始把工作交給 AI Agent,今天乾脆連 Commit Message 也一起交給它。

這次繼續使用前面的登入頁面,假設原本只有帳號和密碼輸入框:

<input type="text" id="username" placeholder="帳號">
<input type="password" id="password" placeholder="密碼">

...

<button id="loginButton">登入</button>

今天先做一個很小的修改,在登入按鈕下面加入「忘記密碼?」:

<button id="loginButton">登入</button>

<a href="#" class="forgot-password">
    忘記密碼?
</a>

CSS 也稍微補上一點樣式:

.forgot-password {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-size: 14px;
}

完成修改後先不要 Commit,而是直接把任務交給 Agent:

請查看目前 Git 尚未 Commit 的變更內容,整理這次修改的重點,並幫我產生一個簡潔的 Commit Message。先不要執行 Commit。

這次我們甚至不用告訴 AI「我剛剛新增了忘記密碼」,而是讓 Agent 自己去查看 Git 的變更。

它可以透過目前的修改內容,比較 Commit 前後的差異,再整理出類似:

feat: 新增忘記密碼連結

這就比我自己隨手打一個 update 清楚多了。

如果一次修改的內容比較多,也可以要求 AI 除了標題之外,再幫忙整理詳細內容,例如:

feat: 新增忘記密碼連結

- 在登入按鈕下方新增忘記密碼入口
- 加入連結文字的基本樣式

當然,有些 Coding Agent 甚至可以直接替我們執行 git add、git commit 等指令。不過我目前還是比較習慣先讓 AI 告訴我它準備做什麼,確認內容沒有問題後再執行。

畢竟方便歸方便,如果 AI 一口氣把測試檔、暫存檔,甚至一些根本不想上傳的東西一起 Commit,那就不是偷懶,而是幫自己增加工作了。

一路看到這裡,也會發現 Vibe Coding 能做的事情已經不只是「叫 AI 寫程式」。

從寫 Code、Debug、Code Review、README,到現在連 Git 工作流程都能參與,AI Agent 能接觸的範圍正在慢慢變大。

而當 AI 想要接觸更多外部工具與資料時,就會遇到下一個很重要的問題:

AI 要怎麼跟這些工具連接?

Day 21,就來認識這兩年 AI 工具裡很常出現的一個名詞——MCP。


上一篇
Day 19|AI 不只會寫 Code:重構、註解、README 都能幫忙
下一篇
Day 21|MCP 是什麼?AI 為什麼需要「工具」?
系列文
從 Prompt 到成品:30 天 Vibe Coding 入門與實作 共 23 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言