iT邦幫忙

2025 iThome 鐵人賽

DAY 28
0
Modern Web

設計 x 開發:從 Figma 到 Vue,打造 LINE 互動形象網站!系列 第 28

28 AI 工具在職場開發中的輔助應用

  • 分享至 

  • xImage
  •  

前言

這篇文章想跟大家分享,我在職場上實際使用過能輔助工作的 AI 工具🔧。
ChatGPTGemini 這些常見的 AI 工具,相信大家已經很熟悉它們的基礎功能了💪,所以在這裡就不多作介紹。重點會放在 GitHub CopilotTrae、還有 NotebookLM 這三個 AI 工具,來聊聊它們怎麼幫我省下時間,提升工作效率✨。

NotebookLM

有時候會接到這樣的工作內容:
「這個專案預計要接新的〇☐金流哦,這份文件你看一下,評估開發時程給我,感謝。」

在這種情境下,如果需要快速評估金流或物流的技術文件,我們可以把文件餵給 NotebookLM,並透過問答的方式來獲得想要的答案,NotebookLM 會根據我們提供的文件內容來回覆問題。

舉個例子,我們可以輸入:
請問如果要透過線上下單的方式完成〇☐金流付款,需要串接哪些 API?

NotebookLM 會根據輸入的問題,告訴我們文件中對應的 API 接口與相關欄位資訊。
https://ithelp.ithome.com.tw/upload/images/20250904/20172578edqqKxvxWV.jpg
(NotebookLM 根據文件內容回答)

如果對內容有疑慮,也可以點擊在後方出現的標註數值(例如 ① ),在左側就可以看到對應文件中的來源段落,方便確認資訊來自文件哪個部份。
https://ithelp.ithome.com.tw/upload/images/20250904/2017257814Wbcibk19.jpg
(有底色的就是對應說明)

他就像是說書人一樣,告訴你他手上的書本有哪些故事=資訊。
https://ithelp.ithome.com.tw/upload/images/20250904/20172578cyLXweE1Ps.png
或者是像這樣的情形:「等等10分鐘後開會,要根據客戶這份 PTT 討論功能,看一下。」在短時間內需要理解文件中的概覽與內容,可以透過 NotebookLM 快速吸收,不僅查找資料方便,也可以陪你迅速掌握整個文件脈絡。

▶ NotebookLM 來源

GitHub Copilot

假設同個功能需要切換成不同語言,原本在寫 JavaScript 要切換成 Vue,如果自己來實作可能需要想一下怎麼轉換才正確。
但如果透過 Copilot 就簡單多了! 舉例來說:
要在 Vue 專案裡加一個新增數字事件,目前 JS 的範例已經寫好了。

這時候我們可以直接新增一個 SFC,貼上現有的 JS 範例,然後開啟 Copilot 輸入框直接輸入:「請轉換成 Vue Composition API 風格」,Copilot 會根據指令與檔案上下文,自動將框選的程式碼轉換完成,產生完的結果如果確定是可行的,點擊「接受」就轉換好囉✨!
28 AI 工具在職場開發中的輔助應用 - 圖示3
(JS 轉換成 Vue Composition API)

另外,Copilot 也支援切換不同的模型來做使用:
https://ithelp.ithome.com.tw/upload/images/20250904/20172578JmbRgmsnFU.png
簡單來說,就是把需要修改的程式碼框起來,輸入需求請 AI 協助處理即可,也可以撰寫部份功能,再請 AI 做生成 & 整理
截至目前 Copilot 免費方案可以每個月提供 2,000 次發送請求回覆,以及 50 次代理模式或聊天請求。如果有更大量的使用需求可以參考官方方案

▶ GitHub Copilot 來源

Trae

看到這裡,大家可能會好奇,如果我們的需求不只是對單一檔案調整,而是要跨多個檔案一起新增或編輯時該怎麼辦呢?
這時候就可以認識另一個 AI 工具「Trae」,它能讓我們透過對話,修改整個專案的程式碼。

在剛開始建立時,Trae 能套用現有 VS Code 環境,原本安裝的套件大多會自動帶入。介面設計上與 VS Code 相似,因此幾乎不需要額外適應,就能快速上手。
https://ithelp.ithome.com.tw/upload/images/20250904/20172578VzbiRPo2eW.png
(Trae 工作區域)

建立AI Agent

我們可以根據當前專案需求建立智能體,建立方式:登入後找到右上方「user」圖示 ⇾ AI 功能管理 ⇾ 智能體。
https://ithelp.ithome.com.tw/upload/images/20250904/20172578Pf6VyLeIzB.jpg

接著點選「創建智能體」,根據你的需求填入以下內容:

  • 名稱:幫他取個好聽的名字吧😏,這個主要是識別用,在對話框也會出現。
  • 提示詞(Prompt):定義智能體的角色,建議盡量以條列方式描述,這樣能讓指令更清晰,方便 AI 理解你的需求。
    例如:
    1. 一位精通 Vue 的專家,具備豐富的專案實戰經驗。
    2. 以組合式API(Composition API)風格作為回答範例。
    3. 回覆內容盡量以條列方式呈現,並在每個要點後附上具體的技術選擇建議。
      ......等等。
  • 工具 MCP:新增要存取和使用哪些外部工具和服務。你可以把 AI 模型想像成一個非常聰明的大腦,但你得給他需求清單要和哪些外部工具做互動。
  • 工具 內置:設定可以有哪些功能權限。

https://ithelp.ithome.com.tw/upload/images/20250904/20172578eGTCUv6m73.png
都設定輸入完後,請按「創建」。

這樣自訂智能體就完成啦!如果不知道要怎麼設定,也可以先用內建的智能體試試看。
https://ithelp.ithome.com.tw/upload/images/20250904/20172578EfTL1biB0Q.png

這樣就可以直接在對話框與它互動了,可以發現它會直接對專案所有檔案內容做修改。且跟 Copilot 一樣,修正好的程式檔案需 Code Review 接受後,才會合併進專案。
https://ithelp.ithome.com.tw/upload/images/20250904/2017257837TBHviuTo.jpg

但它有個小限制,免費版問約10個問題後,再來要獲得答案都需乖乖排隊。
https://ithelp.ithome.com.tw/upload/images/20250904/20172578PfhlMPjjX8.jpg
(有請求額度限制)

▶ Trae 來源

結語

NotebookLM 的文件快速理解、到 GitHub Copilot 的程式碼轉換與生成,再到 Trae 幫助我們跨檔案甚至全專案修改,可以看出 AI 已經不只是「輔助問答」的角色,而是逐漸成為開發流程裡的 合作夥伴 🤝,它能替我們節省部份的作業的時間,把更多精力留給真正需要思考的架構與邏輯設計

雖然目前每個工具各自都有一些條件或限制,像 NotebookLM 需要先餵文件、Copilot 的免費額度、Trae 的排隊機制,但只要善用它們各自的特點,就能在日常開發中提升作業效率 🚀。

未來,隨著 AI 工具越來越成熟,相信工程師的角色也會更多地轉向在「決策與整合」,而不再是單純地「埋頭寫程式」。換句話說,AI 不是來取代工程師,而是成為我們提升效率、拓展思維的助力。如何善用這些工具,將會是工程師在現今與未來世代的重要課題。
如果你還沒有實際體驗過,或許可以先從這三個工具開始試看看,體驗 AI 在開發工作流程中所帶來的不同!

參考資料與延伸閱讀

NotebookLM 使用工具來源
Github Copilot 使用工具來源
Github Copilot 方案參考來源
Trae 使用工具來源


上一篇
27 用 LINE 官方帳號放大曝光力!如何結合網站打造互動體驗
下一篇
29 跨部門溝通好難?4 個方法讓設計、工程師與 PM 合作更順暢
系列文
設計 x 開發:從 Figma 到 Vue,打造 LINE 互動形象網站!29
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言