這幾年做企業內訓的時候，我會請客戶提供內部的「去識別化資料」，這樣我才能根據公司實際狀況設計課程。

但實際收到檔案時，通常裡面還是會殘留一些比較敏感的資訊，比如「姓名、電話、Email、身分證字號、地址…」

我知道承辦人員已經很努力了，只是當檔案太多、操作又很瑣碎時，就算有心去做，也很容易漏掉。

就像一份 Excel 有多個工作表時，可能處理完第一個，後面的就忘記了。

而 PDF 更麻煩，因為檔案無法直接編輯，所以有些人會用白框遮擋，但其實被遮擋後文字依舊可以被複製。

其實我收到這些檔案還好，因為合作時有簽署保密協議。

但如果是直接丟給 AI，情況就不一樣了

你上傳的資料，是有可能會被 AI 拿去訓練模型而導致外洩。

完整的 Demo，可以觀看 YT 喔 👉

對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。

【AI 陷阱 EP3】資料別直接丟 AI！Word、Excel、PDF、TXT 一鍵去識別化 | 資訊安全 | Vibe Coding | AI 資安 | ChatGPT | Claude

這邊先帶大家看一下 ChatGPT 與 Claude 如何關閉這個設定。

ChatGPT 可以點擊左下角頭像，選擇設定，切換到資料控制的分頁後，將「協助改善所有人的模型體驗」切換成關閉。

而 Claude 也是點擊左下角頭像，選擇設定（Settings），切換到隱私權（ Privacy）分頁後，將「Help improve our AI models」切換成關閉。

建議大家檢查一下自己的帳號，因為預設是開啟的。

駭客常用的釣魚手法

不過就算把設定關閉，也不代表上傳的資料就安全了，因為你的帳號有可能被駭客盜用。

最常見的手法，就是冒用你公司的 CEO、技術長這些高階主管；用他們的頭像，以及相同的 Email 前綴，以填寫 Google 表單的名義寄信給你。

你點連結後，可能會看到一個非常像 Google 的登入畫面。

此時只要不小心輸入了帳號密碼，你的帳號就被盜了。

駭客掌握帳號後，除了可以直接登入你的信箱外，還可透過它登入其他應用程式，比如進入 AI 工具瀏覽對話紀錄。

假如你提供的敏感資料完全沒有去識別化，那對駭客來說真的就是得來全不費功夫。

所以建議大家除了要給帳號加上多重驗證要素外，把敏感資料上傳給 AI 前，也要做到去識別化的動作。

去識別化工具分享

這邊分享一個我設計的免費去識別化工具：

1. 支援 Word、Excel、PDF、TXT 等多種格式
2. 可以一次處理 10 個檔案
3. 能辨識並隱藏姓名、身分證、電話、地址等常見隱私資訊
4. 發現有辨識錯誤或遺漏的地方，也能手動增加或取消
5. 工具以純前端網頁設計，所以檔案從頭到尾，都不會離開你的電腦
6. 在 AI 處理完後，還能還原回來

這篇文章我會分成三個部分：

① 為什麼需要去識別化

從資訊安全的角度分享去識別化的重要性，以及過去手動處理的痛點與風險

② 去識別化工具實戰 Demo

示範工具在實務應用上的使用場景：「資料去識別化、與 AI 協作、還原資料」

③ 在 AI 時代，打造客製化的工具

分享製作工具時的設計思路，大家了解後可以根據自己的需求來優化功能

① 為什麼需要去識別化

許多公司都會要求員工把敏感資料上傳給 AI 前，要先去識別化；但又沒有提供對應的工具，所以很多人是用土法煉鋼的方式，純手搓。

手動去識別化的問題

以 Word 來說，我發現許多人是用「取代」的功能一個一個換，但要取代的內容一多就很容易漏。

而且除非你有設計對照表，否則改完後就回不去了。

另外 Excel 最常見的疏漏，就是第一個工作表處理完了，但後面幾個就忘了

至於 PDF 更麻煩，很多人會直接畫一個白框蓋上去；表面上看起來是遮掉了，但如果框選起來複製貼上，你會發現資料還在。

安全的去識別化工具

前面的痛點，是讓大家了解手動處理是一件繁瑣，且漏洞百出的方案。

資料去識別化這個任務，其實我們是可以透過工具處理的。

如果在網路搜尋「去識別化工具」，你會看到有許多現成的服務可以使用。

但提醒一下大家，除非你了解服務背後使用的技術架構；否則你原本的目標是去識別化，結果卻直接把機敏資料送給對方。

所以我不敢推薦別人製作的工具，因為萬一推薦錯了，就會產生資安危機

因此我乾脆自己做一個，這樣企業在提供資料給我的時候，就能透過這個工具，更輕鬆地處理敏感資料。

講課時，也能直接示範給學員看如何使用，並培養資訊安全的意識。

② 去識別化工具實戰 Demo

這邊我就直接跟大家示範這款工具的操作方式。

網址：https://deanlin.net/data-deidentification/

STEP 1｜上傳檔案

打開網頁後，你可以直接把檔案拖進來；工具支援 Word、Excel、PDF、Markdown 等多種常見格式，最多可以同時處理 10 個檔案。

如果是信件或對話紀錄，也可以直接貼上文字

如果你只是想嘗試這款工具如何使用，我也有內建不同格式的範例，這邊我先以 Word 格式的合約來跟大家示範。

STEP 2｜看預覽

點擊「載入」後你可以看到，預覽的排版跟原本的 Word 幾乎是一樣的，被辨識為敏感資料的部分，會換成方括號加上類別。

像公司、統編、姓名、電話、電子郵件，都被隱藏起來了。

如果想看原始資料，滑鼠移過去就會直接顯示。

預設是「部分保留」，會留下姓氏、電話前幾碼、地址的縣市行政區，這些可能會拿來統計的部分。

如果不需要統計，可以把「部分保留」改成「全部隱藏」，這樣所有敏感資訊就會全部轉為編碼。

STEP 3｜人工調整

不過自動偵測一定會有誤判，所以建議大家在預覽階段先瀏覽一下。

比如你如果認為銀行帳戶屬於敏感資訊，但沒有被隱藏，可以用滑鼠圈起來，選好類別，就能手動隱藏。

而抓錯，或認為不需要隱藏的，點一下標記，按「取消去識別化」，就會恢復原文。

如果想檢視這份文件有多少內容被去識別化，也可以直接「展開偵測清單」快速瀏覽：

STEP 4｜下載

確認一切都符合預期後，點擊上方的「下載」，你就會獲得兩個檔案，一個是去識別化的文件，另一個是 CSV 編碼表。

這兩個檔案是一組的，如果 CSV 編碼表沒有好好保存，未來資料會無法順利還原。

STEP 5｜上傳 AI

完成資料去識別化後，我們就能放心地提供給 AI 了。

比如把 Word 上傳給 ChatGPT，請他協助確認合約細節，比如跟他說：

我是甲方，請從法務角度確認合約中是否有不利於甲方的條款，如果有，請給出合適的處理方案，並直接從原本 Word 契約書裡面調整，調整的部分用紅字標注

等 AI 優化完後，我們拿到了新版的契約書，變更的部分都有用紅字顯示。

STEP 6｜還原

接下來，如果你確認變更的條款都符合預期後，可以回到工具「還原」的分頁。

把 AI 處理完的檔案，跟剛剛的編碼表一起上傳；就會看到內容都被還原了，並且檔案可以順利下載。

STEP 7｜自訂規則

那如果你覺得內建的這些規則還不夠用，想要自己新增，這個工具也有保留彈性。

這邊我點擊「換一個檔案」，用範例中客戶資料 Excel 來示範，先點擊「載入」。

你可以看到第一欄就是「客戶編號」，如果你想要把它隱藏，手動一行一行處理太慢了。

此時，可以到「偵測規則」的分頁，來新增自訂規則，如果你不知道規則要怎麼寫，可以按「複製 AI 提示詞」。

貼給你常用的 AI，再補上客戶編號長什麼樣子，AI 就會幫你把規則寫好。

把規則貼回來，按「新增規則」，接著回到去識別化頁面，你會發現整欄客戶編號都有去識別化了。

③ 在 AI 時代，打造客製化的工具

這個工具，其實我是用 Vibe Coding 完成的，接下來跟大家分享，我設計工具時的思路。

未來如果你也想做自己的工具，可以參考看看。

要不要用資料庫

首先規劃工具的時候，我會先判斷資料是否要儲存，以及「資料庫」是否為必要元素。

因為多了資料庫就代表你需要建立完整的系統架構，需要涵蓋前端、後端，以及註冊、登入、管理、維運等元素。

除了複雜度大幅上升外，資訊安全的問題也隨之而來。

以今天介紹的「去識別化工具」為案例。

如果我有設計對應的系統架構，儘管可以獲得更準確的辨識，甚至對會員進行收費。

但相對的，我就需要保障會員上傳的資料，並提供相應的售後服務。

在評估完要付出的成本與可能獲得的收益後，我最後決定採用「純前端網頁」的形式分享。

檔案只在瀏覽器裡處理，不會傳到任何伺服器，少了一整層要保護的資料。架構也單純很多，非常適合用 Vibe Coding 來做。

從自己的需求出發

另外大家在選擇 Vibe Coding 的主題時，建議從自己實際的需求出發，這樣功能才會想得夠細，並且有辦法判斷成果是否符合需求。

不過 AI 在完成第一個版本後，一定會有很多不夠完善的細節需要優化。

絕對不是網路上那些號稱「一個指令生成系統」那麼簡單。

除了去識別化還要能還原

比如 AI 給我提供的第一個版本，就只有提供去識別化的功能。

但實際上手操作一段時間後，我就發現如果去識別化後無法還原，那其實很多應用會受限。

比如合約調整完畢後，難道我要自己手動把原有資料填寫回去嗎？

所以我就請 AI 把敏感資料設計為 CSV 編碼表，讓我可以還原。

遮的範圍要剛剛好

但講了幾堂課後，我發現把敏感資料全部遮擋雖然解決了去識別化的問題。

但有時這些敏感資料會需要拿來統計分析，像是用身分證前兩碼看地區跟性別，或是用地址的縣市、行政區做分析。

全部變成編碼，就會無法回推

所以我後來又加上了「部分保留」的功能，資訊會根據不同類別進行對應的遮擋。

規格驅動開發

也跟大家分享我在製作這款工具時，使用的是「規格驅動開發（SDD）」的方式。

這個技巧可以讓 AI 在寫程式前，先用文字幫你把專案的細節完善，畢竟不是每個人都擅長寫專案的需求規格。

關於這個議題，過去我有拍兩隻影片分享，分別是 OpenSpec 與 Spec Kit 的應用。

它們可以幫你把模糊的需求變得具體，並設計成完善的任務清單，讓我們用更省力的方式，完成有品質的成果。

結語：把資訊交給 AI，責任還是要自己扛

在影片的最後提醒大家幾件事：

1. 如果你發現工作中的某個流程很繁瑣，或許可以自己 Vibe Coding 一個工具來解決
2. 上傳敏感資料前請先去識別化，但自動偵測可能會有誤判，還是要自己檢查一遍
3. 編碼表可以把所有資料還原，不要跟檔案一起丟給 AI，否則去識別化的意義就消失了
4. 去識別化，不等於匿名化，像是資料裡寫著「某縣市行政區的鋼材加工廠」；如果那個行政區剛好只有這一家鋼材加工廠，就算公司名稱遮掉了，大家還是一看就知道是誰，所以要去識別化到什麼程度，還是要依照資料的內容，自行評估。

別忘記，當你把資料交給 AI 的那一刻，責任還是要由人類來承擔。

今天分享的這套去識別化工具我有把它免費開源：

GitHub 連結：https://github.com/dean9703111/data-deidentification

如果有功能想要新增，可以 Fork 修改成適合自己的版本；歡迎路過按個 Star，讓我知道自己的分享對大家有幫助。

好的，今天的分享就到這邊，如果這個系列有給你啟發與幫助；別忘了按讚、訂閱，並把文章分享給需要的朋友。

從 2023 年出版全台第一本 ChatGPT 應用專書開始，我的人生就像按了加速鍵。

過去沒想過的機會，一口氣全擺在我的眼前：「企業內訓、校園演講、媒體採訪、線上課程、雜誌邀稿。」

那時，是我經營自媒體的第 4 年，所以很清楚這些機會有多難得；一旦錯過，或許這輩子就再也不會遇到了，所以幾乎是用「燃燒生命」的模式在工作。

包含假日，我平均每天工作 12 小時；如果把它想像成加班，大概就是每個月加班 180 小時。

但⋯人是有極限的，儘管我很熱愛寫作與講課，也很享受自我成長；但長時間過勞後，我才真正明白：

「不管你對一件事有多麼熱愛，一旦超量了，都會變成毒藥。」

這是一支討論「成長、過勞與休息」的影片，主角除了我，也有身旁的朋友。

如果你正在上班之餘經營副業、自媒體，或打算創業，或許我們的經歷能成為你的借鑑。

如果想用「聽」的，可以觀看 YT 喔 👉

對自我成長、職涯發展、AI 工具感興趣的朋友，歡迎按下訂閱按鈕。

明明已經累到不行，為什麼還是不敢休息？

① 高效的背後，往往伴隨著過勞

在某次校園演講的 QA 時間，有個老師舉手發問：

「你斜槓這麼多領域，是怎麼平衡工作跟生活的？」

我苦笑著回答：

「其實我幾乎沒有好好休息過，失眠、憂鬱、焦慮，一直困擾著我；儘管表面看起來好像很有效率，但背後，是用透支身體換來的。」

我們常說物以類聚，我身邊也有不少「高效率」的老闆與自媒體經營者。

大家都很會用工具提升效率，但內心卻像一條緊繃的弦，從來沒有真正放鬆過。

聽起來是不是有點反直覺？

這是因為當我們用工具省下時間，就會想用這些多出來的時間，去做更多的事。

對公司、對自媒體來說，這是一個正向循環；但對身體跟精神來說，卻是一個惡性循環。

因為效率提升，就代表你要做更多決策、扛更大的責任。

那些多出來的時間，反而被更深的焦慮、更重的疲憊填滿了。

這邊跟大家分享兩個朋友的故事

第一位朋友，原本很瘦

但自從他當了老闆，我就再也約不到他了；不是因為他發達就忘記朋友，而是他忙到連通勤時間，都在趕給客戶的簡報。

創業兩年，他搞定了上百個案子，也胖了將近 30 公斤，每天平均睡不到 4 小時。

從事業來看，他非常成功，一年營業額幾千萬，但這種工作模式能持續多久呢？

第二位朋友，原本是「千杯不醉」

他為了把自媒體做大，辭掉穩定的工作，成立個人工作室；但創業一年後，他變成了「一杯就倒」，因為在自負盈虧的高壓下，他的健康早就亮紅燈了。

在別人眼中，這些人都是事業有成、很有能力的人；但只有身邊的人才知道，他們的身體，其實隨時都可能垮掉。

② 該睡覺了，但身體很累，腦袋停不下來

全職創業，最大的壓力是「錢」。

收入不穩定，很多款項又要隔好幾個月才入帳，就算營業額高，也可能卡在資金周轉。

而我的選擇，是在有本業的狀態下做副業；因此不會有金錢上的壓力，但「時間」就相對有限。

正職的下班後，就是副業的上班前，永遠沒有真正下班的時候。

幾乎每天都忙到凌晨才能休息，但上床，不代表睡得著；不管當天有多累，只要大腦上一刻還在瘋狂運轉，我就沒辦法入睡。

更頭痛的是，躺上床後我反而靈感爆棚，先前想不通的問題，往往在剛有睡意的那一刻，就想通了。

因此我只好爬起來做筆記、錄音，畢竟靈感稍縱即逝；但把想法記下來後，原本累積的睡意，也跟著煙消雲散。

隔天被鬧鐘叫醒，眼睛總是布滿血絲，但我還是會告訴自己：

「再撐一下！未來的我一定會感謝今天的努力。」

然後從冰箱拿一罐能量飲料，一飲而盡。用冰涼的氣泡跟超標的咖啡因，強制開機，讓我有體力面對白天的正職工作。

下班後，繼續寫書、備課。忙到凌晨，躺上床，然後，又是一個睡不著的夜晚，就這樣日復一日。

其實我有嘗試過很多幫助睡眠的方法：

跑步、重訓、氣功、瑜伽、伸展、按摩、頌缽、褪黑激素、貼耳穴⋯

但⋯幾乎沒有用。最後，通常是靠一杯威士忌，讓大腦慢慢放鬆。

對我來說，小酌一杯是給忙碌一整天的自己，一點獎勵。

但這不是一個好習慣，因為酒精有成癮性；喝多了，隔天可能宿醉，精神反而更差，身體也會慢慢產生耐受性。

所以如果你也有失眠的問題，請尋求專業的醫療協助，不過別忘記，睡眠相關的藥物可能也有依賴性。

如果源頭壓力沒有解決，任何方案都是治標不治本；其實我也很清楚，失眠的主要原因，是我給自己的壓力。

對自己要求嚴格的人，往往會用更極端的手段逼自己。

但自律帶來焦慮，焦慮帶來失眠，失眠帶來憂鬱。

不管是失眠、焦慮還是憂鬱，都會讓人耐心變低、得失心放大、講話帶有攻擊性。

而最後受傷最深的，往往是自己跟身邊最親近的人。

③ 捨不得放手，只會讓自己更疲憊

其實我也知道，治療失眠跟焦慮的方法，就是「不要貪心」。

但當時我心裡有一股執念，每次我想放下一切休息，它就會跟我說：

「你很清楚眼前這些機會有多難得，你甘心放棄過去辛苦累積的成果嗎？」

因為我選的賽道是 AI，這是一個變化非常快的主題，只要稍微放慢節奏，過去累積的優勢，很快就會被後來的人超越。

有一位經營自媒體很成功的 KOL 說過一句話：

「你越成功，就越難放手。」

因為害怕失去，心裡會出現一種很強烈的相對剝奪感，這種感覺會一直告訴你：

「如果現在放下，別人就會取代你的位置。」

「曾經擁有的一切，都不再屬於你。」

即使身體已經發出警訊，卻還是被這種想法牢牢困住，也許你曾經聽過這段話：

「只要建立一套賺錢系統，就能永久獲利、享受人生。」

但這其實是個謊言，只要你的系統被市場證明有效，馬上就會有人做一樣的事，來跟你搶市場。

拿線上課程來舉例，課程推出後，雖然可以一直賣；但 9 成以上的營收，都來自有打廣告的前兩個月。

如果同行看到你的課賣得不錯，很快就會開一個類似的主題來競爭；假如你沒有持續在社群上分享新觀點，很快就會過氣。

這也是經營自媒體很累的原因，在這個注意力稀缺的時代，你只要消失一段時間，就會被大家遺忘。

但人的能量是有極限的，一堂課、一本書、一個產品，常常就把創作者過去累積的知識用光了。

如果你發現，有些創作者的作品越來越沒新意，其實就是知識的輸入跟不上輸出，卻又逼自己要定時發作品的結果。

④ 學習放下，不是要你放棄

現在回頭看當年的自己，我才明白，那時候透支身體的努力，其實是拿未來的健康，去換眼前的成就。

你問我會不會後悔？

老實講，我不後悔；因為有些事，如果不拚一把，以後可能就再也沒機會了。

但經歷那段失眠、憂鬱、焦慮的日子之後，我也知道自己不可能把握住生命中的每個機會。

有時候，放下一點執念才是最重要的智慧。

不過說起來容易，做起來很難；最煎熬的地方在於，你明明知道自己應該停下來休息，心裡卻又捨不得那些辛苦累積的成果。

所以後來，我換了一個做法。

把休息排進行事曆

以前，我的行事曆是先排工作，但現在反過來，先在行事曆，把休息的時間排進去。

把休息，當成一個正式的行程；然後，再安排工作。

這樣一來，行事曆會幫我把關，時間滿了，就是滿了。

不用每次都跟自己拉扯「要不要接」，而這個改變並不是要讓自己從場上消失。

合作還是會接，影片還是會拍；只是換成一個，自己能長期承受的節奏。

人生還很長。活著，就還有機會；走了，再多機會都不屬於你。

當壓力超出自己的負荷範圍時，不要忘記，你永遠有選擇的權利。

每個人的人生都是自己選擇而來的，這支影片也只是分享我的心路歷程。

希望大家看完後記住這段話：「不管人生、自媒體、創業，都不是一局定勝負的遊戲；但健康的身體，是最基礎的參賽條件。」

好的，今天的分享就到這邊；如果這篇文章有給你啟發與幫助，可以順手按個讚，把文章分享給需要的朋友。

尤其是那個你知道，已經過度努力的朋友。

上一集以 YouTube 留言彙整工具為案例，讓大家了解在 AI 時代只要有需求，就算工具不常使用，甚至只有自己一個使用者，那也值得開發。

因為在 AI 的幫助下，開發的時間成本已經大幅下降。

但小工具因為功能單純，所以只要講清楚需求，AI 就能幫你搞定；但如果今天要設計一款公開給大家玩的遊戲，涵蓋註冊登入、遊戲商城、玩家排行榜等功能。

你會發現隨著功能增加，AI 的執行能力越來越差

請他改一個功能，結果另一個功能壞掉；開新的對話窗，就忘了過去的約定。

這是因為當系統功能變複雜後，如果缺乏規格文件，不管人還是 AI 都會「失憶」。

所以這篇文章要分享用「規格驅動開發（SDD）」的技巧，會透過 Spec-Kit 這個工具，幫大家把模糊的需求變成具體的規格。

並在每次功能迭代時，記錄為何要做這次的修改，這樣未來維護時，才知道當初的決策依據。

完整的 Demo，可以觀看 YT 喔 👉

對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。

【Claude Code × Spec-Kit 教學】用規格驅動開發全端專案，再搭配 MCP 部署到 Hostinger VPS | AI Agent | Vibe Coding | SDD

為了提升專案的趣味性，這次會帶大家實作常常在廣告上看到的「割草遊戲」。

除了設計前端網頁的遊戲機制外，還涵蓋了玩家的註冊、登入，以及排行榜與升級制度，這些需要後端與資料庫的功能。

① 開發環境設定

而在正式開工前，我會先帶大家確認電腦的開發環境是否準備就緒，接著安裝 Spec-Kit 完成專案的初始化。

② 透過 Spec-Kit 開發

然後我們就要透過 Spec-Kit 來設計規格文件，這邊也會分享製作遊戲能參考哪些資源，以此減少 AI 消耗 Token 的額度。

在確認規格符合自己的需求後，就可以讓 AI 幫我們完成遊戲的初版。

③ Git 版控與迭代功能

親自驗證遊戲基礎操作都沒問題後，我們要先加入 Git 做版本控制，並將專案同步到 GitHub 雲端保存。

接著再測試一些極端情境，比如手機畫面是否有破版；並在遊玩的過程中，思考哪些細節可以進行優化。

而這些我們變更的決策，也可以透過 Spec-Kit 來進行迭代。

④ 透過 Hostinger 部署上線

確認遊戲各方面都符合期待後，我們就能部署到線上環境了。

因為最終成品涵蓋前端、後端、資料庫，所以這次我們會使用到 VPS 虛擬主機。

第一次接觸也不用擔心，在安裝 Hostinger MCP 後，透過白話文便可讓 AI Agent 協助完成部署與後續版本迭代的任務。

⑤ 上線後的安全性考量

但專案上線才是考驗的開始。

比如我們提供了註冊與登入流程，但有設計忘記密碼與使用者管理的功能嗎？是否需要加上信箱驗證的設定？

以及目前後端 API 有做什麼防護設定嗎？

這些問題，都是當真實使用者進入後，會開始浮現的。

⑥ 總結與比較

在影片的最後，我會分享自己這一年來使用規格驅動開發的心得；並比較過去介紹的 OpenSpec 跟這次的 Spec-Kit 有什麼差別。

① 開發環境設定，安裝 Spec-Kit 建立專案

如果你是第一次接觸 AI Coding，可以先參考上一集影片來安裝開發環境。

這集使用 Claude Code 作為 AI Agent，需要升級到 Pro 才能使用；但如果你熟悉的是 Codex、Cursor 或 Antigravity，其實開發流程都是一樣的。

另外我們會使用到 Node.js 開發專案、Git 版本控制、GitHub 做雲端同步，並用 Docker 啟動資料庫容器。

環境檢查

這邊先打開你熟悉的程式碼編輯器，我用的是 Cursor，你想用 VS Code、Antigravity 也都可以

https://cursor.com/zh-Hant/download

開啟程式碼編輯器後，我們先打開終端機，貼上下面的指令，確認基礎環境都完成安裝

nvm -v; node -v; git -v; docker -v

如果版號都有顯示，就代表安裝完成

安裝 Python 與 uv

接下來要安裝 Python 與 uv，因為 Spec-Kit 的指令列工具是用 Python 寫的

首先在終端機輸入 python3 –version，要 3.11 以上，太舊或找不到就到官網裝最新版

https://www.python.org/downloads/

接著安裝 uv，它負責安裝與管理 Python 工具，如果你是 macOS 或 Linux 可以在終端機輸入：

curl -LsSf https://astral.sh/uv/install.sh | sh

如果你是 Windows 則可參考指令：

powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

裝完開啟一個新的終端機，輸入 uv –version，出現版號就代表你成功嚕

安裝 Spec-Kit，建立專案

接著我們能透過 uv 來安裝 Spec-Kit

uv tool install specify-cli --from git+https://github.com/github/spec-kit.git

安裝完成後，你可以開啟一個存放專案的資料夾，輸入下面的指令來建立專案

specify init web-survivor --integration claude

其中 web-survivor 是專案名稱，而 integration 後面的 claude 則是我們指定的 AI Agent

完成後，我們要用 cd 指令進入這個專案資料夾，並透過程式碼編輯器打開它

cd web-survivor
cursor .

此時左側會看到兩個資料夾，「.claude」裡面儲存了 Spec-Kit 相關的 Agent Skill

裡面涵蓋了釐清需求、建立規則、撰寫程式的 SOP，如果你是第一次接觸 Agent Skill，我過去有專門做一期影片講解。

而下面的「.specify」則是存放規格流程需要的模板與腳本。

安裝 Chrome MCP

接著我們打開終端機，為了讓 AI 可以操作 Chrome 瀏覽器完成自動化測試，我們要先裝一個 MCP 外掛。

但安裝前要確認電腦有安裝 Chrome 瀏覽器，然後就可以在終端機貼上下面指令進行安裝：

claude mcp add chrome-devtools -s user -- npx -y chrome-devtools-mcp@latest

這邊因為我已經安裝過，所以他說這個工具已經存在了。

確認 MCP 與 Skill 安裝完成

完成後在終端機輸入「claude」，然後在對話輸入「/mcp」，就可以看到剛剛安裝的 chrome-devtools 連線成功。

按下 esc 離開後，接著輸入「/speckit」，可以看到相關的 Skill 都已經安裝完成。

下載 CC0（可商用）的美術與音效

但在撰寫規格前，先做一件很多人會忽略的事情，那就是給 AI 準備可以使用的素材，這能讓最終的成果有風格一致的美術效果。

這次我是從下面幾個網站準備素材的：

• Kenney：https://kenney.nl/

首先是 Kenney，點擊 Assets 後，你可以看到豐富的素材資源，這次遊戲的角色、怪物、武器都用它的。

有一點需要特別提醒，就是確認素材的授權為 CC0，這樣才可以放心的使用。

• OpenGameArt：https://opengameart.org/

而背景音樂，則可以在 OpenGameArt 選擇，你可以根據自己的喜好挑選素材。

如果不知道怎麼選，可以先回到程式碼編輯器，我有準備練習的參考資源，直接貼上我的指令，讓 AI 下載並分類整理：

請把下列素材下載到 assets/ 並解壓分類（sprites／particles／ui／audio），
完成後生成 ASSETS.md，記錄每包的名稱、來源頁、授權（皆為 CC0）：
- https://kenney.nl/media/pages/assets/tiny-dungeon/f8422efb44-1674742415/kenney_tiny-dungeon.zip
- https://kenney.nl/media/pages/assets/particle-pack/f8fe0f8cb8-1677578741/kenney_particle-pack.zip
- https://kenney.nl/media/pages/assets/ui-pack/f651646eab-1718203990/kenney_ui-pack.zip
- https://kenney.nl/media/pages/assets/impact-sounds/87b4ddecda-1677589768/kenney_impact-sounds.zip
- https://kenney.nl/media/pages/assets/interface-sounds/fa43c1dd4d-1677589452/kenney_interface-sounds.zip
- https://kenney.nl/media/pages/assets/rpg-audio/8e99002d76-1677590336/kenney_rpg-audio.zip
- https://opengameart.org/sites/default/files/5%20Action%20Chiptunes%20By%20Juhani%20Junkala.zip
- https://opengameart.org/sites/default/files/battleThemeA.mp3
只准使用上述來源，不得自行搜尋或下載其他素材。

這裡我將資源分成幾塊： sprites 是角色與場景圖塊 particles 則是武器效果的粒子貼圖 ui 是遊戲畫面的常見的操作按鈕 audio 很好理解，就是背景音樂和音效。

稍等一段時間後，AI 就將資源下載好了，有興趣的朋友可以在 ASSETS.md 的檔案中深入了解每個素材的用途。

提供撰寫遊戲的說明書

另外這次遊戲我採用 Phaser 4 作為開發框架，他在處理 2D 遊戲上有很棒的表現：

https://github.com/phaserjs/phaser

儘管我們可以讓 AI 自由開發，但指定明確的框架，並透過 Skill 告訴他框架如何使用，可以少走很多彎路。

這邊開啟一個新的終端機，貼上下面的指令，就能把 Phaser 的 Skill 搬到我們的專案中：

git clone --depth 1 --filter=blob:none --sparse \
  --branch v4.2.1 https://github.com/phaserjs/phaser.git phaser-tmp
git -C phaser-tmp sparse-checkout set skills
mkdir -p .claude/skills
cp -R phaser-tmp/skills/* .claude/skills/ && rm -rf phaser-tmp

完成後，在「.claude/skills」資料夾下就能看到剛剛新增的 phaser 技能。

② 用 Spec-Kit，建立全端網頁專案

在完成前置作業後，我們先回到與 Claude 的對話視窗，接下來要使用 Spec-Kit 來開發遊戲。

STEP 1：/speckit-constitution 建立專案規則

首先我們要建立這個專案要共同遵守的原則，設定好後，接下來的規格文件與執行計畫都會參考他

/speckit-constitution
1. 遊戲核心必須使用 Canvas/WebGL 遊戲框架，不得以 DOM 元素硬做遊戲。
2. 三層架構：前端遊戲、後端 API、資料庫；本機與部署皆以 docker-compose.yml 啟動。
3. 安全底線：密碼一律雜湊保存，不得明文或可逆加密；執行 API 必須通過身分驗證。
4. 所有設定透過環境變數管理；.env 永不進 git，必須提供 .env.example。
5. 美術與音效一律使用 assets/ 內預先放好的 CC0 素材，來源與授權記錄於 ASSETS.md。
6. 其餘未明定的細節，可在不牴觸上述原則下自行決策，但決策必須記錄於文件。

1. 第一條規則是先定下使用的技術，否則 AI 很可能用 DOM 元素硬做遊戲
2. 第二條則說明專案的架構，其中使用 docker-compose.yml 是為了讓專案在本機與部署時都能共用
3. 第三條是安全規範，確保使用者密碼的安全性，以及後端 API 存取要經過的驗證
4. 第四條也跟安全有關，因為「.env」這個環境變數會儲存很多機敏資訊，所以不能加入版控，但要提供一份 example 的參考值
5. 第五條是限定 AI 能使用的素材範圍，這樣能避免 AI 上網亂抓一些沒有授權的資源
6. 第六條是保留 AI 執行的彈性，但同時要求他決策要寫進文件讓我們參考

等 AI 執行完成後規則就被寫進 .specify/memory/constitution.md

打開檔案會發現，它會在我們提供的指令上補充許多細節；每條都會在底下補上存在的「理由」，並且在最後多出了 Governance 說明這個憲章的使用規範。

底部還有版本號與批准日期，日後要求 AI 調整這份專案規則時，版本號也會自我更新。

STEP 2：/speckit-specify 撰寫規格

在設定好專案規則後，下一步就可以讓 AI 開始撰寫規格，這一步我們要說明遊戲外型、使用規則、驗收標準：

/speckit-specify
建立一款名為「Web Survivor」的 2D 網頁肉鴿割草生存遊戲。
遊戲目標：
玩家在俯視角地圖中移動閃避，武器自動攻擊，面對不斷生成的怪物撐過 3 分鐘取得高分；
已登入玩家結算後回寫金幣、永久升級進度、個人最高分與排行榜。
核心規則（必須遵守）：
- 玩家只控制移動（WASD／方向鍵）；武器自動攻擊；怪物死亡掉落經驗與金幣。
- 3 種武器原型：直線投射、環繞近戰、範圍光環；每個最高 5 級，每次升級會有對應效益（速度、數量、範圍半徑），武器可同時持有；滿級武器不再出現在升級選項。
- 3 種敵人：普通、快速、坦克；生成數量與強度隨時間遞增。
- 經驗達標時暫停，出現 3 個隨機升級選項。
- 每局 3 分鐘，死亡或時間到進入結算；單局時長必須可由設定調整（供開發驗證）。
- 未登入可遊玩但不能提交成績；username 全站唯一（不分大小寫）；密碼不可明文保存。
- 金幣可購買永久升級（至少 3 種、各 5 級），下一局生效。
- 排行榜顯示前 100 名，每人只留個人最高分。
開放決策（實作時自行平衡，決策記錄於文件）：
- 武器命名與手感、傷害曲線、敵人血量成長、掉落率、磁吸範圍、永久升級的種類與價格。
- 視覺與音效回饋細節（受擊表現、撿取音、升級演出）。
美術與音效：
- 16×16 像素 dungeon 風；角色、怪物、武器、道具一律取自 assets/ 的 Kenney Tiny Dungeon；音效取自 assets/audio。
成功條件（驗收用）：
- 玩家可完成一局 3 分鐘遊戲；三種武器自動攻擊；升級三選一正常。
- 結算畫面顯示分數、擊殺數、金幣；登入玩家成績正確回寫；較低分不覆蓋最高分。
- 以既有名稱（含大小寫變體）註冊被拒；排行榜正確顯示前 100 名。
- 同屏 300 隻敵人維持流暢（30fps 目標）。

這個指令分成五段，一開始先說明我想做什麼類型的遊戲，讓 AI 對成品有基本的想像。

1. 「遊戲目標」講的是一局的流程，從開始玩、撐過時間、到結算把資料寫回去
2. 「核心規則」涵蓋了操作模式、遊戲機制，還有武器、敵人、升級規範，這些數字寫死，AI 才不會自由發揮
3. 「開放決策」則是把「手感、數值、價格、音效回饋」這類玩過才知道好不好的，交給 AI 提案
4. 「美術與音效」就是明確指定使用資源
5. 最後「成功條件」則是驗收清單，這樣 AI 完成後才有明確的標準

稍等一段時間，AI 會把初步的規格寫到「specs」資料夾底下，這邊你會看到資料夾開頭為「001」，這個數字會隨著功能迭代遞增。

打開「spec.md」後，就可以看到 Spec-Kit 根據不同使用情境撰寫了 User Story。

這份文件我建議大家花點時間看一遍，因為很多細節都是 AI 自己補充的，但是否符合期待，需要由你親自把關。

如果有想調整的部分，你可以直接編輯文件，又或者跟 AI 討論自己的想法來優化。

在這個階段調整，會比後續 AI 做出來不符預期大改更有性價比。

STEP 3：/speckit-clarify 釐清

如果你自己也看不出哪些有問題，那可以在對話窗輸入

/speckit-clarify

這個指令會讓 AI 主動逼問你，釐清規格中沒想清楚的地方；像這邊他就開始問問題了，你可以根據自己實際的需求回答。

回答後，AI 會自動把內容彙整到 spec.md 中。

其實這個來回對答的流程，也是在告訴大家「規格不可能一次就完善」，所以不要再被那些一行指令就生成完美系統的話術給騙了。

STEP 4：/speckit-plan 技術規劃

在釐清專案「要做什麼」之後，接下來就能進入到「怎麼做」的環節

如果你心中已經有明確的技術組合，可以跟我一樣在這個階段提供給 AI

當然，如果你沒有任何想法，也可以讓 AI 直接幫你規劃

/speckit-plan
技術限制：
- 前端：Vite + TypeScript + Phaser 4
- 後端：Node.js + Express + Prisma（含 migration）
- 資料庫：PostgreSQL
- 遊戲參考 Phaser skills 實作
- 防作弊：登入（JWT）後才可提交成績

像這邊我就明確要求前端要使用的網頁與遊戲框架，後端與資料庫的部分，則是使用我熟悉的工具。

另外遊戲實作這塊，我要求使用 Phaser skills，避免 AI 使用到舊版寫法，並且因為遊戲有設計排行榜，所以我特別要求必須登入後才能提交成績。

等專案技術規劃完畢後，你會看到他生成了許多文件，涵蓋技術脈絡、相關決策、資料流、API 設計與後續啟動與驗證的文件。

STEP 5：/speckit-tasks 與 /speckit-analyze

做到這一步，專案的規格文件已經非常詳細了，接下來只要輸入 /speckit-tasks，就能把複雜的計畫拆解成可執行的任務清單。

等 AI 完成後我們打開「tasks.md」可以看到每個任務有對應的依賴關係與驗收條件。

一開始前面的 Checkbox 都是空的，等 AI 實作完成後才會打勾。

另外如果你對目前的設計還不夠放心，可以執行 /speckit-analyze 做交叉檢查；他能協助確認規格(spec)、計畫(plan)、任務(task)三份文件是否存在矛盾，以及是否有漏掉的需求。

STEP 6：/speckit-implement 開始實作

另外提醒大家，與 AI 對話的內容越多，會對 Token 造成較多的消耗。

因為任務文件都已經建立完成了，所以我們可以先用 /clear 來開啟新對話窗。

然後輸入 /speckit-implement 讓 AI 根據 Task 開始實作；通常會執行 30 分鐘以上，所以送出指令後，大家可以去做其他的事情，不用一直守在螢幕前

這次 AI 總共執行了一個多小時才完成任務，如果不知道如何啟用系統可以問他：

系統如果還沒啟動，請幫我啟動
並給我對應網址

拿到網址後，你可以看到遊戲畫面就是我們提供的素材，走低像素風格，這邊我們操作遊戲來確認是否符合預期：

首先這個遊戲即使不登入也是可以直接遊玩的，並且打怪也都符合預期，吸收足夠的經驗後也能升級武器；並且除了背景音樂外，擊倒怪物或受傷時也有對應的音效。

等這局玩完後，接下來我們嘗試註冊帳號來玩一局；這邊我發現了一個問題，有部分的按鍵打下去沒有反應。

沒關係，我們先完成註冊的流程，確認是否還有其他的問題。

OK，大體上都符合預期，並且玩完這局後，可以看到我們是有進入排行榜的；並且金幣有保留，可以用來升級角色。

修復問題

接下來我們再回到與 Claude 的對話，請他協助修復我們遇到的問題，直接跟他說：

請解決註冊時部分按鍵無法使用

稍等一段時間，AI 就把問題解決了。他說是因為註冊時，表單會吃掉 WASD 與空白鍵導致，調整後就符合預期了。

修復完成後，先登出目前的帳號去重新註冊，以此來驗證問題有成功被修復，可以順利完成註冊流程。

③ Git 版本控制，Spec-Kit 迭代功能

在初步確認遊戲基礎功能符合需求後，我們要給這個專案加上版本控制，這邊會使用到 Git 這個工具。這樣就算 AI 未來把專案改壞了，我們都還有回頭路可以走。

建立第一個存檔點

這邊先請 AI 幫我們產生 commit，可以直接在對話中跟 AI 說

請根據變更設計 commit 訊息，並完成 commit

你可以把 commit 想像成遊戲的「存檔點」，每完成一個階段就存一次檔，就算後面打輸了，也能回到上一個存檔點重來。

畢竟 AI 修改程式碼的幅度很大，有時你只是請他調整一個小功能，他卻順手動了其他地方。

如果沒有存檔點，改壞就真的回不去了

另外也帶大家看一下「.gitignore」這個檔案：

前面跟大家說 Git 是版本控制工具，而 gitignore 的功能，就是用來存放不要加入版本控制的檔案。

像是填寫隱私資訊的環境變數、存放套件與建置產物的資料夾、日誌暫存檔這些都是不需要加入專案版本控制的。

推上 GitHub，為部署做準備

commit 完成後，我建議把專案推上 GitHub，除了多一份雲端備份，後面部署上線時也會用到。

點擊左側的「Source Control」，在左下方可以看到剛剛 commit 的訊息。

點擊「發布 Branch」便可建立 GitHub repository，如果想公開讓大家看，就選擇 public，但私人專案用 private 即可。

推送成功後，點擊「在 GitHub 上開啟」，看到專案的資料有上傳上去，就代表你成功嚕！

用 Spec-Kit 優化專案

有了存檔點後，我們就可以來繼續優化專案了，像這邊我就發現這款遊戲有以下問題：

1. 像切換到手機畫面時，除了畫面還是橫式的，還會無法操作
2. 另外現在的遊戲介面有點太簡約了，希望能變得更精緻一些
3. 考量到遊戲玩到一半可能會被其他事情打斷，設計一個暫停按鈕會更好
4. 還有武器升級時，希望有對應的武器圖片，這樣我們才知道自己選了什麼

因為上面這些想法屬於「需求變更」，所以跟先前修正錯誤時直接請 AI 處理不同。

我們要透過 Spec-Kit 來進行優化，有了變更文件後，日後回頭看，你會更清楚當初為什麼做出這些決策。

但因為過去我們已經跟 AI 聊了很多，所以要輸入 /clear 來清除對話，避免 AI 因為新舊需求混在一起，導致回覆品質下降。

另外也跟大家介紹 Agent Skill 不同的觸發方式，前面我們都是透過「/」指令的方式來觸發，其實我們也能透過被動的方式來觸發，像這邊我就直接跟 AI 說「使用 spec-kit 來優化下面功能」：

使用 spec-kit 優化下面的功能
- 畫面需考量手機排版，避免破版問題，手機打開預設為直式全螢幕
- 手機單手可玩，手指按下的位置就是搖桿原點，往哪滑就往哪走，畫面任何位置都能按
- 在遊戲設計一個暫停按鈕
- 主選單、遊戲中的資訊列、商店、結算畫面排版再精緻一點，icon 取自 assets/ui
- 升級時，每個選項要有對應的武器圖片，要與實際武器一致

但提醒一下大家，這種被動觸發的方式，如何使用 Skill 就會交由 AI 判斷

以這次的執行來說，他就是一口氣走完釐清規格、技術規劃、任務拆分、執行實作的流程。

如果想知道每個段落做了什麼，在 specs 資料夾底下有一個 002 開頭的資料夾，裡面就有設計的細節。

另外在 AI 完成大幅修改後，建議大家讓它重新啟動一下，避免系統還卡在舊版本，方式很簡單，直接跟他說：

重啟系統確認變更生效

驗收變更符合預期

重啟後，我們打開瀏覽器直接玩一局，先按 F12 切換成手機的顯示模式，可以看到主選單的排版有優化過。

開始遊戲後，確認可以單指操控，玩到一半也可以暫停，並且升級時有明確的介紹與武器圖片。

Commit & Push

接下來回到程式碼編輯器，先輸入/clear開啟一個新對話視窗，然後請 AI 幫我們把變更 commit 並更新到 GitHub：

請根據變更設計 commit 訊息，並完成 commit 與 push

等 AI 完成後，可以到 GitHub，確認都有更新上去：

如果教學看到了這邊，可以幫這篇文章拍拍手～

④ 安裝 Hostinger MCP，將專案部署上線

在自己電腦確認功能可以運行後，就可以準備部署上線了。

因為這次的專案涵蓋前端、後端、資料庫，所以會需要一台雲端伺服器；這邊我以 Hostinger 的 VPS 來做部署示範。

建立 VPS：方案、價格與優惠碼

進入 Hostinger 官網後，可以透過 Google 帳號註冊與登入

https://hostinger.com/deanlin

點擊左側的「VPS」，選擇「VPS Hosting」，進去後你會看到一張世界地圖，這是在選擇伺服器的位置，建議選擇延遲比較低的機房，這邊我就選擇 Malaysia。

然後他會詢問你要在機器上安裝什麼，這邊建議大家選擇「Ubuntu」這個作業系統，版本的部分，選擇最新的那個就好。

在存取 VPS 的方式上，你可以設定 root 權限管理者的密碼，又或者增加 SSH Key 來登入也是可以的。

而下一步，建議大家可以把 Malware scanner 這個保護 VPS 安全的功能打開；還有 Docker manager 也建議打開，這可以讓我們後續部署更加便利。

點擊下一步後，會介紹不同機器的方案；原則上機器的規格越好，價格就越高；另外價格也會隨著機器的租賃週期有所不同，週期越長價格越便宜。

如果輸入我的優惠碼「DEANLIN」，會再獲得 10% 的優惠。

安裝 Hostinger MCP

這個範例我以「KVM 2」來進行示範，在 VPS 建立完成後，我們要來安裝 Hostinger 的 MCP。

點擊左側的 API 後，先選擇自己目前使用的 AI Agent，這邊我以 Claude Code 作為示範。

因為要跟大家示範如何設定網域以及將專案部署到 VPS Hosting，所以只要把 Domain and DNS 還 VPS Hosting 打勾就好，我建議根據實際需求給予對應的權限，而非全部打勾。

下面就會給你設定 MCP 的 JSON 範例，這邊回到程式碼編輯器。

跟大家分享一個小技巧，只要點擊專案的名稱，貼上檔案的路徑就能直接前往，像這裡我就貼上 Claude 設定檔的路徑 ~/.claude.json

{
  "mcpServers": {
    "hostinger-domains": {
      "command": "npx",
      "args": ["--package=hostinger-api-mcp@latest", "hostinger-domains-mcp"],
      "env": { "HOSTINGER_API_TOKEN": "your-token-here" }
    },
    "hostinger-dns": {
      "command": "npx",
      "args": ["--package=hostinger-api-mcp@latest", "hostinger-dns-mcp"],
      "env": { "HOSTINGER_API_TOKEN": "your-token-here" }
    },
    "hostinger-vps": {
      "command": "npx",
      "args": ["--package=hostinger-api-mcp@latest", "hostinger-vps-mcp"],
      "env": { "HOSTINGER_API_TOKEN": "your-token-here" }
    }
  }
}

搜尋「mcpServers」，再貼上設定，這邊你會看到有一個需要設定 HOSTINGER_API_TOKEN 的部分。

我們回到 Hostinger 網站，點擊「Generate API token」，然後輸入 Token 名稱，下面是 Token 有效的期限，可以根據自己需求調整，這裡我使用默認的一個月。

生成完畢後，這個值一定要好好保存，並且不可以外洩，否則你的專案會有安全疑慮。

接著回到程式碼編輯器，貼上剛剛取得的 Token。

完成後，先開啟終端機，然後輸入「control + c」退出當前對話，接著輸入 claude 來重啟。

此時輸入「/mcp」，如果看到「hostinger」的「dns/domains/vps」就代表設定成功了。

我們可以先詢問他

列出 hostinger 的 vps 機器

這邊就可以看到他可以成功找到

下一步，就請他把專案部署到 Hostinger，我跟他說

幫我把專案部署到這台 Hostinger VPS，有前端、後端、資料庫等元件
我希望各自建立對應的 image，然後參考 Docker 設定來做部署

在部署這塊，AI 跟我們說他已經完成了部署，因為目前還沒有綁網域，所以先使用 IP 的方式瀏覽：

這邊我就直接開一局玩玩看，在基礎使用上都是沒有問題的；在過去，專案部署是一件很複雜的事情，而且每家雲端服務商的操作流程都不同。

但有了 MCP，AI 就可以直接操作外部工具，省去我們要熟悉工具的過程。

這邊我們先確認可以不登入遊玩，然後再來測試註冊帳號的流程是否正常，並且遊戲的商店以及排行榜功能都是符合預期的。

使用專屬網域

最後補充一點，雖然 IP 也能用，但如果給朋友遊玩時丟給他一串 IP，看起來真的很像詐騙集團。

特別是想經營個人品牌的朋友，我會建議大家去購買網域，這可以讓你的產品、服務更有專業感與可信度。

Hostinger 也有提供網域購買的服務，購買後還可以直接請 AI 幫你完成相關設定。

像我就直接跟他說：

我有購買[deanlin.tech]網址
想把目前的專案網址設定為[game.deanlin.tech]
幫我完成相關設定

稍等一段時間，AI 就幫我們搞定了，這樣網站看起來是不是就更有可信度了！

再次跟大家提醒，不管提示詞與規格文件多完善；系統都是需要在反覆迭代中修正的，有時沒有問題，可能只是使用的次數與人數不夠多而已。

結語：你不知道你不知道

OpenSpec VS Spec-Kit

在影片的最後，跟大家分享同為規格驅動開發的 OpenSpec，過去我有做一隻影片專門介紹，當時是以人力資源系統作為範例。

從體驗上來說，OpenSpec 可以在更短的步驟生成規格；而 Spec-Kit 對每個環節都有更詳盡的確認。

我認為沒有哪個比較好，但相對來說 OpenSpec 的規格人類讀起來比較舒服，而 Spec-Kit 生成的規格更像是給 AI 參考的。

規格詳細是好事，但當它大到一個程度時，人類的理解能力會大幅下降。我們只能抓重點讀，或是請 AI 幫忙摘要。

系統的隱患

回到今天的主題，儘管我們在 Spec-Kit 的幫助下，用白話文生成了全端系統的網頁遊戲，又透過 Hostinger MCP 完成部署作業。

但系統上線後才是考驗的開始，有一句話叫做「你不知道你不知道」。

這邊我從三個面向，盤點出這個系統目前存在的問題：

① 部署方式

首先，雖然我們用白話文就完成了部署，但你真的知道 AI 做了什麼事嗎？

因為這個 GitHub Repo 是 Private，所以 AI 在 Hostinger VPS 無法直接拉取；因此改用 rsync 這個指令，把電腦上的檔案直接同步到 VPS。

他的確完成任務了，但 AI 幫你把事情做完，跟用的是不是好的方案，這是兩件事。

因為部署上去的，是我電腦當下的狀態，而不是 GitHub 上的版本。

如果專案只有我自己維護倒也還好，但假使有多個人一起協作專案，那不就亂成一團了？

因此比較好的做法，應該是在 GitHub 幫這台機器設定一把 Deploy Key，讓它有專案的唯讀權限，能直接從 GitHub 拉程式碼。

再進一步，還能讓程式碼推送到特定 branch 時，自動觸發部署，不用人工登入機器操作。如果大家有興趣，未來再做一期專門介紹。

② 資料管理

再來聊聊資料，系統一上線，資料就是最重要的資產，這邊提出幾個問題讓大家思考：

1. 你知道怎麼進入資料庫管理介面，查看目前儲存的數據嗎？
2. 這個遊戲雖然可以註冊、登入，但在沒有會員管理系統的狀態下，你要如何得知目前的會員總數？
3. 目前系統沒有忘記密碼、信箱驗證的功能，因此使用者一旦忘記密碼，就只能再註冊一個帳號

這些都是設計上的缺失。

③ 公開網址後的風險

最後，再分享一個公開網址後可能會遇到的問題，講一個最直觀的，現在後端 API 沒有任何呼叫限制。

如果有人寫腳本瘋狂呼叫，伺服器的資源就會被這些惡意流量吃光，正常玩家反而連不上。

因此上線的系統，通常會加上 Rate Limit 的機制，限制使用者在一段時間內，最多只能呼叫多少次 API。

當然，系統要考量的問題遠遠不止這些，只是提出幾個點給大家參考。

AI 很強沒有錯，他可以輕鬆地做出產品原型；但想一路走到產品，你需要考量更多細節。

儘管 Spec-Kit 已經幫我們釐清許多模糊的需求了，但這並不代表全部面向都有考慮到。

就像前面提到的這些問題，如果沒拿出來講，大家會在第一時間想到嗎？

AI 能完善你提出的需求，但有更多問題在遇到之前你可能根本沒有想過。

這就是「你不知道你不知道」

畢竟規格和測試只能涵蓋你想到的部分，而出了事，AI 不會負責，但許多問題在親自驗證時，或許能提早發現與修復。

好的，今天的分享就到這邊，如果這個系列有給你啟發與幫助；別忘了按讚、訂閱，並把文章分享給需要的朋友。

相信很多人在面對繁瑣重複的工作時，腦袋可能會冒出一句話：「如果有工具可以幫我搞定就好了！」

這幾個月我收到許多 AI 輔助開發的企業內訓邀請；為了呈現最高品質的內容，我想把過去 YouTube 影片底下的留言彙整起來。

但問題來了，YouTube 並沒有匯出留言的功能

而我有些影片留言就有幾百則，如果手動整理，那是一個非常浩大且無趣的過程。

這就是我在日常工作遇到的痛點，我相信大家在自己的工作中，一定也有對應的痛點。

這邊再分享一個實際案例，前陣子我受邀到三軍總醫院分享 AI 輔助開發的經驗。

當時就以醫院的兩大痛點「月報製作」和「排班系統」當案例，現場向醫護人員展示 AI 的可能性，以及要注意的資安議題。

分享這些案例，是想讓大家了解，過去我們可能有想法，但因為沒有技術，因此只能等別人開發

但現在，只要想法與需求足夠明確，其實是有辦法在 AI 的輔助下，自己完成工具的。

但實際動手時，會遇到幾個問題。

首先，不管你選擇的 AI Agent 是 Claude Code、Codex 還是 Cursor；它們在執行任務時，時常會跳出一些操作權限的提醒，問你要同意還是拒絕。

假如你沒有相關技術背景，其實很難判斷該接受還是拒絕，而且閱讀這些資訊真的很花時間；要是不小心接受了 AI 的危險指令，電腦甚至有被清空磁碟或格式化的風險。

① 在隔離環境執行 Claude Code

所以我會先跟大家分享，如何用 Claude Code 搭配 Docker 建立一個可以放心讓 AI 執行的隔離環境；在這個環境中，AI 可以自動執行所有指令，不用擔心影響到自己的電腦。

② 設計好系統目標後，放手讓 AI Agent 執行

但在讓 AI 執行前，我們需要先告訴他明確的目標，以及驗收的標準。如果可以，最好再指定使用的技術，這樣得到的成品會更符合自己的預期。

③ 加入 Git 版本控制

而在 AI 製作完初版後，我們要先加入 Git 版本控制。因為 AI 修改程式碼的幅度很大，如果沒有版本控制，改壞就回不去了。

④ 透過 Hostinger 部署上線

另外如果你想把成果分享給朋友，或作為個人的作品集；我會分享透過 Hostinger 部署上線的步驟。

⑤ 上線後要考量的事

但上線只是考驗的開始，我也會分享系統上線後可能會遭遇的挑戰。

完整的 Demo，可以觀看 YT 喔 👉

對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。

【Claude Code 危險模式】怕 AI 搞壞電腦？用 Docker 隔離沙盒讓它火力全開，再用 Hostinger 部署上線 | AI Agent | Vibe Coding

① 在隔離環境執行 Claude Code

在正片開始前，我先說明會使用到的工具

Claude Code

首先你需要選一個 AI Agent，這隻影片的範例是 Claude Code；目前需要付費升級到 Pro 以上的版本才能使用。

如果你使用 macOS 或 Linux，可以在終端機透過下面指令安裝

curl -fsSL https://claude.ai/install.sh | bash

另外 Windows 可以參考下面的指令

irm https://claude.ai/install.ps1 | iex

Docker

接下來要安裝是 Docker，他可以幫我們建立隔離環境的「容器」

https://www.docker.com/products/docker-desktop/

如果你直接在電腦的終端機執行 Claude，AI 就有機會動到電腦裡的資料與設定；而 Docker 的作用，就是把 Claude 的執行環境限制在容器之內。

在這樣的狀態下，AI 執行起來會安全許多，因為他看不到容器外的資訊。

在官網上，你可以根據自己的作業系統選擇要安裝的版本。安裝完成後打開 Docker Desktop，不需要註冊，也不用登入帳號。

看到左下角有一個綠色的「Egine Running」，就代表 Docker 引擎已經在你的電腦背景跑起來了。

如果想更確定的話，可以在終端機輸入 docker -v 來確認

Node.js

再來因為今天示範的是網頁工具，所以我們需要安裝 Node.js，由於 Node.js 有許多版本，所以我們要透過 nvm 來安裝與管理。

如果你使用 macOS 或 Linux，可以在終端機透過下面指令安裝。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.7/install.sh | bash

而 Windows 可以到官網下載最新的「setup.exe」安裝程式。

https://github.com/coreybutler/nvm-windows/releases

安裝完成後，重新開啟終端機，並輸入 nvm -v 確認版本，接著再輸入 nvm install –lts 安裝最新版本的 Node.js，並輸入 node -v 確認有切換到最新版本。

安裝程式碼編輯器 IDE

接著我們要安裝一個程式碼編輯器（IDE），我這邊使用的是 Cursor，但如果你想用 VS Code 或 Antigravity 也都可以

安裝 Dev Containers 外掛

裝好 IDE 後，點擊左側的 Extensions，搜尋「Docker Dev Containers」，選第一個進行安裝即可。

安裝完成後，我們的程式碼編輯器就能直接在 Docker 容器裡面工作了。

下載練習用的專案

確認前面的工具都準備完成後，我們要透過 Git 來下載練習用的專案

https://git-scm.com/install/windows

如果你是第一次使用 Git，可以到官網根據自己的系統下載，安裝完成後輸入 git –version 確認版本。

另外輸入下面兩行，可以確認有沒有完成帳號的設定。

git config --global user.name
git config --global user.email

這些設定都完成後，就可以下載專案了，歡迎路過按個 Star，讓我知道自己的分享對大家有幫助：

https://github.com/deancourse/claude-code-docker-container

大家可以直接 Fork 我的 Repository 來體驗，Fork 完成後，點擊 Code，從裡面複製專案網址。

然後回到程式碼編輯器，點擊「Clone Repo」，貼上剛剛複製的網址來下載專案。

指定下載路徑，完成後點擊「開啟」，就可以跟著一起操作了。

專案簡介

這個專案我是參考 Claude Code 官方的範本修改的

我在它的基礎上，加上了前端網頁設計與 Git Commit 的 Skill，以及給 AI 參考的 CLAUDE.md，這份 CLAUDE.md 是參考 andrej-karpathy 的版本

在 IDE 啟動沙盒

在了解專案基礎架構後，輸入「F1」貼上 Dev Containers: Reopen in Container

這個指令會幫你下載容器所需的資源，第一次執行會比較久，啟動完成後，左下角就會顯示 Container Claude Code Sandbox。

這邊提醒一下大家，我在企業內訓時，有部分學員遇到啟動失敗的問題；通常把整個 IDE 關掉重啟就會成功，如果還是不行，可以把錯誤訊息貼到 Claude Code 進行分析。

確認 Claude Code 可以使用

接著我們打開終端機輸入 claude，第一次在這個容器操作時會需要登入；登入後，你會發現這是一個非常乾淨的 Claude。

在 /skills 的部分，你只會看到我預先放進去的技能

而 /permissions 這塊，完全是空白的

接著，我們來做一個測試，跟 AI 說：

幫我列出桌面有哪些檔案

如果是在自己電腦的終端機執行這個指令，AI 會列出桌面的檔案；但因為我們這裡是容器，所以你會看到 AI 跟你說他找不到。

因為他在容器裡面，而桌面這個資料夾，是在容器外面；做到這邊先給自己拍拍手，我們已經完成了隔離環境，接下來就能開啟無限制模式，讓 AI 大展身手

② 設定系統目標，讓 AI 火力全開

大膽執行危險模式

確認 AI 在容器內，碰不到容器外的資料後，我們先用 Control + C 關閉這個對話。

然後就可以用 claude –dangerously-skip-permissions 的方式啟動 Claude 了。

啟動時，Claude 會跳出警告，要選擇「Yes,I accept」才能繼續。

在這個模式下，AI 不會再詢問權限相關問題，可以火力全開。

定好目標讓 AI 執行

但正因為 AI 會火力全開，所以我們在設定執行目標時，越精確越好，否則 Token 額度會消耗得非常快。

比如今天要跟大家示範的是製作「YouTube 留言彙整工具」，假使我只給他這麼一句話當目標，最後的成果通常會不如預期。

根據我的經驗，需求至少要涵蓋 3 個要素：「使用情境、技術限制、驗證方式」

我想要建立一個 YouTube 留言彙整工具，需求如下：

【專案結構】
1. 放在目前 repo 的根目錄，不需建立子資料夾
2. 為了方便部署，package.json 必須在根目錄
3. 在 README.md 增加一節說明使用方式

【使用情境】
1. 輸入「播放清單」網址，彙整清單內所有影片的留言
2. 輸入「單支影片」網址，彙整該影片的留言
3. 輸入「頻道」網址，彙整頻道內影片的留言
4. 網址輸入欄可以共用，有輸入提示
5. 載入留言時，會有進度條，知道現在正在抓取哪支影片

【篩選條件】
- 可以設定搜尋的時間範圍（起訖日期）
- 可以設定關鍵字，只保留包含關鍵字的留言

【技術限制】
- 使用 Node.js 開發
- 不需透過 YouTube API 取得資料，參考 npm 既有套件（取得評論的）
- 匯出結果先呈現在網頁上，要有階層關係、影片縮圖，可下載成 Markdown（不同影片不同檔案）

【驗證方式】
請用下面三個真實網址，為所有情境撰寫測試：
- 播放清單：https://www.youtube.com/watch?v=2hbYCe_E5aU&list=PLWWZkn1dW3eAvSZfJv0-02q27JIsfbN2f
- 單支影片：https://www.youtube.com/watch?v=2hbYCe_E5aU
- 頻道：https://www.youtube.com/@dlcorner
測試必須包含以下驗收條件，低於門檻視為失敗：
① 播放清單：抓到的影片數量 ≥ 10 支
② 單支影片：留言總數 ≥ 400 則
③ 頻道：列出的影片數量 ≥ 40 支
④ 設定時間範圍後，結果中不得出現範圍外的留言
⑤ 設定關鍵字後，每一則留言都必須包含該關鍵字

完成後執行所有測試，如果有失敗的案例，
請修復後重新執行，最多嘗試 10 次；
最後回報每個情境實際抓到的影片數與留言總數。

【專案結構】為未來的部署做準備

首先在專案結構這塊，我要求他直接在 Repo 根目錄下開發，並要求 package.json 這個存放專案資訊的檔案要放在根目錄，方便未來部署。

如果沒有事先交代，AI 很可能會另外建一個子資料夾，把整個專案放在裡面，這會導致部署時需要再額外調整資料夾結構。

【使用情境】把模糊的想法變成明確的功能

在使用情境這塊，如果僅提供「幫我做一個 YouTube 留言彙整工具」這種模糊指令，那 AI 針對細節只能靠猜，所以我把實際的情境拆成「播放清單、單支影片、頻道」這三種。

因為這就是我實際會用到的場景，而篩選條件則是使用情境的延伸，目的是讓我更精準地獲得資訊。

【技術限制】決定成品長什麼樣子

至於技術限制，是在幫 AI 縮小工具的選擇範圍；這邊我指定使用 Node.js 開發，如果不指定，AI 可能會使用其他程式語言。

再來是「不透過 YouTube API」，因為官方 API 需要跑另一套流程，而我希望用現成的套件來處理就好。

最後匯出格式我也明確指定要使用網頁，並呈現階層關係與影片縮圖，而且要讓我能下載成 Markdown 格式方便後續使用。

【驗證方式】讓 AI 沒辦法自我感覺良好

最後則是驗證，AI 時常沒有完成任務，卻騙我們說他搞定了。

所以我給了三個真實網址，並設下具體的判斷規則，這些數據都是我頻道的真實資料。

當執行結果不符合這些規則時，AI 就會自動除錯。加入測試後，我們就能大幅減少手動驗證的成本。

最後三行：讓 AI 自己跑完「測試 → 修復」的迴圈

最後三行，我設計了一個測試迴圈。

因為我們是讓 AI 用放飛自我的模式執行，所以 Token 額度燒得很快。

尤其在他遇到無法解決的錯誤時，燒得最兇，所以我設定了一個嘗試次數上限，作為失敗時的停損點。

人工驗證

稍等一段時間，AI 回報他已經完成了任務，並且測試全數通過。

但做完跟做好是兩件事，這邊我跟大家簡單說明專案的架構。

先打開 package.json 這個檔案，裡面會有專案的名稱、描述、指令，以及使用到的套件。

然後開啟一個新的終端機，輸入 npm run start 來啟動專案：

你也可以直接請 AI 幫你啟動，但如果對專案架構有基礎認知會更好。

接著我們把網址複製下來貼到瀏覽器上，先驗證單支影片是否可以運作，點擊「開始驗證」後，工具就會開始幫我們彙整 YouTube 留言。

稍等一段時間就執行完畢了，你可以看到影片的縮圖，以及下方的留言階層；確認符合預期後，便可點擊「下載 Mardown」來看看呈現的結果是不是自己要的。

在驗證單隻影片符合需求後，就可以擴增測試範圍到「播放清單」與「頻道影片」。

儘管功能都符合預期，但有些細節是在擴增測試範圍後才會發現的，像是有多隻影片的狀態下，需要往下滑才能看到後面的影片留言，操作上並不直覺。

這個部分，我也會在後面的章節來做優化。

③ 加入 Git 版本控制，改壞還有回頭路

在確認基礎功能符合預期後，我們要給這個專案加上版本控制，這邊會使用到 Git 這個工具。

這樣就算 AI 未來把專案改壞了，我們都還有回頭路可以走。

建立第一個存檔點

這邊先請 AI 幫我們產生 commit，直接使用 Git Smart Commit 這個 Skill 即可。

/git-smart-commit

你可以把 commit 想像成遊戲的「存檔點」，每完成一個階段就存一次檔，就算後面打輸了，也能回到上一個存檔點重來。

畢竟 AI 修改程式碼的幅度很大，有時你只是請他調整一個小功能，他卻順手動了其他地方，如果沒有存檔點，改壞就真的回不去了。

推上 GitHub，為部署做準備

最後，我建議把專案推上 GitHub，除了多一份雲端備份，後面部署上線時也會用到。

點擊左側的「Source Control」，接著選擇「同步變更」，然後你就會看到錯誤訊息：

這是因為我們還在 Docker Container 環境裡面，你需要點擊左下角的「Container Claude Code Sandbox」，然後選擇「Reopen Folder Locally」用本機的資料夾開啟：

此時再點擊一次「同步變更」，就可以把資訊傳到 GitHub，接著來到 GitHub 頁面，看到專案的資料有上傳上去，就代表你成功嚕！

優化專案並同步更新

有了存檔點後，我們就可以來繼續優化專案了，像我覺得現在的網頁太素，影片一多操作起來要往下一直拉，不方便，就可以直接請 AI 使用前端技能幫我們優化一下：

/frontend-design
幫我美化頁面質感，希望撈取過程可以切換到不同影片的縮圖，讓我知道現在執行到哪一個，並且在上面有列表，我點擊哪個影片，就顯示對應的留言串

稍等一段時間，AI 就完成了優化，除了外型比先前的版本更好看外。

你會發現他撈取過程會切換到不同影片的縮圖，並且在上面有列表，我點擊哪個影片，就顯示對應的留言串，這樣子我們網頁的易用性就更好了。

如果想把這個版本更新上去，流程是一樣的，使用 Git Smart Commit 這個 Skill：

/git-smart-commit

然後選擇「Reopen Folder Locally」用本機的資料夾開啟，再把變更推送到 GitHub 就好。

④ 透過 Hostinger 將網站部署上線

這邊跟大家說明一下，如果專案是純前端的靜態網頁，我們可以透過 GitHub Pages 來做部署

但因為今天的範例專案有需要一台伺服器來運行，所以我用 Hostinger 來做示範：https://hostinger.com/deanlin10

進入官網後，可以透過 Google 帳號直接註冊登入，因為我們是網頁專案，所以點擊左側的「Websites」分頁。

這邊你會看到不同方案的價格，週期越長，價格會越便宜；如果你有輸入我的優惠碼「DEANLIN」，會再獲得 10% 的優惠。

如果體驗跟想像不符，官方也有 30 天退款保證，讓大家可以更放心地使用。

接著再回到部署的流程，我們在「Websites」下面選擇「Web Apps」，接著點擊「Add website」，選擇「Deploy Web App」。

如果你有購買 Domain，可以直接從這邊選擇，又或者使用「Use temporary domain」這種暫時性的網址。

然後你會看到一張世界地圖，這是在選擇伺服器的位置，建議選擇離延遲比較低的機房，這邊我就選擇 Malaysia。

接下來，你可以選擇上傳檔案，但因為我們的專案已經同步到 GitHub，所以選擇匯入指定的 GitHub Repository 即可。

在與自己的 GitHub 建立連線後，你可以直接貼上 GitHub 專案的網址，然後選擇 Deploy 即可。

中間會詢問你一些部署的參數，你可以根據實際需求調整。

這邊我採用默認值來部署，接著稍等一段時間，它就會顯示部署完畢！

我們可以點擊這個臨時網址來驗證功能，首先你可以看到至少網頁是有成功渲染出來的，並且可以抓到留言，切換影片留言也會跟著切換，Markdown 檔案也可以順利下載。

走到這一步真的太感動了，還沒幫影片按讚的朋友，可以順手按個讚！

⑤ 系統上線後，才是考驗的開始

在這個專案中，我們使用套件而非官方提供的 API 來抓資料，雖然也能達到相同目的，但是有代價的。

大量使用可能被封鎖

首先，如果這個工具是你個人使用，那通常不會有問題；但如果變成網頁開放讓大家使用，一旦使用人數多了，就容易被官方判定為「異常」，進而被封鎖。

網頁可能會改版

另外我們使用的套件是參考網頁結構來取得資訊的，這代表當 YouTube 改版後，如果套件沒有跟著更新，你的程式就抓不到東西了。

不是對錯，而是取捨

講到這邊，可能會有人說：「那直接走官方 API 不是更穩定？」

沒錯，官方 API 更穩定，如果要打造正式產品，我也推薦走官方的路。

但如果你期待的是把專案 Clone 下來就能直接跑，不需要那麼多複雜的步驟，那今天這個範例就夠用了。

在真實世界中，沒有最好的方案，只有當下最合適的選擇。

結語：即使使用者只有你，在 AI 時代也值得開發

最後想跟大家分享我自己在 AI Coding 上的心得。我的本職是軟體工程師，寫了十幾年的程式。

過去評估一個工具值不值得做，看的是需要花多少時間，以及有多少受眾。

但在 AI 時代，這個邏輯改變了

如果工具能用 AI 製作出來，即使受眾只有自己一個人，那也值得做。

就拿彙整 YouTube 留言這個案例來說；我不確定多少人有相同需求，但我知道純手動會把自己搞死。

在手寫程式碼的年代，這個專案至少要花一個週末才能完成；而我一年可能只跑個兩三次，不太可能為了它投入這麼多時間。

但有了 AI 輔助 Coding 後，大家也看到了，只要指令足夠明確，把任務交給 AI，你就可以轉頭做其他事了

時間成本也從「一個週末」，變成「泡一杯咖啡的時間」

很多過去被判斷不值得做的工具，或許現在都值得做了；但這件事有一個前提，你要能把需求講清楚、把驗證邏輯交代好。

因為 AI 做完，不代表他做好了

好的，今天的分享就到這邊，如果這個系列有給你啟發與幫助；別忘了按讚、訂閱，並把文章分享給需要的朋友。

這篇文章要向大家展示 Manus 如何幫我們彙整電腦上的文件，並完成可交付的成果。

案例 ①：彙整專案資訊

過去執行專案時我有個困擾，就是不同部門、不同人，大家使用的文件格式都不一樣。

一個專案可能就涵蓋了 Word、Excel、PDF 等多個格式，這樣不管彙整資訊還是查資料都非常浪費時間。

而 Manus 桌面版可以協助減少跨格式整理時的手動搬運工作。選擇已授權的資料夾後，你可以用白話文請它整理專案摘要，並要求在結果中標註來源檔案，方便後續核對。

案例 ②：辨識圖片寫入 Excel

除了彙整資訊外，他還可以辨識圖片資訊，寫入 Excel；像這邊我有好幾十張收據照片，如果要自己手動填寫到 Excel 那真的非常痛苦。

但現在我可以請 AI 先確認 Excel 要填寫的欄位，然後逐一辨識收據自動寫入。

如果有難以辨識的，也會留空標黃，提醒我們要去人工複查。

與網頁版的差別

過去如果你使用的是網頁版的 AI Agent，會需要手動把資料上傳給 AI，檔案一多就會讓人崩潰；而且等 AI 處理完後，還要把結果下載下來，放到對應的的資料夾。

而今天的文章就是要解決這個痛點！

在你授權指定資料夾後，AI 可以根據任務讀取、分析並整理其中的檔案，產出供你驗收的結果。

省去了網頁版要上傳、下載、移動檔案，這些繁瑣的搬運工作。

完整的 Demo，可以觀看 YT 喔 👉

對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。

【Manus 桌面版教學】讓 AI 操作電腦，從資料夾彙整報告、辨識圖片寫 Excel、自動填表單 | Desktop | AI Agent

• 🔗 Manus 邀請連結（多送 500 積分）
• 🎁 點擊連結可免費領取 Manus 1,000 積分（名額有限）

本集大綱

今天我會用 3 個職場常見痛點，讓大家了解 Manus 桌面版的應用場景：

1. 多格式資料彙整成指定報告
2. 批量辨識圖片寫入 Excel
3. 自動填入不同格式的表單

影片使用的 AI 工具是 Manus，如果你是第一次接觸，我過去有做一期影片帶大家掌握 Manus 的基礎操作：https://youtu.be/P4dO-vsiE1Q

讓 AI 操作前，先知道三件事

因為這次實戰會讓 AI 操作電腦上的檔案，所以要先下載桌面版的 Manus

官方網站：https://manus.im/download

提醒大家，在授權 AI 可以操作的資料夾後，他是有能力新增、修改、刪除檔案的。

所以在指派任務時，我會建議大家遵循 3 條規則：

1. 指定資料夾的範圍越小越好，如果涉及重要資料，建議複複製一份資料夾讓 AI 操作，避免不可逆的問題發生
2. 每個任務都會消耗 Manus 積分，因此執行大型任務時，我會採用「新增檔案」而不是直接修改原始檔案，這樣能更清楚掌握新產出的成果
3. 如果有刪除的需求，可以請 AI 將檔案放進指定資料夾，這類危險且不可逆的操作，由人來做最終判斷會比較安全

① 多格式資料彙整成指定報告

情境：凌亂的專案資料夾

第一個案例，我就拿職場最常見的痛點來舉例。通常我們每個專案都會有一個資料夾存放相關檔案。

但隨著專案進行，裡面的檔案會越來越多，甚至混雜著不同的格式；比如專案的規格用 Word 紀錄、進度透過 Excel 管理、外部資源可能是 PDF 檔，而會議記錄或報告又散落在不同的檔案中。

如果主管突然要你在一小時後，跟他報告專案現在的執行狀況，你可能得翻好幾份文件來彙整。

而彙整資訊的過程中，搞不好還要交叉比對哪份文件才是最新的。

指定資料夾，彙整指定報告

而這個過去讓人壓力山大的任務，在有了 AI 輔助後會變得輕鬆許多。

這邊我準備了一個「專案資料夾」的範例包，大家可以直接從 Google 雲端下載來練習。

接著把視角切回桌面版的 Manus，開一個新對話窗後；我們要點擊「Manus 桌面版」，選擇「新增本地資料夾」。

這邊就選擇剛剛下載的資料夾（project-files），選擇後會有彈窗提醒，授權後，Manus 就能在指定的資料夾範圍內，依照任務需求讀取或操作其中的檔案。 因此在授權本地資料夾前，建議先確認其中是否包含機敏資訊。

點擊允許後，我們貼上下面的提示詞，讓 AI 用摘要來告訴我們專案的進度、負責人，以及最新近況，並要求他在結論附上來源出處方便我們後續查證。

我要跟長官報告「這是什麼專案、現在進度到哪、誰負責什麼、最近發生過什麼決定」，每個結論都要標出處（檔名）。

但把指令送出前，跟大家分享一個小技巧。因為專案的檔案很多，如果你想要讓 Manus 加速處理，可以點擊下面的「更多」。

如果你跟我一樣升級到 Pro 版本，就可以看到「Wide Research」的選項，這是一個讓 AI 平行讀取檔案資訊，縮短等待時間的技巧，接著我們把指令送出。

Manus 在操作敏感的指令前，會先向你詢問，如果看不懂要做什麼，可以選擇「讓 Manus 解釋」。

還記得我們前面選擇了「Wide Research」嗎？因為他會消耗比較多積分，所以執行前會先詢問你，這邊我點擊「開始」

驗收報告

稍等一段時間，就得到了一份原本要花費很多力氣才能彙整的報告。

打開檔案後，你可以看到 AI 是根據我們要求的格式，依序列出專案摘要、進度、負責人、近期決策。

並且最後一欄有「出處」讓我們核實資料的正確性。

過去要勞心勞力的任務，現在泡杯咖啡的時間，就能得到一份可以驗證的報告。

② 批量辨識圖片寫入 Excel

情境：有一疊單據要寫入 Excel

這邊再分享一個我用起來很有感的功能。

在報帳的時候，我們需要把單據的類別、說明、金額、日期等資訊填寫到 Excel 表單。

如果只有兩三張還好，假如有好幾十張要填寫，你可能要花半天的時間在 key-in；而且人工處理，還容易看錯數字、打錯欄位。

先讀欄位，再逐張辨識照片

而這個痛點，我們一樣可以請 AI 幫我們自動處理；這邊我準備了一個「單據報帳」的範例包，大家可以直接從 Google 雲端下載來練習。

裡面有一份費用報帳表的 Excel，跟 20 張不同角度、格式的單據照片；有正拍、有歪的、還有光線不好的，以此來模擬真實情境。

這邊一樣點擊「Manus 桌面版」，選擇「新增本地資料夾」，然後選擇剛剛下載的資料夾（excel-receipt），點擊允許後，貼上下面的提示詞。

讀取[費用報帳表.xlsx]裡面的欄位後：
1. 逐張辨識[收據]內的照片
2. 一張照片填一列，最後一欄寫來源檔名
3. 看不清楚或不確定的欄位留空並標黃，不要猜
4. 核對沒有遺漏後，另存為[費用報帳表_已填寫.xlsx]。

送出指令後，跟大家解析一下我要求 AI 的執行順序：

1. 第一步是先讀 Excel 有哪些欄位，這是為了讓 AI 知道要抓哪些資訊
2. 接著要求一張照片一列，並標明來源檔名，讓我們在後續方便對照
3. 第三點是關鍵設計，我要求看不清楚的格子要留空、標黃，不要自己猜。因為 AI 辨識照片不是百分之百準確，與其讓他硬填一個錯的數字，不如標出來讓我們確認
4. 最後我要求他另存新檔，而不是複寫原有檔案，這樣可以讓我們保留原有乾淨的格式在下次使用

驗收 Excel

稍等一段時間，AI 就完成了單據照片的分析，並將數據寫入 Excel 當中

我們可以看到資料夾下多了一個「已填寫」的 Excel 檔案，打開後你可以看到每個欄位都有順利填寫

其中標黃留空的內容，我們也可以從來源檔名確認是哪個檔案有問題

像這邊我就特地準備了一個拍糊的案例，把照片打開後，可以看到他真的是糊掉了。

另外其他 AI 有正確辨識的欄位，建議大家還是要核對金額與單據號碼；畢竟你還是要為自己交付的東西負責任。

將複雜流程儲存為技能

另外大家在實作這個案例的時候，通常 AI 會花比較長的時間；這邊我們點擊右上角的「查看此任務中的所有檔案」。

你會發現除了交付給我的的 Excel 檔外，還有許多程式檔案。

這是因為讀取 Excel、辨識圖片、抽取資料、寫入 Excel 這些動作是需要寫程式來完成的。

在執行的過程中他可能會不斷試錯，但只要找到正確的路，之後就會順很多；而這條經過驗證可行的路，我們可以把它儲存成未來可以重複使用的技能（Skill）。

過去我有拍攝一集影片專門介紹，想深入了解的朋友，可以點擊連結回顧。

建立 Skill 的方式也很簡單，可以直接點擊 Manus 建議的指令，或用白話文跟他說：

幫我將這個工作流設計為 Skill

完成後，點擊「新增到我的技能」，這樣未來有報帳需求時，一句話就能重跑整個流程。

延伸應用

而辨識圖片儲存到 Excel 這套流程，其實可以應用到多個場景，業務可以拿來整理名片、行政可以整理請購單、店家可以整理進貨單。

只要是「照片裡有固定欄位資訊，要進表格」的需求，流程都是差不多的。

但記得重要資訊還是要人工複查，AI 只是省去了你手動 Key-in 的步驟。

③ 自動填入不同格式的表單

情境：表單規則多，資料散落各文件

最後一個案例，我想分享常常折磨我的「表單地獄」。

有些公司喜歡把各種資訊彙整到一份 Excel 制式表單方便管理，這會導致一份 Excel 會有多個分頁，而每個分頁的資料來源可能散落在 Word、PDF 等文件。

因此填寫時會需要來會比對，非常浪費時間；而在面對這類瑣碎的任務時，我們不妨換個思路。

先提供過去填寫的範例，讓 AI 讀懂 Excel 欄位的規則，然後再從你的來源資料抽出資訊，這樣填寫的準確度會高很多。

先讀規則、再抽資訊、最後填入

這邊一樣有個「表單填寫」的範例包，下載後裡面有一份要填寫的 Excel 以及其他要彙整的參考文件。

這邊我先打開「專案管理表」的 Excel，你會看到有 6 個分頁，前三個分頁我有做範例的標籤，這是為了讓 AI 掌握填寫規則。

後三個分頁則是空白，讓 AI 彙整來源資訊後進行填寫的。

回到 Manus 頁面，操作流程跟前面一樣，點擊「Manus 桌面版」，選擇「新增本地資料夾」。

然後選擇剛剛下載的資料夾（form-submissions），點擊允許後，貼上下面的提示詞

請根據下面步驟彙整資料，寫入[專案管理表_範例.xlsx]：
1. 透過範例分頁了解 Excel 的欄位與填寫規則
2. 用後面空白分頁建立新的 Excel，名稱[專案管理表.xlsx]
3. 從資料夾文件讀取所需資訊，用「純文字」的方式填入[專案管理表.xlsx]
4. 找不到或不確定的格子先留空、標黃，不要自己編

送出指令後，跟大家分析我設計的步驟：

1. 一開始先透過範例讓 AI 了解表單填寫方式，如果少了範例給 AI 參考，那最終填寫的準確度就會下降，所以「先讀懂規則」這一步千萬不能省
2. 然後我讓他用空白分頁建立新的 Excel，這是為了讓範例檔可以重複使用
3. 另外指定用「純文字」填入，是避免 AI 動到表單原本的公式與格式
4. 最後也提醒 AI：「找不到的留空標黃，不要自己編。」

驗收表單

稍等一段時間，我們可以看到資料夾下出現了我們前面指定檔名的「專案管理表」Excel 檔案。

打開後你可以看到 AI 把散落在不同文件的資訊，全部彙整到 Excel 對應的欄位，專案概要、參與人員、任務清單，各自來自不同的文件，全部歸位。

缺資料的部分也誠實標黃，讓你一眼看出哪裡需要人工補充。

過去要在文件跟表單之間來回比對抄寫，現在只剩下確認跟補漏。

在工作中導入 AI，是最快的學習途徑

最後幫大家回顧一下，在這個系列影片我們掌握了哪些技巧：

1. 首先是連接器，他讓我們在 Manus 就可以使用外部工具，不需要再多工具間來回切換。
2. 接著我們把驗證過的流程，封裝成技能；教會 AI 一次，它永遠記得
3. 然後建立專案，讓 AI 成為我們的第二大腦，回答時會參考指令與文件資源，不用重複交代背景
4. 而這隻影片則是最後一塊拼圖，指定資料夾後，讓 AI 接手電腦上的任務，直接交付成品

這四個功能不是獨立的，而是層層堆疊的。

連結器給 AI 手腳、技能給它 SOP、專案讓他擁有背景與記憶，Manus 桌面版則是讓他可以操作電腦上的檔案。這些功能組合起來，才是一套完整的 AI 工作流。

但看完影片，不代表你已經學會了，能把 AI 用在實際工作中，才算真的學會。

因為工作上的痛點，你自己最有感；而且這些任務每天都會遇到，等於每天都在練習、優化。

當 AI 真的幫你省到時間，你就會有動力繼續用下去；另外導入工作的過程中，你一定會遇到各式各樣的意外、不如預期的成果。

我覺得這些都是好事，因為它可以讓你知道，AI 不是完美的，進而思考我們要怎麼去引導它。

工具會一直更新，模型會一直變強。如果你學到的只是工具如何操作，半年後可能就過時了。

但你引導 AI 的思維，會一直跟著你；畢竟 AI 能幫你到什麼程度，取決於你怎麼引導它。

所以我會建議大家，從工作裡挑一個痛點，讓 AI 實際跑一次；過程中你可以大膽嘗試，但 AI 交付的成果，請務必親自驗收。

因為當你把成果交出去的那一刻，所有錯誤必須由人類來承擔。

好的，今天的分享就到這邊，如果這個系列有給你啟發與幫助；別忘了按讚、訂閱，並把文章分享給需要的朋友。

但我在金融、醫療、行銷、電子、通訊等產業講了上百場內訓，發現大家就算已經在工作中使用 AI，還是會問：

• 「為什麼開新視窗後，AI 不記得我們過去的對話？」
• 「專案資訊散落在信箱、行事曆跟雲端硬碟，每次都要找好久。」
• 「我只是要 AI 彙整報表、生成簡報，結果每次格式都不一樣！」

產業不同、職位不同，卡住的地方卻幾乎一模一樣。

每件事都需要：「重新交代背景 → 來回複製貼上 → 反覆調整格式」

但這些明明是 AI 能接手的機械式工作，只是我們已經習慣了這樣用它。

那要怎麼跳出這個習慣？

分享一下我在內訓現場的做法。

課程開始前，我會先跟同學說：「如果發現今天的案例有可以優化的地方，請直接舉手告訴我；我知道怎麼用 AI，但你們才是產業的專家。」

真實世界裡，正確答案往往不只一種，更多時候我們是在做取捨。

但很多人用 AI，只想拿到「一個答案」。

拿到不符預期的結果，就覺得是 AI 不好用。

你大概也遇過這種長官，交代任務時丟下一句「幫我處理」就走了。

什麼細節都問不到的狀態下，你只能用猜的；但交出去的成果往往換來一句「這不是我要的」。

我們對 AI，常常就是那個長官：「產業、角色、能動用的資源都沒交代，卻期待它一次給出對的答案。」

所以我跟 AI 協作時，不會直接要答案，而是反過來：

「請它反問我缺什麼資訊 → 從不同面向給幾個版本 → 挑最接近的那個往下改」

需求一開始講不清楚沒關係，重點是每輪討論都離你的期待更近一點。

等你和 AI 討論出符合期待的成果，還可以更進一步。

還記得開頭那三個問題嗎？它們各自有解。

1️⃣ 開新視窗就失憶？

→ 依主題建立「Project」，專案背景、指令，交代一次就好。

2️⃣ 資料散落在信箱、行事曆、雲端？

→ 接上「Connector」，讓 AI 自己去讀 Gmail、Google Drive、Notion，不用再複製貼上。

3️⃣ 每次產出的格式都不一樣？

→ 把流程封裝成「Skill」，教會 AI 一次，它就永遠記得。

很多事 AI 做得到，只是我們沒想到可以這樣用。

我開設這堂線上課程的初衷，是希望能解決你的真實痛點、並打造適合自己的 AI 工作流。

把雜事交給 AI：先學會跟它對話、和它討論，再用 Project、Connector、Skill 打好地基，最後把電腦裡的文件也交給它彙整。

課程後半段，我還想帶你做過去要「工程師」才能做到的事。

就算第一次接觸程式，也能用 Claude Code 做出解決自己痛點的小工具。

並分享如何搭配 Git 來為每個進度建立「存檔點」，像打電動一樣，改壞了就讀檔重來。

也許有人會想，這些資源網路上不是都有嗎？

是的，都有。

現在外面有太多看起來很炫的 AI 示範，但如果你真的有嘗試過，你會發現實際能落地非常少。

那是因為，他們沒有從零開始、只講成果跟目標；但當你想實作時，很容易遇到問題、卡關。

我自己在 Medium 也寫了上百篇文章，拍了幾十部 YT 教學影片。

但文章和影片有個先天限制：「一次只能專注在單一主題」

它適合讓你快速認識一個工具，卻很難帶你把整套工作流從零建起來。

如果你也想把 AI 從「有在用」，變成一套真正融入工作的流程，這堂課會告訴你每一步該怎麼做。

線上課程正在籌備中，讓我更瞭解你的需求

填寫問卷領取折扣 👉https://lihi1.me/R678K

先透過實戰案例，讓大家了解 Manus 的專案可以如何應用

不用重複交代背景

首先，設定好專案的指令與文件後，你就不需要重複交代背景。

比如請他寫一篇耶加雪菲到貨的 FB 貼文，AI 會先參考「品牌指南」與「文案範本」的說明後再做生成。

檢查是否有禁用詞

另外設定好要遵守的規則後，如果要求加上「全台最強、預防帕金森氏症」這類宣傳詞，AI 會拒絕並給予建議修正方向。

減少 AI 幻覺

而詢問他不存在的產品多少錢，他也會誠實回饋「沒有記錄」不會唬爛。

為什麼 AI 在一般對話窗做不到？

以上這些成果，都是把專案設計好才能享受的，他解決了一般對話窗的兩大痛點：

痛點 ①：對話越長，AI 越笨

像我們過去跟 AI 討論問題時，往往需要多個來回才能得到滿意的成果；但接著問新問題，他的回答卻越來越不對勁。

原因是 AI 回答前，會參考前面的對話內容。但舊對話中的試錯過程與被推翻的版本，都是跟新問題無關的雜訊，由於這些雜訊會干擾 AI 抓重點，品質自然越來越差。

痛點 ②：開新對話，一切重來

面對這個問題，大多數人會選擇開一個新對話窗；但這樣背景要重新交代、文件要重新上傳，非常繁瑣且浪費時間。

可能這時有人會說：「AI 不是有記憶的功能嗎？」

沒錯，Manus 在個性化的部分，可以記住你的基礎資訊與個人偏好；但如果你需要 AI 在特定的背景知識上，回答問題、做出決策、甚至產出成品。

你需要的是建立「專案（Project）」，把資訊沉澱下來，這樣之後對話不用重新交代背景。

完整的 Demo，可以觀看 YT 喔 👉

對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。

【Manus 專案教學】別再重新交代背景！建立專案讓 AI 變成你的第二大腦 | Project | AI Agent | 知識庫

• 🔗 Manus 邀請連結（多送 500 積分）
• 🎁 點擊連結可免費領取 Manus 1,000 積分（名額有限）

本集大綱

1. 用「指令＋文件」，建立專案記憶助理
2. 讓 AI 修改文件，知識庫即時更新
3. 技能＋排程＋連接器，讓工作流自動化
4. 分享給同事，讓專案變成團隊的共享大腦

影片使用的 AI 工具是 Manus，如果你是第一次接觸，我過去有做一期影片帶大家掌握 Manus 的基礎操作：https://youtu.be/P4dO-vsiE1Q

① 用「指令＋文件」，建立專案記憶助理

第一步我們要解決的痛點是「AI 的記憶問題」。

假如你今天待在一間行銷公司，手上可能同時要經營多個品牌，但每個品牌都有自己的調性。

如果想要撰寫宣傳文案，除了要對品牌有一定程度的認知外，還要了解行業法規避免觸犯禁用詞。

而這些資訊別說是新人了，即使是已經熟練業務的資深員工，在手上有多品牌的狀態下，還是容易精神錯亂。

建立專案

面對這個痛點，我們可以根據不同的品牌建立對應的專案；比如接到「上班補給站」這個咖啡品牌的案子。

你可以先找到側邊欄的「專案」，然後點擊「+」來建立新專案。

專案名稱我就貼上「上班補給站 | 品牌經營」方便辨識

填寫指令

再來要填寫專案指令，這個非常重要，如果沒有填寫，Manus 就少了一層可重複套用的行為準則。

## 角色設定
你是「上班補給站」的品牌文案助理，負責產出社群貼文、EDM、商品文案與活動標語。
所有產出都以專案的文件為準：
- 語氣與禁用詞 → 依「品牌指南」
- 貼文結構與寫法 → 參考「文案範本」
- 價格、產地、風味 → 依「產品資訊」
## 回答原則
1. 價格、產地、成分這類事實資訊，一律以「產品資訊」為準，並標明出處。
2. 文件找不到的品項或數字，明說「目前產品資訊沒有記錄」，不要臆測或補完。
3. 品項名稱要跟「產品資訊」完全一致才算找到；只找到相近名稱時，要提醒「找不到 A，只有名稱相近的 B」，不要當成同一個產品回答。
4. 文案完成後自我檢查一次，踩到品牌指南的禁用詞就主動改寫，並告訴我改了哪裡。
## 語氣規則
1. 溫暖、口語、像跟朋友推薦，不說教、不浮誇。
2. 一則貼文開頭第一句就要勾住人，不要用「大家好」「今天要跟大家分享」這種開場。
3. 專有名詞一律維持英文：手沖用 Pour Over、單品豆用 Single Origin。
4. 不要用驚嘆號連發（最多一個），不要用「最」「第一」等絕對化字眼（廣告法風險）。
5. 每則貼文結尾都要有一個明確的行動呼籲（CTA），例如「點擊連結預購」。
## 輸出格式
- 預設給「3 個版本」讓我挑：A 情感訴求、B 產品功能、C 限時促購。
- 每個版本附上建議的 Hashtag（3～5 個）。
- 字數控制：100～150 字。
## 你該主動做的事
- 我給你產品或活動資訊不完整時，先問我（價格、日期、限量數），不要自己編。
- 寫完後簡短說明「這篇主打什麼情緒或賣點」，方便我快速判斷。

① 角色設定

首先在「角色設定」這塊，除了指定身份外，也寫清楚「哪類問題去查哪份文件」，像語氣依照品牌指南、結構參考文案範本、事實依據產品資訊

② 回答原則

而回答原則這部分，我特別強調事實資訊以文件為準、要附出處；真的找不到就誠實說沒有，就算名稱相近也不能拿來充數，文案完成後要檢查是否用到禁用詞

③ 語氣規則

接著是語氣規則，除了定義品牌溫暖口語的調性外，我也把地雷寫清楚，像不要用老套的開場、專有名詞維持英文，避免使用會踩到法律紅線的關鍵字

④ 輸出格式

再來是輸出格式，我預設讓 AI 一次產出 3 個版本讓我挑，並附上 Hashtag。你可以根據實際場境設定字數限制，這樣產出的版本會更符合需求

⑤ 你該主動做的事

最後這塊也很重要，我要求 AI 在資訊不完整時，先問我缺了什麼，而不是自己瞎編；並在寫完後說明這篇主打什麼賣點，方便我快速判斷要用哪個版本

上傳文件

接著到「文件」的區塊，我準備了品牌指南、文案範本、產品資訊三份範例文件，用拖拉的方式放進專案就可以了。

可以從 Google Drive 下載範例檔案

如果內容以文字為主，我偏好 Markdown 這類「結構明確」的格式，因為標題、列點與分段較容易維護；當然 PDF、Word 這些格式也都支援喔！

點擊「開始體驗」後，剛剛填寫的指令與文件都會出現在右側，你可以持續優化。

驗證：語氣與資訊自動對齊

在完成專案基礎的設定後，我們先嘗試指定產品讓 AI 撰寫文案，比如

幫我寫耶加雪菲到貨的 FB 貼文

這邊你會看到在資訊不足的狀態下，AI 會先反問我們細節，確保最後結果符合預期。

稍等一段時間後，AI 就順利生成了文案；儘管我沒有交代任何背景，但因為前面有設計指令的關係，所以 AI 會自己去文件裡面尋找產品資訊，並根據品牌指南撰寫對應的文案。

這邊我們看一下 AI 生成的貼文，語氣是品牌指南要求的溫暖口語、結構參考文案範本、價格會從產品資訊裡面抓。

這些過去一般對話要主動告知的背景資訊，在建好專案後，AI 便會自動做「對」的事。

驗證：違規用詞自動攔截

下面我們再來測試看看，如果想刻意加上禁用詞，AI 是否會攔截，像是：

我想要在文案加上「全台最強手沖，預防帕金森氏症」

你可以看到 AI 直接指出「最強、帕金森氏症」都是禁用詞，並在下方詢問我後續改寫的方向。

能抓到這些詞，是因為前面已經把禁用詞與審核原則寫入指令與文件，不是 Manus 會自動掌握所有最新法規。

這邊補充一個重要知識，在禁用詞這塊，有些不只是品牌偏好，很多是寫進法律的。

像食品廣告不能涉及醫療效能，比如咖啡廣告就不能宣稱有「瘦身、預防糖尿病」等療效。

而「最、第一、保證」這類絕對用語，如果拿不出客觀依據，可能構成廣告不實的問題。

以這個專案來說，我是把「不要用絕對化字眼」這種通用原則寫在指令。

而會隨法規、產品更新的具體違規詞清單，則整理進知識庫的品牌指南。

這樣大家就不用背法條，因為 AI 寫文案時會自動避開，檢查出禁用詞時也會改寫。

但重要對外文案，還是需要人工把關與法務審查。

別忘記，我們仍需要為交付的成果負責。

驗證：問不存在的品項，不會瞎掰價格

接著我們故意問不存在的產品，看 AI 是否會瞎掰價格，比如詢問他：

瓜地馬拉花神一包賣多少？

這邊你可以看到，AI 會誠實回答目前產品資訊沒有記錄，而不是隨手掰一個數字給你。

但如果部分關鍵字剛好有匹配到其他產品，也會列出來，確認是你否填錯名稱。

再次提醒大家，在指令裡要求他誠實，找不到就直說、不要瞎編，是減少 AI 幻覺最實用的方法。

② 讓 AI 修改文件，即時更新知識庫

前面我們驗證了在專案中，如果產品不存在 AI 會誠實回答；但如果我們想更新專案文件的內容呢？

其實很簡單，你可以直接用白話文要求 AI 修改，比如剛剛缺少的「瓜地馬拉花神」產品，我們就可以透過下面指令給出明確的產品規格。

這邊我使用了官方 manus-api 的 Skill，它能透過 API 更新目前 Project 的文件

/manus-api 更新專案的「產品資訊」文件，補上「瓜地馬拉花神」如下資訊：
SKU: DB-GUA-FLOR
單品濾掛、瓜地馬拉花神、一盒 10 入、售價 NT$360，風味是中焙，花香、蜂蜜與柑橘

稍等一段時間，你可以看到 AI 調整完產品資訊後，詢問我們是否要套用：

套用後，可以點擊右上角「查看此任務中的所有檔案」，打開後在濾掛咖啡最下面，就能看到剛剛新增的「瓜地馬拉花神」品項。

驗證：開新視窗可以查到

如果想要更精準確認產品資訊是否更新；也可以在專案開新視窗來驗證，這裡貼上一樣的問題：

瓜地馬拉花神一包賣多少？

這次 AI 就可以順利回答對應的售價了

同時他也把名字類似的產品列出來給我們參考，並說明只有綠掛沒有單品豆的選項。

同時我們也印證了一個細節，儘管專案裡每個對話視窗的上下文獨立，但文件是可以共用的；所以只要文件更新了，之後開的每個對話都會拿到最新版。

③ 技能＋連接器＋定時任務，讓工作流自動化

在瞭解如何新增、修改專案的背景資訊後；接下來要教大家如何把「技能」與「連接器」應用到專案中。

建立技能：生成文案配圖

以品牌行銷舉例，除了寫文案外，最需要的就是搭配圖片素材了，所以這邊我要建立一個「生成文案配圖」的技能。

如果說專案裡面的指令跟文件是讓 AI 知道背景資訊，那我覺得技能就是一個可以讓多個專案通用的 SOP。

所以我們要在專案外開一個新的對話窗來生成，避免他被專案文件影響。

技能可以透過白話文來生成：

幫我建立一個名為 [post-image-generator] 的技能，用途是幫社群文案生成配圖：
## 圖片規格
1. 比例固定 1:1。
2. 風格為真實攝影感：自然光、真實材質、淺景深，不要插畫或 3D 卡通感。
3. 畫面上不要出現任何文字、Logo 或浮水印。
## 產圖流程
1. 先閱讀文案，萃取三個元素：主角產品、場景、情緒氛圍。
2. 若專案知識庫有「品牌指南」，參考其中的品牌色與視覺關鍵字設計畫面。
3. 依以上元素撰寫生圖 prompt 並產圖。
## 注意事項
- 以情境畫面為主，不要嘗試還原真實的產品包裝。
- 畫面只能出現文案提到的品項，資訊不足以決定場景時先問我。

① 圖片規格

在圖片規格這塊，除了固定 1:1 的比例與真實攝影感外，我特別要求畫面不能出現文字，因為你很難掌控 AI 把文字設計在哪裡，需要文字的話，用後置加上去會更穩定。

② 產圖流程

而產圖流程我要求它先從文案萃取「產品、場景、情緒」三個元素，再參考品牌指南的品牌色與視覺關鍵字設計畫面，所以這個技能在其他專案使用時，風格會自動跟著那個品牌走。

③ 注意事項

最後在注意事項中，我要求以情境畫面為主，不要嘗試還原真實的產品包裝，這樣我們拿到素材後，運用上會更靈活。

稍等一段時間，AI 就會把這段需求整理成技能，記得點擊「新增到我的技能」，這樣後續才能觸發喔。

在專案新增技能

接著我們再回到「上班補給站」的專案，在右側技能的部分點擊「新增」。

選擇「從我的技能匯入」，這邊就能看到剛剛我們建立的技能了，打勾後，點擊右下角「新增」便可生效。

測試技能：文案自動變成配圖

接下來我們先請 AI 寫一篇「巴拿馬 藝伎」的活動貼文，然後請他用這個技能來生成配圖。

幫我寫一篇活動倒數的 FB 貼文
從產品資訊找「巴拿馬 藝伎」資訊
限量 100 包，5 天後截止，價格為原價的 8 折，在官網預購
完成後使用 /post-image-generator 生成圖片

稍等一段時間，你可以看到 AI 除了生成文案以外，還根據內容生成了對應的示意圖。

如果你想要得到直接涵蓋文字的宣傳圖片，也可以根據自己的需求自行優化技能。

假使你想更深入了解「技能」的應用，我過去有拍一集影片深入講解，可以參考這集影片。

搭配 Gmail 連接器，讓 AI 寄信給你

確認與技能搭配可以生成文案與圖片後，我們可以再進一步設計排程，並搭配連接器，讓 AI 完成任務後寄信通知我們

但在設定排程之前，我們要先建立與 Gmail 的連接。

這邊我們要先點擊左下角的頭像，選擇「設定」；點擊側邊欄的「連接器」後，打開「瀏覽連接器」，輸入 Gmail，確認已經完成了綁定。

完成後，我們回到「上班補給站」專案，點擊上方連接器的「新增」，把 Gmail 打勾後「儲存」。

此時你就可以看到 Gmail 的 icon 出現在連接器中。

定時任務：每天早上 9 點，自動介紹一款咖啡

最後我們要來設計定時任務，我覺得這個功能非常棒！

儘管 AI 生成的結果未必能直接使用，但透過定時任務能夠督促我們推進任務。

這邊在右側「定時任務」點擊「新增」，然後選擇「建立新項目」，標題我們就打「咖啡推薦」、排程的部分設定為每日早上「09:00」、然後貼上下面的提示詞。

從「產品資訊」隨機挑一款還沒介紹過的品項
① 產出一篇介紹貼文
② 用 /post-image-generator 生成對應的配圖
③ 完成後透過 Gmail 寄信給我，附上貼文與配圖

如果你希望他自動執行，可以把下面的「略過確認」打勾。

但要特別提醒大家，只有經過多次測試，確認低風險的內部流程才考慮略過，像這邊的案例是寄信給自己。

如果你的排程是讓 IG 自動發文、群發郵件，或是其他對外不可逆的操作，建議保留人工審核。

測試定時任務

把定時任務設定完成後，可以點擊側邊欄「已排程」的分頁，確認「咖啡推薦」有出現在排程中。

未來每天早上 9 點 AI 執行完任務後，我們就會收到咖啡的文案與配圖。

不過排程任務設定完成後，建議大家先手動驗證成果是否符合預期，我們選擇一個排程任務，點擊「立即執行」。

這樣 Manus 就會直接觸發排程，等任務完成後你就可以到 Gmail 中，確認有收到對應信件，並且信件中有文案草稿與對應的示意圖。

未來你要做的，只剩下審稿、微調、發佈，過去是你去找 AI，現在是 AI 準時來找你。

④ 分享給同事，讓專案變成團隊的共享大腦

到目前為止，這個專案都是「自己」在用。

但專案還有一個非常棒的功能，你可以把它分享給同事一起協作。

分享 & 權限設定

操作很簡單，打開專案，點擊右上角的「分享」，輸入同事的 Email 便可送出邀請，而且每位成員的權限可以分開設定。

分成「可編輯」與「可使用」兩種。

以這個案例來說，可以給行銷團隊的組員「可編輯」的權限，讓大家一起維護品牌指南、補上最新的產品資訊。

而客服、業務這些跨部門的同事，給「可使用」權限就好，他可以進來查詢產品資訊，但無法改變文件內容。

然後切換到受邀請的成員帳號，你可以看到其中成員共享的是指令、文件資源，和技能這些資訊，而連接器與定時任務，是需要個別設定的。

所以不用擔心分享專案後，你綁定的 Gmail 會被同事拿去用；如果同事也想每天收到咖啡推薦，他需要綁定自己的連接器，並建立自己的定時任務。

另外每個人在專案裡開的對話是各自獨立的，除非主動分享，否則別人不會看到你的對話內容。

結語：留在腦袋裡的會消失，放進專案的是資產

相信看完前面的案例後，你就能理解專案的價值了。

過去想搞懂一個不熟的業務，你得先找到那個什麼都知道的人。

但人的時間與記憶都是有限的，對方可能沒有時間幫你講解；就算真的用心幫你講解，搞不好很多細節連他自己都忘記了。

而現在有了專案，有問題時大家可以先透過 AI 查詢，不需要再花時間找 keyman。

這樣專案執行起來就可以更順利，而不會因為某個人不在而卡住。

另外我覺得最實用的兩個場景，是新人培訓與專案交接。

過去新人報到，可能要先閱讀一堆文件，然後由前輩做基礎的培訓；但人的吸收能力有限，往往同樣的問題還會問很多次。

而交接更慘，大部分員工是離職前幾天才開始準備交接文件；這代表文件可能會缺東缺西，因為離職的心態通常是交差了事。

因此與其把這些東西留在大腦裡，不如在執行的過程中把它們整合進專案。

這樣新人入職有不懂的就能直接問，不用等到某個人有空，公司也不用擔心 keyman 哪天離職。

從個人到團隊，專案帶來的效益不是加法，是乘法。

最後我們來回顧一下今天的實戰：

1. 一開始我們用「指令＋文件」建立了「上班補給站」的專案記憶助理，寫文案會自動對齊語氣、攔截禁用詞，沒賣的產品會誠實說沒有。
2. 接著示範了新品上架，讓 AI 直接更新專案文件，並開新視窗去驗證有即時生效。
3. 然後用「技能＋排程＋連接器」串起工作流，每天自動挑一款咖啡產出文案與配圖，完成後寄信通知。
4. 最後把專案分享給團隊，設定好權限後，新人培訓與專案交接，不用再依賴 keyman 的大腦。

還記得開頭的兩個痛點嗎？有了專案，不同主題可以開不同的視窗討論，而且大家可以共用同一份背景資訊。

什麼時候值得開一個專案？

至於什麼時候值得開一個專案？

我的判斷標準很簡單：同樣的背景資訊，如果你已經交代超過三次，就開專案

與其每次重講，不如花一點時間把背景資訊設計好。

另外不同的品牌，建議分開建立專案

把所有東西塞進同一個專案，那 AI 也會混亂。

提醒一下大家，專案中 AI 能力，取決於你設計的指令與提供的文件品質

下集預告：Manus My Computer

到這邊，連接器、技能、專案三個功能就全部串起來了，但還有最後一塊拼圖，就是你電腦裡的檔案。

在系列影片的最後一集，我會分享 Manus 操作電腦檔案的能力，讓 AI 直接幫你整理混亂資料夾、把截圖分析轉存 Excel、自動填入不同格式的表單。

專案不是另一個對話視窗，而是一套可持續更新、重複使用的工作背景與規則。

痛點：缺乏教育訓練

首先是新人的教育訓練。

回想一下，當我們剛入職時，是不是需要公司前輩的帶領，你才知道做事的流程、報告的格式、專案的細節。

但並不是每間公司都有新人教育訓練，有些公司甚至沒有標準作業流程，全靠新人自行摸索。

在這樣的狀況下，會因為每個人對任務的理解不同，導致交付成果的品質差異很大。

痛點：業務沒有代理人

再分享一個很多公司的陋習，就是複雜的業務流程只有某位員工知道。

這除了導致能者過勞的問題外，還會讓對方請假也不得安寧，因為遇到狀況時沒有代理人能處理。

更慘的是，如果他一氣之下離職，可能連完整的交接文件都沒有，後續接手的人只能從頭摸索。

痛點：複製貼上類似的提示詞（Prompt）

另外，如果你已經使用了一段時間的 AI，應該會發現自己最常用的提示詞大概就是那幾個。

但這些指令可能散落在筆記本、Notion，甚至是聊天記錄中。

真的要用時，可能還分不清楚哪個才是最後一版，而且還需要根據不同主題調整提示詞細節。

技能＝給 AI 的 SOP 手冊

如果這些痛點讓你產生共鳴，那一定不能錯過今天 Manus 技能（Skill）的實戰教學。

Skill 可以把我們驗證過可行的流程，變成 AI 能參考執行的 SOP 手冊。

教會 AI 一次，它永遠記得，未來遇到類似任務，它就知道如何應對。

這樣只要把公司做事的流程、報告的格式、專案要注意的細節設計成技能，新人就能在更短時間上手、交付的成果也會更穩定。

另外，複雜的業務流程也可以封裝成技能，讓同事可以在更短時間上手。

就算有人請假、甚至離職，任務也不會壓在同個人身上。

完整的 Demo，可以觀看 YT 喔 👉

對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。

【Manus Skill 技能教學】教會 AI 一次，他永遠記得！讓 AI Agent 自動完成你的工作流

• 🔗 Manus 邀請連結（多送 500 積分）
• 🎁 點擊連結可免費領取 Manus 1,000 積分（名額有限）

文章大綱

1. 白話文建立第一個技能
2. 把對話流程彙整成技能
3. 搭配連接器存進 Notion
4. 分享驗證過的技能，匯入實用的技能
5. 技能運作原理，個人使用心得

影片使用的 AI 工具是 Manus，如果你是第一次接觸，我過去有做一期影片帶大家掌握 Manus 的基礎操作：https://youtu.be/P4dO-vsiE1Q

① 用白話文建立第一個技能

瀏覽預設技能

這邊我先帶大家看一下 Manus 有哪些預設技能，先點擊左側頭像，選擇設定。

然後選擇技能，這邊你會看到 Manus 根據不同情境，已經幫我們建立好許多實用技能了。

建立技能的方式

除了可以使用預設技能外，我們也可以根據需求打造專屬技能。

Manus 有提供幾種方式，最簡單的方案是「使用 Manus 建立技能」，你只要白話說出自己的需求，它會透過內建的技能創作者（skill-creator）來協助建立。

另外也可以上傳別人建立好的技能，或直接從 GitHub 匯入技能；這部分在第四小節會跟大家詳細介紹。

而最下面的「從官方技能添加」這塊，其實就是從預設技能中，打開你需要的就能使用了。

建立第一個技能

這邊我先以「使用 Manus 建立技能」給大家做個示範，點擊後，Manus 會有一個模板提示詞，點擊送出後，會看到一個技能應該具備哪些元素。

這邊分享我平常高頻率使用的技能，現在大家每天都會收到海量的資訊，但靠人力一一確認這這些資訊是否有用真的太累了。

所以我要帶大家建立一個「萃取網頁重點」的技能，把滑到的好內容分享給 AI，讓他變成更好吸收的重點，這邊我先貼上提示詞：

技能名稱: web-digest
當使用者貼上網址，沒有明確要求時，用瀏覽器打開網頁，先等 10 秒確保網頁渲染完成，先判斷內容類型，再萃取出該類型最重要的資訊
內容類型與萃取重點：
- [知識]：核心觀念、使用方式（具體怎麼做）、可行性評估（適合誰、前置條件、限制）
- [美食]：店名、地址、料理類型、價位、評價與推薦菜色、注意事項（ex: 要排隊、需訂位）
- [其他]：不屬於上面三類時使用，標註內容主題後，條列 3~5 個重點
輸出格式：
- 開頭固定為：內容類型、來源標題、一句話總結，接著列出該類型的萃取重點
- 使用繁體中文，條列清楚，方便快速閱讀
- 直接輸出整理結果，不需要額外解釋
務必遵守：
- 只根據網頁實際內容整理；遇到打不開、需要登入、付費牆的頁面，直接告訴我，不要看標題腦補
- 原文沒提到的資訊（ex: 地址、營業時間、價格）就留空，不要自己編

這段提示詞的 3 個設計重點：

• 第一，預先設計好選項，只讓 AI 在範圍內執行，像「內容類型」我就先定義了知識、美食這些選項；同時我想好「都不符合」時，有「其他」當保底，這樣分類才不會失控。
• 第二，格式由我來定，不讓 AI 自由發想。因為技能要的是「穩定重複」，比如美食我就是要地址、類型、評價，如果每次萃取的重點都長得不一樣，那就稱不上 SOP 了。
• 第三，也是這個技能的保險，打不開的網頁要直說，沒提到的資訊要留空。因為 AI 最常見的問題，就是網頁根本打不開，卻看著標題腦補一篇文章。你想想，要是他幫美食編出一個地址，你可能導航到現場才發現沒有這間店。

初步瞭解技能結構

稍等一段時間，技能就生成出來了：

我們把它點開來看看，你會發現有一個 SKILL.md，這就是技能的本體；上方的 YAML 是所謂的元數據（Meta Data）。

• name：我們指定的 web-digest
• description：技能描述，如果與 AI 對話的內容有匹配到，他就會自動觸發；觸發後，AI 才會閱讀下面的文字內容，也就是我們規範給 AI 參考的執行 SOP。

確認符合預期後，點擊「新增到我的技能」，之後我們在對話中就可以使用了。

未來想找已儲存的技能，可以點擊左下角頭像，選擇設定，打開側邊欄的技能後往下滑，在個人的部分，就可以看到我們剛剛新增的 web-digest 技能嚕。

這邊分享一個心得，AI 設計的技能，有時會有過度設計、冗贅資訊的問題；大家可以根據實戰結果調整細節，不一定要照單全收。

驗證技能 — 被動觸發

在技能建立後，提醒大家一定要實際驗證。

技能的觸發方式有兩種，第一種是用「意圖、關鍵字」被動觸發，這邊開一個新對話，貼上自己部落格的文章網址後直接送出。

https://deanlin.net/blog/202507/afteroffice1-15-years-one-book/

你可以看到，儘管我沒有輸入技能名稱，但如果 Manus 判斷這個需求與技能的描述匹配，就會自動套用了。

它正確判斷這是「知識」類型，按照我規定的格式，萃取出核心觀念、使用方式與可行性評估。

我會建議大家盡可能把技能得「描述」，讓他可以被動觸發，因為技能會越來越多，要把每個名稱記住太困難了。

驗證技能 — 主動觸發

但如果你希望主動觸發，那可以輸入斜線加技能名稱，開一個新對話窗，這次我改貼一篇 Threads 的美食文：

/web-digest 
https://www.threads.com/@deb_yaaang/post/Da7BZWvoA6n

可以看到它的輸出自動切換成[美食]模板，店名、地址、類型、評價都讀取出來了。

當你想穩定觸發技能，或是一段對話中綜合多個技能的功能使用時，主動觸發的方式比較穩定。

先完成雛形，再透過實戰迭代

在成功建立第一個技能後，先幫大家建立一個重要觀念：「一開始建立的技能，通常是不完美的。」

在使用過程中，你會發現許多需要優化的細節；比如美食相關的，你或許會希望直接得到 Google Map 連結方便查看。

而這些需求與問題，都可以直接用白話文請 AI 協助優化，比如我這邊可以跟他說：

我希望 web-digest 這個技能在遇到美食類型時，取得店名後，回傳 Google Map 的完整網址（須確保該網址可以瀏覽）

執行後，稍等一段時間，AI 就會完成優化，這邊記得要點擊「更新」，並選擇「更新技能」才會生效喔。

接著我們開一個新對話窗，驗證技能更新是否如預期

/web-digest 
https://www.threads.com/@deb_yaaang/post/Da7BZWvoA6n

這次我們就看到輸出有涵蓋 Google Map 網址了：

透過持續迭代，就能讓技能更貼近你的使用需求，而這就是價值積累的過程。

② 把過去與 AI 對話的流程，轉化成重複使用的技能

用 AI 一段時間後你會發現，好的結果往往要經過多輪對話才能得到。

但在得到期待的成果後，大部分的人都會直接關閉視窗，我覺得非常可惜。

因為這樣下次你還要從零開始，但如果把引導 AI 的過程設計成技能，未來就可以有更高的起點。

這邊我用「提案企劃」當示範給大家看。

在技能推出來以前，如果我想與 AI 協作建立一份提案企劃，會需要與它討論半小時以上，來回執行 7 段固定的提示詞，當時我覺得自己真的比 AI 更像機器人。

這邊我先展示當年 7 個步驟是如何設計的：

STEP 1：優化提示詞

一開始先簡單說明想完成的目標，比如給台灣新創行銷公司導入 AI的提案企劃；然後讓 AI 幫我優化提示詞，這可以讓需求描述更加精確。

我準備製作一個[給台灣新創行銷公司導入 AI]的提案企劃

以上面的 Prompt 為基礎，我要提供怎麼樣的 Prompt 可以得到較好回答？
請說明為什麼，並在最後舉出能得到專業回覆的 Prompt 範例。

接著 Manus 就給了我們一些建議，此時你可以選擇符合自己需求的複製下來，但不要急著送出。

STEP 2：讓 AI 反問

因為接下來我要讓 AI 反問，儘管提示詞已經優化過一次，但往往還有許多沒考慮到的地方。

```
貼上複製的 Prompt
```

在用這個 Prompt[撰寫提案企劃前]有任何問題，請先詢問我，不要直接產生。

像這邊就被問了許多實務上細節，我建議大家根據問題自行填寫，這樣結果才會更符合自己的需求。

STEP 3：補齊資訊

但這邊為了是示範，所以我讓 AI 扮演顧問的角色，用自問自答的方式補齊資訊

請扮演對這個領域非常熟悉的[產業顧問]，針對提出的問題給出具體詳細的回覆、不要逃避問題。

STEP 4：利害關係人

在取得詳細資訊的狀態下，我們可以請 AI 從利害關係人的角度來思考企劃可能存在哪些問題。

因為如果想讓一份企劃執行起來是否順利，不能只考量到自己：

請分析這份企劃最重要的[3]個利害關係人，從他們的角度和利益出發，詳細說明對這份企劃有哪些具體的[意見、建議、憂慮]？

STEP 5：彙整建議生成企劃

那在得到利害關係人的建議後，我們就能生成初版的企劃了：

請扮演[提案企劃]的專家，了解[利害關係人]的想法後，以最專業的角度撰寫企劃，設計出更完善、可行的方案。

STEP 6：扮演對手挑毛病

在得到第一版的企劃後，我通常不會直接採納，而是讓 AI 扮演競爭者的角色來挑毛病，這樣你會得到更全面的觀點：

你是這份提案企劃的[競爭者]，盡可能列出這份企劃的不足之處。
並說明自己可以做到哪些更完善、可行的方案。

像這邊你可以看到，從競爭者的角度來看，我們有還有許多細節可以優化。

STEP 7：生成最終版本

在了解競爭者的想法後，最後我們在讓 AI 扮演提案企劃的專家，重新完善這份企劃。

請扮演[提案企劃]的專家，在了解[不足之處、更完善的方案後]後，以最專業的角度，重新完善這份企劃。

在經歷以上繁瑣來回對話的步驟後，這份企劃的品質，以及考量到的面向，會遠遠比你只跟 AI 説「幫我寫提案企劃」好非常多。

把對話彙整成技能

但如果你每次寫企劃都要反覆貼上這些提示詞，那也太累了吧。

所以在確認最後的版本符合自己的期待後，你可以直接請 AI 把它設計成可以重複使用的技能：

/skill-creator
請根據以下要求分析上方對話內容後，整理成可重複使用的技能，名稱為[proposal-refiner]

1. 起初怎麼提問
2. 中間如何引導與調整
3. 最終是如何得出這個成果的

稍等一段時間，這個技能就生成了；我們先把它「新增到我的技能」。

驗證技能

接下來開一個新的對話窗，驗證這個技能是否真的讓我們可以用一句話就能觸發完整流程：

/proposal-refiner 我要做一份[給連鎖餐飲品牌導入 AI 點餐分析]的提案企劃，幫我做到專業可行的程度。

這邊你會看到在觸發這個 Skill 後，AI 不會預設立場直接產生企劃，而是先拋出問題詢問我們細節。

這樣才能確保最終的結果盡可能貼近需求，這邊我一樣讓 AI 來模擬回覆

請扮演對這個領域非常熟悉的[產業顧問]，針對提出的問題給出具體詳細的回覆、不要逃避問題。

回覆後，稍等一段時間，AI 就按造技能給的步驟，自動走完整個流程；而且每個步驟都有留下對應的文件，讓我們可以確認當時的決策。

經過這次驗證，我們確認了兩件事：

• 第一，AI 會根據主題確認細節再執行，而非用腦補的方式直接給出方案
• 第二，這個技能，換一個主題也依舊可以使用，初步確認 SOP 是可行的

最珍貴的是打磨成果的流程

我之所以會分享這個將對話彙整成技能的流程，就是想提醒大家，最珍貴的並不是別人的提示詞，而是你與 AI 對話打磨成果的過程。

網路上的提示詞跟技能的資源很多，但要能讓轉化成匹配自己工作流的技能，價值才有辦法持續累積。

③ 搭配連接器，把萃取的重點存進 Notion 知識庫

前兩個案例，我們製作的技能都是在「整理與產出」。

接下來我要跟大家示範一個進階用法，讓技能搭配連接器，讓 AI 幫你「自動儲存資訊」。

上一集我們透過連接器，讓 Manus 可以直接操作 Gmail、Google Calendar 與 Notion 這些外部工具。

接下來，我就會透過實戰，把兩者組合起來。

痛點分析

還記得我們在第一個案例，設計了分析網址內容的技能嗎？

用一段時間後你會發現一個問題，那就是我們把內容萃取出來後，對話一關就不見了；這樣不管「知識」還是「美食」都是一次性的資訊。

所以接下來，我們要優化這個技能，讓他把萃取完的重點自動儲存到 Notion，變成可以隨時查找的長期記憶；但在優化這個技能前，我們有兩件事要做。

1. 連上 Notion 連接器

點擊左下角頭像，選擇設定，然後在側邊欄選擇「連接器」；進入瀏覽連接器，搜尋 Notion，確認已經建立連接。

2. 準備知識庫範本

接下來，我們要準備給 Manus 寫入的 Notion 知識庫。

你可以請 AI 幫你設計，或直接複製我的模板，範例連結我放在影片描述欄，點擊右上角的「建立副本（Duplicate）」，就會存進你自己的 Notion。

https://kaput-lord-cf7.notion.site/manus-3a71a22ceed9812f90abf2172450478a

升級 web-digest 技能

接著我們直接請 AI 幫忙升級：

請幫我升級 [web-digest] 技能，在原本的流程後面加上：
1. 萃取完成後，先確認是否已經與 Notion 建立好連接
2. 若有建立連接，確認 Notion 是否已經建立好「manus-知識庫」頁面
3. 找到 manus 知識庫頁面後，根據類型於「知識庫、美食庫、其他收藏」頁面下新增資訊，需包含「建立日期、來源網址」
4. 最後回應要包含 Notion 頁面連結

稍等一段時間後，這個技能就完成了升級，不只有分析網址內容的功能，還可以直接儲存到 Notion 知識庫。

記得要點擊「更新」，並選擇「更新技能」才會生效喔。

驗證工具

在技能升級後，我們開一個新的聊天室來實測一下；我貼上一篇 Threads 的文章連結。

/web-digest 
https://www.threads.com/@_qqzy/post/Da1eQNcE33I

稍等一段時間，AI 判斷出這篇文章是[美食]類型，並把店名、地址、類型、評價全部讀取出來。

並且自動儲存到 Notion 當中，這邊我們點擊連結，可以看到有成功紀錄，欄位也都有填對。

第一次執行時，會花比較久的時間，這因為 AI 還不確定工具如何使用，所以在完成後，你可以跟他說

根據剛剛成功操作 Notion 的步驟，請幫我優化 [web-digest] 技能

這樣未來使用這個 Skill 時，會更有效率。

自動成長的知識庫

而這個知識庫會隨著時間持續成長，就像我用來記錄 AI 技術的知識庫已經成長的非常大了。

當然知識的價值並不在於紀錄，而是後續的使用；還記得上一集我們把 Notion 變成可以問答的 AI 嗎？

現在我們已經把這條路從讀取、寫入、彙整全部打通了，比如我們可以詢問

列出存在 Notion [manus-知識庫] 的北部下午茶美食資訊

儘管我們輸入的查詢條件很模糊，但最後 Manus 還是有成功查詢到我們剛剛儲存進去的資訊了。

④ 分享驗證過的技能，與匯入實用的技能

如果跟著教學操作，你已經建立了 web-digest 跟 proposal-refiner 兩個技能了。我覺得技能最棒的地方，就是你可以把它分享給其他人使用。

分享技能

這邊我們點擊左下的頭像，選擇設定，點擊技能的分頁；如果想分享自己建立的技能給朋友，點擊目標技能後，選擇右上角的「…」，按下載就會得到一個「xxx.zip」格式的壓縮檔。

為了測試匯入，我們先把這個技能刪除；然後點擊右上角的「建立」，選擇上傳技能，匯入剛剛的「xxx.zip」壓縮檔，就可以看到技能重新建立嚕～

了解分享技能的方式後，其實就代表資深員工的經驗，終於可以用檔案的形式交接，而不是口耳相傳。

前輩驗證過的流程，可以直接發給整個部門，讓大家產出品質更一致的成果。

而新人報到，在匯入幾個技能後，就能更快上手公司的業務。

這就幫我們解決開頭提到的痛點，流程不會只有某位員工知道，並且有了技能後，我們也不再需要重複貼上提示詞。

匯入第三方技能

最後再跟大家示範一個匯入第三方技能的操作。

網路上有很多人分享自己建立好的技能，這邊我就跟大家分享一個自己設計 IG 圖卡的技能。

我把它放在 GitHub 這個平台上面，想嘗試的朋友我有把連結放在影片資訊欄，歡迎路過幫我按個 Star。

GitHub - dean9703111/ig-card-generator: Agent Skill：把文章／筆記／逐字稿提煉成 IG 輪播知識圖卡。Markdown DSL → lint 把關… Agent Skill：把文章／筆記／逐字稿提煉成 IG 輪播知識圖卡。Markdown DSL → lint 把關 → Puppeteer 產出 1080×1350 PNG，深淺主題一次搞定 … github.com

這邊回到 Manus 頁面，我們選擇「從 GitHub 匯入」，然後貼上網址，建立完成後，我們開啟一個對話窗來測試看看。

/ig-card-generator 替換帳號:deanlin5288

```
今天想跟大家分享 Manus 的技能（Skill）如何幫我們解決職場以及 AI 使用的痛點
### 痛點：缺乏教育訓練
首先是新人的教育訓練
回想一下，當我們剛入職時，是不是需要公司前輩的帶領，你才知道做事的流程、報告的格式、專案的細節。
但並不是每間公司都有新人教育訓練，有些公司甚至沒有標準作業流程，全靠新人自行摸索。
在這樣的狀況下，會因為每個人對任務的理解不同，導致交付成果的品質差異很大。
### 痛點：業務沒有代理人
再來第二大痛點，複雜的業務流程只有某位員工知道
如果某項業務長期倚賴單一員工，那他通常請假也不得安寧，因為遇到狀況時沒有代理人能處理。
更慘的是，如果他一氣之下離職，可能連完整的交接文件都沒有，後續接手的人就只能從頭摸索。
### 痛點：複製貼上類似的提示詞（Prompt）
另外，如果你已經使用了一段時間的 AI
應該會發現自己最常用的提示詞大概就是那幾個
但這些指令可能散落在筆記本、Notion，甚至是聊天記錄中
真的要用時，搞不好還分不清楚哪個才是最後一版，而且還需要根據不同主題調整提示詞細節
### 技能＝給 AI 的 SOP 手冊
如果這些痛點讓你產生共鳴，那一定不能錯過今天 Manus 技能（Skill）的實戰教學。
他可以把我們驗證過可行的流程，變成 AI 能參考執行的 SOP 手冊。
教會 AI 一次，它永遠記得，未來遇到類似的任務，就知道如何應對。
這樣只要把公司做事的流程、報告的格式、專案要注意的細節設計成技能，新人就能在更短時間上手、交付的成果也會更穩定
另外，複雜的業務流程也可以封裝成技能，這樣同事可以在更短時間上手成為代理人
就算有人請假、甚至離職，任務也不會壓在同個人身上
```

在最上面的地方，我是放上自己的 IG 帳號，而下面就是今天影片開頭的逐字稿；稍等一段時間，我們就可以看到圖卡生成出來了！

資安提醒

不過也趁這個機會提醒一下大家，匯入第三方的技能是有風險的；這邊把視角切回 GitHub，風險來自幾個地方，首先是 SKILL.md。

如果有心人士在這裡寫一些危險的提示詞，比如將你的一些個人資訊傳到某個網址之類，就可能造成隱私外洩的問題。

另外像這個 Skill 有設計程式腳本（Scripts），這裡也是有操作空間的；所以建議大家如果真的要使用第三方技能。

可以看一下這個發佈這個技能的人是否可信，以及專案獲得的 Star 數量來初步判斷。

⑤ 技能原理，個人使用心得

最後跟大家分享自己這段時間的實戰心得

增加觸發成功率

首先，把技能建立完成後，如果你沒有使用「/技能名稱」的方式觸發；他可能與到相似情境時也未必觸發，如果想優化他，就需要在「描述」的部分下功夫。

描述要寫清楚使用時機與觸發關鍵字，而不是只寫功能。

技能不是越多越好

另外，技能並不是裝越多 AI 就越強。

如果安裝了兩個以上功能相近的技能，在沒有明確指定要使用哪一個技能時，AI 可能會隨機觸發。

比如你今天有撰寫文案的需求，與其安裝多個同類型的技能，不如先進行測試，選擇其中最符合需求的一個，再根據實際使用情況持續優化。

搭配排程觸發技能

假使你有需要定時重複執行的任務，可以先讓 Manus 完整執行一次，在確認結果符合預期後，再將它設定到程任務中。

像我就設定了兩個排程，一個是在週一早搜尋 Mail 告訴我這禮拜的行程，另一個則是週末晚上幫我復盤這週儲存到 Notion 的筆記。

這邊我有在排程的指令中要求他使用 Skill，來確保每次執行的流程與結果保持一致。

結語：建立專屬技能，安裝必要技能

最後我們來回顧一下今天的教學：

1. 一開始我們用 Manus 內建的技能，用白話文就做出了「萃取網頁重點」的 web-digest 技能。
2. 然後把過去需要多輪對話的引導流程，轉化為 proposal-refiner 的技能，這是想讓大家記住，最珍貴的不是別人的提示詞，而是你打磨成果的流程。
3. 接著用白話文升級 web-digest 技能，讓它能搭配連接器把萃取的重點存進 Notion，變成會自動成長的知識庫。
4. 最後示範技能的下載與匯入，讓好經驗可以用檔案交接，不再鎖在某個人的腦袋裡。

好的，今天的分享就到這邊。

技能讓 AI「知道步驟」，那有沒有辦法讓 AI「知道事實」呢？

下一集，我會分享 Manus 的「專案（Project）」功能，解決每次對話都要重新交代背景的痛點。

而且專案還能把我們學到的連接器、技能都加入進去，甚至讓同事一起維護。

讓 AI 成為我們的第二大腦！

這些年我講了上百場的企業內訓，發現不管是金融業、製造業、行銷業或科技業，其實大家遇到的問題都很類似。

所以接下來，我會拍攝一系列 AI 的教學影片，從工作上的痛點出發，並透過實戰帶大家瞭解這些問題要如何解決。

這隻影片會先從「連接器（Connector）」開始，讓大家了解 AI 如何使用外部工具，這樣我們就可以把任務集中在 AI Agent 完成，而不用根據任務切換工具。

接下來則會分享如何把工作與生活上的既有流程封裝，設計成可重複執行的「技能（Skill）」，讓 AI 未來接到相似任務時，知道明確的執行步驟。

然後根據手上的「專案（Project）」，設計對應的知識庫，讓 AI 成為我們的第二大腦，這樣對話時就不需要重複交代背景，而且可以與同事一起享受成果。

最後則會分享如何讓 AI 協助彙整我們「電腦上（My Computer）」的複雜文件，完成分析圖片轉存 Excel，以及自動填入不同格式的表單的任務

如果你想打造一套完整的 AI 工作流，那這系列的影片會告訴你每一步該怎麼做。

影片使用的 AI 工具是 Manus，如果你是第一次接觸，我過去有做一期影片帶大家掌握 Manus 的基礎操作：https://youtu.be/P4dO-vsiE1Q

完整的 Demo，可以觀看 YT 喔 👉

對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。

【Manus 連接器教學】不是 AI 不好用，是你還在當人肉搬運工！接上 Gmail、行事曆、Notion 讓 AI Agent 完成任務 | Connector | MCP

• 🔗 Manus 邀請連結（多送 500 積分）
• 🎁 點擊連結可免費領取 Manus 1,000 積分（名額有限）

沒有連接器，人類就是搬運工

在進入實戰前，我先帶大家回想，過去我們是怎麼跟 AI 互動的？

複製來複製去，人類比 AI 更像機器人

比如你想讓 AI 幫忙回一封信，是不是先把信件內容複製起來，貼給 AI 請它寫草稿？

但這個流程存在幾個個問題：

1. 如果這是一串來回對話的信件，AI 並不會知道你們過去聊了些什麼，因為它只拿到最後一封的資訊。
2. 在這樣的狀態下，AI 可能會因為資訊不足詢問你更多細節；假如你沒有認真回覆，當 AI 的答案不如預期時，問題可能出在你給的資訊不夠。
3. 另外，你在得到 AI 答案後還要切到信箱視窗貼上回覆。

在這段操作中，你在做的事情只是搬運資訊。

資訊太多不知道如何找

這邊再舉一個案例，有些公司會使用 Notion 作為專案管理工具。

但隨著專案的時間拉長，裡面的會議記錄、需求規格會越來越複雜，而且一個人手上可能同時負責多個專案。

再加上公司可能會有人員的流動，因此幾個月後當主管或客戶問起專案的某個問題時。

你可能早就忘記過去的決策，甚至是第一次接觸這個專案的同事，連搜尋的關鍵字都不知道怎麼下，所以要花很多時間在考古上。

建立連接器，讓 AI 接上你的日常工具

如果前面這些痛點讓你感到共鳴，我們在 Manus 建立連接器後，都可以迎刃而解。

人類的價值應該在於決策，而不是這些瑣碎、重複的操作。

點擊左側頭像，選擇「設定」，在側邊欄可以看到「連接器」的分頁。

點擊「瀏覽連接器」就能看到 Manus 已經幫我們預設許多可以直接使用的工具。

我們只要開啟對應工具的權限，Manus 就可以透過 API 進行操作，而 API 你可以理解成工具開給程式呼叫的服務窗口。

那今天我會以 Gmail、Google Calendar、Notion 這些日常工具做示範。

以前寫信要開 Gmail、建立行程要開 Google Calendar、查資料要翻 Notion，不同工具切換很耗費精神；但設定好連接器後，這些任務就能在 Manus 集中管理。

這邊也補充一個小知識，這類工具連結的背後，有一個通用的技術標準叫做 MCP。你可以把它想像成 AI 世界的 USB 窗口，只要符合這個標準的工具，都可以接上 AI。

另外 Manus 也支援自訂 API 與 MCP，如果你想連接的工具沒出現在列表上，也可以自行新增。

文章大綱

今天會帶大家實戰 4 個，馬上就能在工作應用的案例，最後再加碼工程師可以嘗試的進階應用。

1. 連接 Gmail，讓 AI 整理信件、建立標籤
2. 查詢 Gmail，彙整多封信件的討論脈絡
3. 搭配 Google Calendar，把混亂討論建立成事件
4. 授權 Notion，把知識庫變成可以問答的 AI
5. 自訂 API，接上不在列表裡的工具

風險提醒

這邊先提醒一下大家，授權連接器，等於把工具的操作權交給 AI。

所以後面的案例中，我也會示範如何在提示詞裡設計「保險機制」。

① 連接 Gmail，讓 AI 整理信件、建立標籤

這邊先從大家日常會使用的信箱開始，相信很多人的信箱都是爆炸的狀態，裡面充滿垃圾信、電子報、行銷廣告、過期會議邀請…

而這可能會導致真正重要的信被埋在下面。

但刪除信件很麻煩，我也懶得將廣告信一一封鎖；既然你也有這樣的想法，那我們就把這個任務交給 AI 吧！

建立 Gmail 連接

這邊我們把畫面切到 Manus，回到剛才介紹過的連接器頁面；在瀏覽連接器的部分貼上「Gmail」。

打開點擊連結後，選擇要授權的信箱，就會跳出 Google 的詢問頁面。

完成授權後，就會再跳轉回 Manus 畫面，看到信箱出現在上面就代表成功嚕～

連結完成後，點擊「試試看」開一個新的對話，你會看到官方一開始就有提供一個提示詞的模板讓你了解如何使用。

可以點擊「發送」檢查功能是否正常，並得到初步說明。

提示詞解析：分類規則與保險機制

確認功能符合預期後，可以貼上這段提示詞讓 AI 協助分類信件：

幫我整理 Gmail 最近 30 天內未標籤的信件（最多 [50] 封），步驟如下：

## 第一步：分類打標籤
閱讀每封信的寄件人、主旨（不需閱讀內容），依下列規則加上標籤：
- 🔴 重要：來自真人（非系統信）、需要回覆或行動、來自我的聯絡人
- 📁 封存：通知類、收據、訂單確認、已讀但無需回覆
- 🗑️ 刪除候選：促銷、電子報、自動發送的廣告信、過期的會議邀請、寄件人是 no-reply
有疑慮時，優先歸入「封存」而非「刪除候選」。
## 第二步：整理廣告寄件者清單
找出符合以下任一條件的寄件者：
- 過去 30 天內寄超過 2 封促銷/電子報
- 主旨含有「優惠、折扣、限時、unsubscribe、newsletter」等關鍵字
- 寄件地址為 no-reply@ 或 marketing@ 開頭
輸出格式：
| 寄件者名稱 | Email 地址 | 封數 | 建議動作（取消訂閱／封鎖） |
## ⚠️ 執行前確認
以上兩步驟完成後，先給我清單讓我確認，
我明確說「確認執行」後，才進行標籤套用動作。

送出後，我先跟大家解析這段提示詞的設計重點：

① 首先是範圍限制，我要求他搜尋 30 天內未標籤的信件，並且最多 50 封；我們先確認小範圍的執行符合預期後再擴大，避免浪費積分。

② 然後是分類規則，我把「重要、封存、刪除候選」各自的判斷條件講得很明白；而且還加了一句「有疑慮時優先封存」，因為封存的信在「所有郵件」還找得回來，刪除三十天後就永久消失了。

③ 另外要求用表格輸出廣告寄件者清單，有設定好欄位才方便我們快速判斷。

④ 最後，也是最重要的，我要求他「執行前先跟我確認」，這就是我前面說的保險機制。

實際執行與結果驗證

指令送出後，你可以看到 Manus 開始讀取信件的寄件人與主旨。稍等一段時間，分類清單就整理出來了，哪些重要、哪些可以封存、哪些是刪除候選，一目了然。

確認沒問題後，跟他說「確認執行」，Manus 就會開始對信件進行分類標籤；執行完畢後，我們回到 Gmail，這邊可以看到標籤真的建立起來了，信件也都分類完成。

這邊再提醒一下大家，刪除信件、取消訂閱這類高風險操作，我建議在標籤建好後由人類來做最後判斷，因為有些 no-reply 的信件可能是繳費通知

另外建議大家先小範圍測試，比如先 50 封，沒問題後再擴大範圍、調整判斷規則。

② 查詢 Gmail，彙整多封信件的討論脈絡

接下來分享一個我自己常用的功能。

與同事、客戶的信件，通常有多段來回、細節持續調整，而且每一段可能都有重要資訊；更麻煩的是，討論可能不在同一封信，而是散落成好幾封。

像我自己有些合作案，從接洽到結案可能有好幾個月，中間還可能會更換主題、換對接的窗口。

要回憶當初談了什麼條件、改過哪些內容，光翻信就要花半天。

但在我們建立連接器後，現在只要給予關鍵字，Manus 就會搜尋相關的信件，幫你把整個合作的時間軸、關鍵決策、待辦事項整理出來。

幫我整理 Gmail 信箱中 [黑寶科技] 合作的過程，列出：
1. 關鍵決策和協議
2. 聯絡人和負責人
3. 財務或合約相關信息

稍等一段時間，過去自己翻半天可能還一頭霧水的東西，現在馬上就有一份完整的脈絡。

這邊除了簡短的摘要外，Manus 針對細節也有對應的報告，幫助我們快速掌握所需資訊。

這邊再跟大家做個補充，Manus 連接器除了支援 Gmail 外，Outlook 也有支援的喔！

那如果你們公司用的是自建信箱，在不涉及機密的前提下，可以考慮用密件副本寄到 Gmail，讓 AI 可以去做一個讀取。

③ 搭配 Google Calendar，把混亂討論建立成事件

接下來跟大家分享連接器的綜合應用，這邊我就以「建立會議行程」作為範例。

回想一下，過去開會前，我們需要做哪些事前準備？

像是彙整會議資料、確認與會者可以參與的時間、確認哪些人需要出席，在發出會議前還要整理一份議程讓大家知道這個會議的目的。

這是一件非常瑣碎的任務，因為會議的時間、地點、文件，可能散落在信箱的討論串中；手動彙整不但花時間，還容易遺漏細節、參與人員。

既然如此，不如把彙整資訊、建立行程的任務交給 AI 來幫我們處理。

一樣到連接器的頁面，這邊先把 Google Calendar 加入連接器，授權的模式跟前面的 Gmail 都是一樣的。

從 Gmail 信件建立行程

這邊連接完成後，貼上這段提示詞：

從 Gmail 找出[Q3 新品活動｜上線滿月成效初步整理]信件，並在 Google Calendar 建立行程：
- 抓出最後會議的日期、時間、地點
- 在行程說明裡附上議程重點
- 取出信件討論人員，設定為 attendees
- 如果時間和我現有行程衝突，先提醒我
建立行程前，請先提供草稿讓我過目

這段提示詞做了幾件事：從 Gmail 找信、抓時間地點、整理議程、加入與會人、檢查是否與既有行程衝突。

而且最後一樣有保險機制：「建立前先給我草稿過目。」

稍等一段時間，Manus 就從信件討論串抓出最後拍板的結論，並把議程整理出來；確認沒問題後，點擊接受行程就直接建立到行事曆上了。

接下來我們把視角切到 Google Calendar，可以確認時間、地點、與會人、議程都新增如預期。

這邊特別提醒一下大家，給予授權後，AI 是真的會建立行程，而且會發送會議邀請給與會人，因此執行前請務必確認內容。

④ 授權 Notion，把知識庫變成可以問答的 AI

最後一個案例是 Notion，這邊先簡單介紹一下，Notion 是一款整合筆記、知識庫、Wiki 的工具。

有些團隊用它來記錄產品規格、常見問答、會議記錄的資訊，或作為專案管理的工具，像我自己就把它當成個人筆記的知識庫。

但當資訊量龐大到一定程度時，你可能還是會難以找到所需資訊。

建立連結與範例知識庫

但幸好現在有了 AI，我們把視角切換到 Manus。

連接 Notion 時，需要允許 Manus 來呼叫 Notion MCP，然後點擊 Continue。

把 Notion 加入連接器後，你不用再自己慢慢找，直接「問」就能找到答案，還能標明出處，等於給知識庫裝上了搜尋引擎與摘要功能。

另外如果你還沒有 Notion 帳號，用 Gmail 註冊免費版就可以使用了。

我也準備了一個範例知識庫：

https://kaput-lord-cf7.notion.site/e4f7378f09a346ed8cee5c552b2754d0

打開範例頁面後，點右上角的「建立副本」，就會存進你自己的 Notion。

限定範圍、要求出處

連結完成後，貼上這段提示詞：

去 Notion 工作區的 [AI 知識庫] 幫我尋找「Manus 技巧」的頁面
① 回答我的問題，並附上你引用的頁面標題與連結
② 如果範圍內找不到答案，直接說「範圍內查無資料」，不要自己編

這段提示詞的重點有兩個。

1. 限定搜尋範圍，指定某個頁面或資料庫，這樣 AI 只會在這個範圍內找，不會拿網路上的資料亂湊
2. 要求附上出處，並要求它找不到就要誠實說「查無資料」。

稍等一段時間，你可以看到 AI 找到了對應的頁面，回答了問題，還附上引用的頁面標題與連結。

這邊我點擊一下連結，來驗證 AI 確實有找到對應資訊。

詢問範圍外的問題

這邊我也做一個測試，故意問 AI 一個範圍外的問題，看他是否會唬爛

請在 Notion 的 [AI 知識庫] 幫我尋找「工程師林鼎淵 Dean Lin 經歷」

你可以看到他誠實回答「範圍內查無資料」，而不是自己瞎編一個答案

這個「要求出處、禁止瞎編」的技巧，是減少 AI 幻覺最實用的方法，這個技巧我在後續分享 Manus 專案功能時也會使用。

⑤ 自訂 API，連接不在列表的工具

前面示範的案例，都是用 Manus 連接器預設就有的應用程式。

但如果你想用的工具沒有出現在列表上呢？

其實我們也可以自己新增，這邊我用「自訂 API」示範給大家看。

我知道看這個頻道的朋友，有許多人是工程師，而大家做專案版本控制的工具可能是 GitLab。

但 GitLab 並沒有出現在預設的連接器中，如果你希望把 GitLab 專案的存取權，允許讓 Manus 去做存取，就可以透過自訂 API 來達成。

取得 GitLab 的 Access Token

首先，我們要到 GitLab，並在這邊取得 Access Token，它就像一把有使用範圍的鑰匙。

進入 GitLab 畫面後，點擊「Edit profile」，選擇側邊欄的「Access」底下的「Personal access tokens」的設定頁面。

點擊「Generate token」時，它有分成兩種，這邊我選擇「Legacy token」來做 Demo。

• Token name: manus
• Select scopes: 勾選 read_user、read_repository、read_api 這些讀取的權限

Token 生成後，畫面有提醒你他只會出現一次，所以要好好保存，這邊我把 Token 複製起來。

在 Manus 自訂 API

然後回到 Manus，在自訂 API 的畫面中

• 名稱: GitLab
• 備註: 可以使用密鑰的 Token 來讀取 https://gitlab.com 的 Repo 資訊
• 密鑰名稱: GITLAB_TOKEN
• 密鑰數值: 把剛才複製的 Token 貼上去就好

這邊要特別提醒大家，前面設定 Token 的權限，就是 Manus 操作 Gitlab 的權限。

所以建議大家先用 Read 讀取權限來驗證是否符合預期；確認沒有問題後，再逐步擴增其他權限。

另外 Token 是隱私資訊，千萬不要外洩

儲存後，我們開啟一個新的對話窗，輸入指令：

請幫我讀取 GitLab 底下的個人專案，列出名稱

稍等一下，就可以看到 Manus 成功讀取到我們的專案嚕～

在了解設定的方式後，未來大家就可以根據自己的需求，來自定連接器了。

結語：把瑣碎交給 AI，把決策留給自己

最後我們來回顧一下今天的影片：

1. 一開始我們建立了與 Gmail 的連結，讓 AI 有能力建立標籤、彙整信件脈絡。
2. 然後再延伸到 Google Calendar，這邊我們以信件討論示範，讓 AI 將散落的資訊整理成明確的議程並幫我們建立行程、發會議通知。
3. 接著示範如何連接 Notion，讓知識庫變成搜尋引擎。
4. 最後補充自訂 API 的流程，就算工具不在預設列表裡，只要它有 API，一樣可以接上來。

設定好連接器後，過去要在不同工具間切換、複製貼上的任務，現在都能在 Manus 上操作。

這邊提醒一下大家，雖然連接器很方便，但因為 AI 真的可以幫你做事；如果想降低誤操作的風險，可以在提示詞最後補上「執行前先給我確認」。

別忘記，目前 AI 還無法替人類背鍋，你需要為自己的決策負責。

好的，今天的分享就到這邊，如果這篇文章對你有幫助，可以順手按個讚，並把文章分享給對 AI 主題感興趣的朋友們。

下一集，我會分享如何靈活運用 Manus 的「技能（Skill）」，把你驗證過的流程變成 SOP。

教會 AI 一次，它永遠記得，還能分享給他人共用，讓大家站在更高的起點。

我替他開心，也順口問了幾個問題：系統有權限設計嗎？API 有沒有限制呼叫次數？有把使用者的操作記錄下來嗎？

他愣了一下，說：「我聽不太懂你的問題？這些重要嗎？」

聽到這個回答，我不禁捏了把冷汗，並列出一個檢查清單給他參考。

這幾年用 AI 輔助開發，我最深的體會就是這句話：「看起來能動的東西，才是最危險的。」

AI 真的很強，簡單的指令就能完成功能，甚至建立系統、App。

但它不一定會主動幫你補上那些「沒要求、卻很關鍵」的東西 — — 權限控管、測試、錯誤處理、資訊安全、上線維護。

有開發經驗的人，知道這些很重要，所以發現 AI 沒設計會要求他補上。

但如果是完全 0 基礎的小白，其實會陷入「不知道自己其實需要的囧境」。

我拍過十幾支用 AI 寫程式的教學影片，也幫不少企業做過內訓。

一路下來我慢慢發現，大家真正卡住的地方，其實不是 Prompt 下得好不好、工具選得對不對。

而是 — — 不知道怎麼把學到的技巧，整合進一個真實的專案裡。

所以我把幾個最會拉開差距、卻最常被忽略的地方，整理給你 👇

1️⃣ 別再用「寫了幾行程式」衡量產出

→ AI 五分鐘能噴 5000 行，也很擅長自產自銷 Bug。真正該看的，是交付出去的良率，以及出事之後多快能修好。

2️⃣ AI 跟你鬼打牆，通常不是 AI 的錯

→ 很多時候是你給的資訊不夠。log 不完整、需求太模糊，AI 再聰明也只能用猜的。先把資訊補足，遠比燒 Token 有效。

3️⃣ 解過的問題，不要再解第二次

→ 把這次的做法整理成一個 Agent Skill，教會 AI 一次，它就永遠記得。下次遇到同樣的任務，直接複用。

我很常被問：「AI 工具幾乎每天都在變，現在學的東西，明天還有用嗎？」

老實說，如果課程只教你工具如何使用；那過不了幾個禮拜，你學到的知識就過期了。

所以我更喜歡分享「如何拆解需求、怎麼定義規格、怎麼驗證結果、怎麼為產出負責」的知識，因為這套底層邏輯，是可以跟著 AI 與自身經驗一起進化的。

在人人都能用一行指令生成系統的年代，「軟體工程」反而變得更重要。因為有了清楚的地基，AI 才知道要照什麼規格開發、用什麼標準驗收、依循什麼流程交付。

如果你想學的，不只是「AI 能不能幫我做點什麼」，而是「我該怎麼把它放進自己的開發工作流」，那這場免費直播，我會完整分享自己的實戰經驗。

👉 立即免費報名: https://tibame.tw/hI1Ks

某次聚會時，有位朋友跟我說了一句話，讓我記到現在。他說：

如果人生是一場終究會走向終點的旅程，那你是我周圍朋友中最賺的！

因為你在不同領域，都努力活出了自己的樣子。

其實聽到當下有點不好意思。因為我很清楚，這一路並不是每個選擇都很篤定。

更多時候，我只是帶著對未知的好奇，還有想把事情做好的信念，慢慢走到了今天。

• 在本職工作方面，我做過工程師、專案經理、技術主管，目前在外商擔任 Software Specialist。
• 在魔術領域，我是花式撲克高手，曾三度站上公演舞台，也發表過國際魔術道具。
• 在作家領域，我出版過 7 本書，主題橫跨網路爬蟲、工程師職涯、AI 工具應用等多個領域，並連續多年入選百大暢銷書。
• 在講師領域，我累積超過 100 場授課經驗，曾受邀到政府機構、500 大企業與學校團體授課，分享 AI、職涯與實務應用。

而經營 YouTube 對我來說，是一段全新的旅程。

一開始只是想把自己學過的東西、踩過的坑、整理過的方法記錄下來。

後來在留言區發現，原來那些我曾經卡關的地方，也是別人正在煩惱的問題。

所以不管我分享的是自我成長、職涯發展，還是 AI 應用，背後其實都來自同一個很單純的想法：

「如果這些經驗曾經幫助過我，那它也可能在某個時刻，剛好幫上別人的忙。」

人生有些選擇看起來像繞遠路。

但回頭看，那些路都成為生命裡很重要的養分。

謝謝每一位曾經支持我、鼓勵我、留言給我，與默默看完影片的朋友。

你們讓我知道，這些分享不是自言自語，而是真的有機會陪某些人走過一小段路。

如果你想聽我分享哪一段故事，歡迎留言～

也許下一篇，我就從那個故事開始說起。

如果對自我成長、職涯發展、AI 技術等主題有興趣，歡迎訂閱我的頻道喔～

https://www.youtube.com/@dlcorner

這幾年協助企業導入 AI 時，發現對大部分的企業來說；他們判斷是否要導入一個 AI 工具的標準，除了功能與實際業務的「匹配度」外，他們其實更在意工具的「使用門檻」。

因為只要使用門檻高，不管工具有多強大，通常上完課後只有少數人會繼續使用。

我過去也分享過很多 AI Agent 的工具，但大多需要打開程式碼編輯器，甚至搭配終端機操作。

這對沒有技術背景的人來說，容易產生抗拒感，甚至使用初期會有挫折感。

所以今天要跟大家分享一款普通人可以快速上手的 AI Agent 工具，他就是「Manus」。

並搭配實戰案例，讓你了解這款工具可以給你的生活、工作帶來哪些幫助。

完整的 Demo，可以觀看 YT 喔 👉

對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。

【Manus 實戰教學】從研究、簡報到個人網站，帶你掌握普通人也能上手的 AI Agent

從對話型 AI 到任務型 AI

過去我們使用網頁版的 Chatbot，通常比較像是在跟 AI 對話，就算討論得到了結果，最後還是要自己動手去做；而 Manus 不一樣的地方在於，你可以真的把任務交給它。

• 基本任務、進階任務：它除了可以幫你做到基本的搜尋資料、整理資訊外，生成簡報、建立網站這些進階工作也能搞定。
• 工具連結：如果給他權限連結到 Gmail、Google Calendar、Notion 這類工具，它還可以成為一個更全能的助手。
• 重複任務：假使你有一些重複性任務，也可以打包成 Skill 技能；這樣你只要教會 AI 一次，之後遇到類似任務時，AI 就知道如何應對。

把事情做完，不等於把事情做好

在進入實戰前，先跟大家分享一個很重要的觀念。

讓 AI 把事情做完，跟讓 AI 把事情做好，其實是兩件事。

因為以現在 AI 的能力來說，如果只是想應付交差，一行指令就夠了。

不管企劃、簡報、音樂、影片，甚至連網站、手機 App 都可以一鍵生成。

但做得出來，不代表做得好，如果希望結果符合需求，你要先搞清楚自己要什麼。

所以我除了分享 Manus 有哪些功能外，還會分享自己與 AI 對話的技巧，並搭配實際案例，讓大家了解 AI Agent 可以如何融入我們的工作與日常中。

從釐清需求、生成研究簡報，到建立個人品牌網站都有具體操作，會由淺入深的帶大家掌握工具。

① 根據個人背景，掌握技術重點

註冊 Manus

🔗 註冊連結: https://manus.im/invitation/9EZQALE1FISTXZP

目前 Manus 有提供 Facebook、Google 等多種方式註冊；如果你是透過我的邀請連結註冊，除了會獲得初始的 1000 積分外，還會多獲得 500 積分喔！

另外每天登入就會獲得 300 積分，所以右上角可以看到一開始就有 1800 積分了。

我這邊特別跟官方爭取到一個小禮物，新帳號點擊連結可免費領取 Manus 1,000 積分（名額有限）。

這些積分，能讓我們使用 Manus 各式各樣的 AI 功能；給大家一個初步的概念，像我生成一個 15 頁圖文並茂的簡報大約需要 300 積分。

而 Manus 在使用模式上，有分成三種，目前免費版只能使用 Lite 模式。

建議大家先透過 Lite 熟悉基礎操作，如果覺得 Manus 真的有幫你解決痛點，就可以考慮升級到付費版。

為了讓大家更清楚 Manus 的能力，這篇文章我是用付費版示範給大家看的（順手幫我點個讚吧）。

不要盲目使用工具

這裡先分享我是如何快速掌握一款新的 AI 工具，畢竟現在市場上的工具太多了，而且每天都在更新。

如果每接觸一款新工具，都自己人肉測試，那其實很容易錯過好工具；因為憑感覺使用一款工具，未必會試到這個工具對自己有幫助的地方。

所以現在接觸新工具時，我都會先請 AI 幫忙研究。

畢竟人的時間有限，我們也不需要精通一個 AI 工具的所有功能。

最重要的，是知道：「這個工具有哪些功能，是真的對我有幫助的。」

使用 Chat 模式節省積分

我先分享一個節省點數的技巧，其實 Manus 有分成 Chat 模式跟 Agent 模式。

一開始與 AI 討論問題、腦力激盪的時候，我們可以先用 Chat 模式。只要點擊右下角的更多，就可以看到「Chat 模式」。

請 AI 規劃學習指引

比如我想知道 Manus 可以給我帶來哪些幫助，就可以貼上提示詞跟他詢問

我是一名工程師、協助企業導入 AI 的內訓講師，同時也經營 YouTube 頻道。

我想要了解 Manus 有哪些功能可以幫助我更快完成工作。

請你從官方網站、網路文章與近期社群媒體的討論中，幫我整理 Manus 目前最值得關注的功能、實用技巧與應用場景。

每個場景附上對應的提示詞，讓我體驗 Manus 的強大。

• 背景描述：一開始我先說明自己的背景資訊，是工程師、企業內訓講師，也是 YouTuber。
• 研究方向：這邊就請他從公開資訊，整理 Manus 有哪些功能可以幫助我更快完成工作。
• 行動指引：最後為了方便驗證功能，我要求他要附上提示詞，這樣可以方便我們後續的行動。

送出之後 Manus 很快的就給了我們行動指引，下面這份報告是根據我的提供的背景來介紹 Manus 的，並根據不同身份，給予對應的應用場景，並在下方提供可以直接實戰的提示詞

執行完畢後，我們點擊右上角文件的符號，可以看到在 Chat 模式下使用積分為 0。

也給大家看一下 Agent 模式有什麼不同，這裡我就點擊「啟動 agent」。

你會看到 Manus 啟動一台虛擬機，然後自己打開瀏覽器、搜尋資料、看網頁、整理內容，感覺就像一個真的助理在幫我們做事一樣。

稍等一段時間，他就幫我們生成了一份報告，跟 Chat 模式相比，因為多了搜尋資料整合案例的步驟，研究成果會更有深度且符合實際需求。

所以在每個應用的技術上也會說得更加完整，我們了解工具中哪些功能對自己有幫助後，再做針對性的測試，可以幫我們節省不少盲目使用時間。

② 從釐清需求到生成簡報

我其中一個身份是企業講師，常常要到不同產業授課，為了讓學員有共鳴，我需要根據公司情境把案例客製化。

但坦白說，許多產業對我來說也是完全陌生的領域，所以備課時，都是請 AI 幫我研究主題、設計案例。

其實別說是我，大家日常工作也是一樣的。

可能主管突然丟一個主題，要你做市場調查、整理資料；然後要求你今天下午或明天，就要上台跟同事做簡報分享。

哇～光是想像這個場景，我整個壓力就上來了！

如果你跟我有一樣的痛點，那千萬不要錯過接下來用 AI 生成簡報的案例。

不要一開始就叫 AI 做簡報

這邊我們一樣先使用 Chat 模式。

STEP 1: 優化提示詞

提醒一下大家，如果你打算請 AI 做簡報，那第千萬不要一開始就讓 AI 做簡報；而是先初步提出自己的需求，並讓 AI 優化提示詞。

這個步驟會讓 AI 補充許多你一開始沒有考慮到的細節

我是一間台灣汽車零件零售業的廠商。

我們銷售的汽車零件包含：「煞車系統零件、濾芯、底盤零件、引擎周邊零件、常見保養耗材。」

目前在評估是否進軍東南亞，希望切入 Tier 2 或售後維修市場

我需要製作一份簡報給主管，說明建議的切入策略

請你幫我把上面這段需求，優化成更完整、更適合交給 AI 研究的 Prompt，用 Markdown 顯示

• 背景描述：一開始我先說明自己的背景是「汽車零件零售業的廠商」，並提供主要的販售項目。
• 初步目標：進軍東南亞，切入 Tier 2 或售後維修市場。
• 受眾：主管。

一開始的需求描述模糊沒有關係，因為最重要的是最後一行：

請你幫我把上面這段需求，優化成更完整、更適合交給 AI 研究的 Prompt，用 Markdown 顯示

多了這行，AI 就會把原本初始的 Prompt 做更完善的優化。

同時也跟大家補充一下，這邊我之所以要求使用 Markdown 格式，是因為它輸出的是結構化，有明顯階層的。

像這邊你就看到，原本只有四行的提示詞，在 AI 的幫助下補充了這麼多細節，大標、次標、描述的層次都很清楚。

STEP 2: 請 AI 反問我還缺什麼

乍看之下，上面的 Prompt 感覺已經很完善了對吧？但這個時候我會建議大家換個角度。

讓 AI 反問自己，如果補充哪些背景資訊可以得到更完善的結果。

從市場研究顧問的角度來看這段 Prompt，如果要完成這個研究，我還需要補充哪些資訊，才能讓你產出更精準、更符合商業決策需求的結果？
每個問題請簡短說明：

1. 為什麼需要這個資訊
2. 如果缺少這個資訊，可能會影響哪一部分的分析

這步非常重要，因為很多時候我們根本不知道要提供哪些資訊，與其自己硬想，不如讓 AI 幫我們檢查，這也是我覺得跟 AI 協作很重要的一個概念：

不是只有你問 AI 問題，你也可以讓 AI 反問自己

在收到問題後，大家可以自行補上必要資訊；這邊我為了示範，所以讓 AI 自問自答一下

用公司老闆的身份，模擬回答上面問題。

STEP 3: 先設計簡報大綱

在背景資訊完整後，接下來也不要直接製作簡報，先幫我設計一份約 15 頁的簡報大綱

幫我設計一份約 15 頁的簡報大綱。內容涵蓋：

1. 簡報主軸
2. 每一頁的標題
3. 每一頁要說明的重點
4. 建議搭配的圖表或資料類型

用 Markdown 顯示

之所以要先做大綱，是因為如果直接請它生成完整的簡報；除了會花比較多時間外，每次生成簡報也會消耗不少積分，如果方向錯了，後面要改的地方也會很多。

因此我建議先讓 AI 產出大綱，確認方向符合預期後，再生成完整的簡報，這樣可以減少很多來回修正的時間。

STEP 4: 生成圖文並茂簡報

在大綱生成出來，確認符合需求後就可以生成投影片了，最簡單的方式是點擊建立，選擇「投影片」。

這這種方案我們對生成結果的掌控力是很低的。

所以我建議大家先把簡報大綱複製起來，儘管這次 AI 是用表格生成，但點擊右下角也是可以把內容複製起來的。

開一個新對話窗，點擊「製作簡報」，這邊你換看到三種選項，分別是專業、GPT 與 Nano Banana。

• 專業：如果你想要製作的以 HTML 為主，重點呈現文字跟圖表，方便大家直接編輯細節，風格偏向傳統簡報。
• 圖片視覺：而如果你希望每張投影片的視覺效果拉滿，就選擇 GPT 或 Nano Banana。

如果選擇專業的話，也有許多模板可以選擇：

稍等一段時間，簡報就製作完成了，你會發現透過以上步驟製作出來的簡報，內容詳盡、結構完整、而且有適當的搭配圖表。結果會更符合你一開始設定的目標。

但提醒一下大家，AI 生成出來的結果有可能會錯誤，若涉及數據、真實資訊，請自行核實

用專業模式生成的簡報，裡面的文字也是可以編輯的。

如果你想要調整成其他風格的簡報，可以點擊右下角的「更改主題」，從裡面選擇自己喜歡的版型。

如果不知道上台怎麼講，點擊右下角的「讓 Manus 生成」，他就會根據每一頁簡報的內容，設計出有起承轉合的逐字稿，讓你上台分享時更有底氣。

當然，你也可以把它下載成 PPT 來精修細節、或用 PDF 格式與別人分享，甚至想在 Google Slide 編輯也可以喔！使用上非常有彈性

③ 把繁瑣的任務，整理成可以重複使用的 Skill

這邊分享一個實用的技巧，剛剛我們不是透過好幾輪對話才得到這個結果嗎？

如果每次研究新主題都要這樣搞，感覺太煩了吧；幸好 Manus 有提供建立 Skill 的方案。

可以透過「/skill-creator 描述」幫剛剛繁瑣的流程，建立為可以重複使用的技能喔！

/skill-creator 幫我把剛剛提供主題生成簡報的流程設計為 Skill，日後提供主題就會觸發

最後會記錄成一個文件，打開後點擊「新增到我的技能」，AI 日後遇到類似的任務時，就會按照指引來去執行。

如果想找尋儲存好的技能，可以點擊左下角的個性化，在功能列就會看到技能。

剛剛建立好的技能會存放在這個位置，技能除了可以自己建立外，也可以匯入別人建立好的技能喔！

驗證 Skill 是否符合預期

在 Skill 建立後，建議大家可以提供另外一個主題，來驗證這個 Skill 是否會順利觸發，以及觸發後，是否有順利運作。

這邊我就給他一個新主題，讓他研究亞洲餐飲行業近十年的的趨勢：

請研究亞洲餐飲行業近十年的的趨勢，品牌爆紅的關鍵，以及是否維持的關鍵因素，請幫我製作一份 12 頁的高端專業研究簡報。

指令送出後，可以看到 AI 有使用剛剛建立的 Skill。

稍等一段時間，我們就能看到 Manus 根據我們剛剛的需求建立簡報。

只是這次他認為我提供的主題更偏向說故事，所以採用 Nano Banana（圖片視覺）的方式來建立簡報。

跟前面專業模式透過 HTML 生成簡報的方式相比，你可以明顯感受到簡報的圖片品質非常棒。

但因為個簡報其實是圖片，儘管你也可以編輯裡面的文字；但這些細節的調整就等於重新生成一張圖片，修改起來比較花時間。

所以在使用上，如果簡報的重點是傳達故事、概念，我覺得視覺化簡報的方案很棒。

但假使簡報需要時常調整數據細節，涵蓋大量圖表，我會推薦使用專業模式來生成 HTML 簡報。

④ 整理不同格式檔案，建立個人品牌網站

接下來我們換個場景，如果你是自由工作者或一間新創公司，那最重要的就是讓別人認識你、找到你。

相比於傳統名片，我認為建立個人形象網站或公司官網，會達到更好的宣傳效果。

在過去，如果你不會寫程式，可能要把網站交給外包公司；但現在，你可以請 AI 幫你完成網站的初稿。

請 AI 整理資訊

這邊我就拿自己當案例示範給大家看；這次我的目標是建立個人形象網站，所以下面要先選擇「建立網站」，然後選擇「個人連結頁」

我是個講師，準備製作個人形象網站，相關背景資訊可以參考附件的檔案

幫我從裡面提取出文字後，整理出如下資訊：

- 擅長領域: 搭配可以佐證的資訊
- 個人成就: 找出可數據化的成就，展現實力的強大
- 課程資訊: 課程主題、說明、價格、受眾、預期成果

並像個善於推銷自己的 KOL 般，先用自信的語氣撰寫出文案，並說明每段適合搭配的圖片

這步先彙整資訊，不需生成圖片與網站

這段 Prompt 我先表明自己的身份是「講師」，要求他根據我提供的素材，整理出「擅長領域、個人成就、課程資訊」的資訊，以此做為「個人形象網站」的素材

如果你的目標是建立公司官網，請 AI 幫你生成對應提示詞就可以了

這段想要呈現的，是 Manus 針對不同格式檔案的資訊分析、彙整能力

你可以看到我上傳的有 Word、PPT 跟 PDF 檔案，這也更符合實際工作場景，因為資料來源往往是不統一的。

生成網站

在彙整完資訊後，你可以先看看 AI 整理的資訊是否符合期待。

確認沒問題後，就可以上傳網頁所需的圖片，然後透過下面的指令來生成網站了

請使用我上傳的圖片，參考圖片檔名放到網頁合適的位置，讓整體更有設計感與專業度

設計純前端的個人形象網頁即可

在 Manus 生成網站的過程也提醒一下大家，因為我跟他說生成存前端網站，所以有較高機率給我一個單純的 HTML 檔案。

如果你生成的是較為複雜的專案，甚至包含到後端與資料庫，操作的細節會跟這次示範有所不同。

稍等一段時間，Manus 就根據我們提供的文件與圖片幫我們完成了一個測試網站，我們先點擊一下網址，看一下他是如何設計的。

Manus 連接器

確認整體符合需求後，這邊剛好跟大家介紹 Manus 連接器的功能。只要開啟對應工具的權限，Manus 就可以透過 API 來進行操作。

因為我已經有連結到 GitHub 帳號，所以他可以直接幫我建立對應的 Repository。

這邊提醒一下大家，雖然權限開越大 AI 能做的事越多；但前提是你了解自己在做什麼，否則可能造成無法挽回的後果。

了解完風險後，我們回到 Manus，下面我就直接跟他說：

我已經連結到 GitHub 帳號，幫我建立

等待一段時間後，發現 AI 暫停了。這邊他要我們接管瀏覽器，完成 GitHub 帳號的登入，或提供帳號密碼來讓 AI 代為操作。

但只要在瀏覽器登入帳號，基本上就等於讓 Manus 擁有帳號的完整權限，我個人是不敢這樣做。

面對有風險，但我們又不清楚如何操作的事情，也可以向 AI 詢問操作步驟：

告訴我後續的操作步驟

在 GitHub Actions 確認部署狀況

這邊補充一個細節，關於部署的狀態，我們是可以在 GitHub Actions 的分頁來觀察的。

另外把專案存放到 GitHub 後，其實也順便做到了版本控制。

因為與 Manus 對話，調整網頁時，可能會改到許多程式，未必每次都符合你的期待。

但有了 GitHub，在結果不如預期時，便可以輕鬆回到過去的版本。

接著回到 Manus 網頁，在部署完成後，點擊連結便可看到剛剛建立的個人形象網頁；你可以把網址分享給自己的朋友，展示自己的戰果喔！

範例網站：https://deanlin.net/dean-lin-website/

如果做到了這一步，也別忘記幫文章點個讚，讓我知道自己的分享是對大家有幫助的。

透過對話優化網站細節

另外如果你對網頁有其他優化的需求，也可以直接跟 Manus 說，這邊就分享一個小技巧。

如果你想要讓網站圖片渲染的速度更快，可以把圖片轉成 webp 格式。

幫我將圖片轉成 webp 格式，讓使用者可以更快載入網頁

指令送出後，AI 除了會幫我們把圖片檔進行壓縮外，因為我們有開啟 GitHub 的權限給 Manus，所以他也把變更同步到了 GitHub，我們可以點擊網址來做確認。

恭喜你，成功用 Manus 完成了個人形象網站！

解決不同裝置瀏覽問題

最後提醒一下大家，雖然 AI 可以幫我們加速，但品質還是需要自己把關。

雖然網頁版沒有問題，但我改成用手機瀏覽時，還是出現各種破版的狀況：

遇到錯誤不要害怕，跟 AI 溝通就可以了，怕的是根本沒有意識到有錯誤發生。

結語：AI 能做到哪些事，取決於你的想像力

最後我們來回顧一下今天的文章：

1. 一開始我跟大家分享我是如何在短時間掌握一款新的 AI 工具
2. 然後展示如何與 AI 腦力激盪，生成一個圖文並茂的簡報，並將這個繁瑣的流程打包成一個可以重複使用的 Skill

3. 最後分享 Manus 如何整理不同格式的檔案，然後建立個人形象網站

當然，這支影片只是帶大家入門，體驗 Manus 的基礎功能，了解 AI Agent 可以幫我們做到哪些事情。

也提醒大家，現在 Manus 除了可以在網頁使用外，有提供桌面與手機的 App 可以操作喔！

好的，今天的分享就到這邊，如果這篇文章對你有幫助，可以順手按個讚，並把文章分享給對 AI 主題感興趣的朋友們。

老實講，以現在工具發展的速度來看，就算我們拼盡全力學習，也不可能全部掌握。

而且就算掌握了工具的最新技巧，真的等於工作能力變強嗎？

如果換一套工具，過去學習的方法能辦法轉移過去嗎？

這堂課會以 Claude Code 作為主要示範工具。

但不管你平常使用的是 Cursor、Antigravity，還是 Codex，都可以跟著一起操作。

因為我設計這堂課，是以「完成專案」為目標，工具只是在實戰過程中自然掌握的能力。

工具應該讓大家學以致用，而不是靠大腦死記硬背。

我會著重分享 Rules / Commands / Agent Skills 的具體應用，因為這些技巧，在主流的 AI Agent 都有相似的概念。

也就是說，切換到新工具時你不用重新學一遍。

甚至可以透過 npx @dean9703111/dotagents建立不同工具之間的軟連結（symlinks），讓規則集中管理。

這樣只要修改一次，就能同步套用到不同工具中，讓維護更輕鬆。

面對生成式 AI 結果的不確定性，我們也不能只靠感覺驗收。

所以我會搭配 Lint 與 Unit Test，來確保專案基礎品質。

Lint 可以規範程式碼的 Coding Style，初步過濾冗贅、格式不一致，或不符合團隊規範的程式碼。

Unit Test 則能幫助我們在功能新增或修改時，確認是否影響既有邏輯，並在錯誤發生時更快定位問題。

當我們把 Lint 與 Unit Test 放進 Pre-Commit 與 CI/CD 流程，很多問題就能在進入主分支前被擋下來。

考量到大多數人不喜歡寫文件，或者不知道規格該如何撰寫，

所以我會帶大家了解如何用 OpenSpec 生成規格文件，讓 AI 執行的每一步都有明確方向。

它不僅幫你從 0 到 1 建立系統，更重要的是，這些文件讓後續每一次功能迭代都有依據。

在多人協作、長期維護、持續迭代的專案，文件不只是寫給人看的，也是 AI 理解專案的基礎。

每個人（團隊）在開發時都有一套工作流。

但當專案有時程壓力時，我們容易「先求有，再求好」，然後留下一堆技術債。

此時我們不妨反過來思考：

能不能把這些重複發生、又容易被省略的工作，設計成可以讓 AI 穩定執行的 Skills？

例如：

• Commit 訊息撰寫
• Pull Request 描述
• Unit Test 設計
• 分支命名規則
• 程式碼檢查流程

這樣就能讓我們把注意力放在驗收「結果」，而非消耗精神的「過程」。

在人人都能用一行指令生成系統的年代，「軟體工程」反而變得更加重要。

因為有好的地基，AI 才知道該照著什麼規格開發、用什麼標準驗收、依循什麼流程交付。

如果需求是模糊的，規格是破碎的，測試是缺席的，那 AI 生成得再快，也只會成為後續維護的負擔。

所以這堂課想帶給大家的，是如何把 AI 放進真實開發流程裡，建立一套穩定、可維護、能持續迭代的實務工作流，而不是停留在一次性的工具展示。

• 📌 專屬折扣碼: DEANONLY
• 👉 課程詳情: https://tibame.tw/Zmnts

我在 YouTube 已經拍了十幾支用 AI 寫程式的教學影片。

通常會用「一個技術，搭配一個專案」的方式來分享，因為這樣比較容易讓大家快速認識某個工具，也能實際做出一個具體成果。

但這樣的方式雖然適合幫大家理解單一主題，卻不一定足夠應付真實工作情境。

因為回到工作現場後，你遇到的不會只是某個技術點。

你會同時碰到前端、後端、資料庫、權限、測試、版本控制，還有整個協作流程。

遇到問題時，很多人以為是 Prompt 下的不夠好、工具沒選對，

但我在幫企業培訓的時候，發現真正卡住的原因是：「不知道如何把學會的技巧整合運用。」

這也是我決定開這堂課的原因。

因為我覺得如果沒有搭配一個完整的專案，就算學到了某個工具，也不一定知道如何把它應用在實務上。

所以在課程中，我會帶大家從需求、規格、生成、驗證、測試，到最後的 CI/CD，完整走完。

你會看到的，不只是某個技巧怎麼用，而是當這些東西導入工作流後，專案是怎麼運作的。

而這些調整，也不是我憑空想像出來的。

其實拍完影片後，我都會收到不少觀眾的留言；再加上這段時間做企業內訓，也接觸到很多不同背景的學員。

有人本來就有資工背景，但不知道怎麼將 AI 導入工作流；也有人對很多技術名詞感到陌生，但又真的想學。

這些回饋對我幫助很大。

它讓我了解大家缺的，不一定是再多一個工具，而是需要有人把使用 AI 開發這件事，用更完整、更白話的方式講清楚。

所以這次課程中，我也把很多在影片裡來不及講深、講完整的內容，整理進課程裡。

像是安裝流程、名詞解釋、為什麼用這個技術、為什麼這個階段要這樣做。

因為我不希望這堂課只有本來就有基礎的人才跟得上。

我更希望，就算你是初學者，也能在實戰的過程中認識整個脈絡。

現在網路上最不缺的，就是 AI 很強、AI 很快、AI 很會 XXX 的內容。

但真正實戰過的人都知道，難的從來不是把東西生出來，而是當需求改變、功能增加後，這個專案還能不能持續擴充、穩定維護。

所以這堂課，我想講的不只是「怎麼把功能做出來」。

而是怎麼把 AI 放進一套可維護、可驗證、可持續擴充的工作流。

這也是為什麼我會分享 OpenSpec、Agent Skills、單元測試、CI/CD、Git Worktree 這些內容。

不是因為它們聽起來比較厲害，而是因為它們剛好都在處理實務中最容易被忽略、人類最不想做，但往往最容易出問題的地方。

這堂課，就是我這一路拍片、實戰、收集回饋後，整理出來的一個答案。

如果你想學的，不只是「AI 能不能幫我做點什麼」，而是「我怎麼把它放進自己的工作流裡」，我相信它會對你有幫助。

• 📌 專屬折扣碼: DEANONLY
• 👉 課程詳情：https://tibame.tw/Zmnts

前陣子我跟 Cake 合作，在台大分享怎麼把 AI 導入工程師日常的開發工作流。準備過程中，我腦中突然蹦出了一個想法。

既然課程在講 AI 寫程式，那與其使用傳統的 PPT 做講義；不如嘗試用 Vibe Coding，打造一個屬於自己講義網站，這樣使用者介面可以完全根據自己的需求量身打造。

然後花了一個晚上的時間，完成了模板的雛形設計。

他不僅可以在電腦、平板、手機瀏覽，甚至還可以匯出 PDF。

為了讓設計可以被重複使用，我把他封裝成了一個 Agent Skill。

這樣未來我收到新需求時，只要提供講義初稿，AI 就會在分析內容後，直接生成一個講義網頁。

如果對產生結果不滿意，也可以調整 Markdown 文件修改細節。

今天這篇文章，我除了會分享如何用系統設計思維打造 Agent Skill 外，更會提醒過程中會遇到的陷阱與痛點。

相信大家看完後，就不會只把 Vibe Coding 的成果當成免洗餐具，用完就丟；而是開始去思考，如何把它設計成可以長期使用、維護、擴增的工具。

今天使用的 AI Agent 是 ChatGPT 的 Codex，目前免費版就可以使用。

我會展示兩種操作方式，一種是在終端機輸入指令，另一種則是在程式碼編輯器安裝外掛，透過對話窗操作。

透過實際 Demo 讓大家更直觀的比對兩種使用方式的差異。

完整的 Demo，可以觀看 YT 喔 👉

對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。

【ChatGPT Codex 實戰】將 Vibe Coding 成果從「用完就丟」，變成「可持續優化」的 Agent Skills

培養多個 AI 工具使用的能力

如果你是頻道的老觀眾，也許看到這邊會有個疑惑：「為什麼我怎麼一直分享新的 AI 工具？」

其實會這麼做，是想培養自己「多個 AI 工具交替使用的能力」。

因為只要某個 AI 被捧上天，通常在不久後就會開始限縮額度，歷史總是驚人的相似。

所以我教學的目標從來不是強調「哪一款工具」最強，而是透過實際案例，讓大家了解如何解決痛點。

因為工具間的差異，並沒有你想像的那麼大；唯一要提醒的，就是不要為了折扣付年費，因為每個時期最好用的 AI 一直在改變。

① 安裝 Codex，在終端機生成網頁

今天這個教學，你可以使用自己熟悉的程式碼編輯器，不管是 VSCode、Cursor、Antigravity 都可以。

如果不知道使用哪一款，可以跟我一樣，使用 Google 推出的 AI 程式碼編輯器 Antigravity，登入 Google 帳號就能免費使用。

但這次，我們沒有要使用到編輯器內建的 AI 功能，使用他，只是為了方便檢視程式碼的變更。

給 AI Agent 工作區

在開始前，我們要先準備一個空的資料夾（lecture-example），這是為了讓 AI Agent 有明確的工作區，你可以點擊 Open Folder，或是直接把資料夾拖曳進來都可以。

安裝 Node.js

因為今天分享的 Codex 與實作的專案會使用到 Node.js，所以，我們要點擊上方的 Toggle Panel 打開終端機。

接著輸入「node -v」，來確認電腦是否有完成安裝，如果沒有顯示版號，而是出現沒有指令的錯誤訊息，就需要先去安裝 Node.js 才能執行後續步驟。

在安裝 Node.js 這塊，我建議大家透過 NVM 來安裝，因為 Node.js 有多個版本，而 NVM 這款工具可以幫你快速在不同版本間切換、更新。

如果你跟我一樣使用 Mac，執行下面的指令就可以安裝了：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash

但如果你是 Windows，就需要下載 exe 檔來安裝： https://github.com/coreybutler/nvm-windows/releases

nvm 安裝完成後，點擊上方的「+」開啟新的終端機，然後輸入 nvm -v，確認有成功安裝，接下來輸入 nvm install –lts 來安裝最新版本的 Node.js。

安裝完畢後，輸入 node -v 便可檢視現在使用的版本。

安裝 Codex

在 Node.js 安裝完成後，我們要來安裝 Codex，只要在終端機輸入下面的指令，便可以完成全局安裝：

npm i -g @openai/codex

在安裝完成後，於終端機輸入 codex ，這邊有提供三種登入方式：

1. Sign in with ChatGPT：第一種是透過 ChatGPT 帳號來登入，選擇後會獲得認證網址，接著登入自己的帳號即可，這是我最推薦的方案。
2. Sign in with Device Code：但如果你想要在沒有瀏覽器、無使用者介面的虛擬機（VM）上登入，就要使用第二種方案；你可以在其他裝置貼上網址登入 ChatGPT，接著輸入終端機的驗證碼即可登入；但有一點要特別提醒，你需要先到 ChatGPT 的設定，於安全性的分頁將「啟用 Codex 裝置代碼授權」打勾，才能使用這個方案喔。
3. Provide your own API key：最後一種方案則是輸入 OpenAI API Key，他會根據你實際的用量來計價；有興趣的觀眾可以到OpenAI 的官方網站，在「API keys」的頁面下就可以創建了；但這個方案如果沒有設計好用量限制，你可能在看到信用卡帳單時會爆哭。

在成功登入後，他一開始會先詢問你是否信任這這個資料夾，選擇 Yes 才能繼續。

接下來出現的輸入框，就可以把它當成過去與 AI 的對話視窗，兩者並沒有什麼差異。

在終端機生成網頁

這邊我先貼上一段 Prompt，請他幫我生成一個教學講義的網頁：

請扮演熟悉 AI 主題授課的講師，以「Agent Skills」為主題設計講義
講義用純 html 網頁（CSS/JS 都放裡面）呈現
日系風格的設計感，部分文字與背景可以搭配適當的漸層
開頭會根據內容呈現標題，然後下面有發人深省的標語
會根據不同層級與意圖呈現對應的區塊（ex: 大小標題、陳述、列點、流程）
最後放上社群連結鼓勵大家訂閱（FB/YouTube/Medium）
側邊欄會有對應的目錄，方便跳轉到對應位置

下面分享提示詞的幾個重點：

1. 角色：請扮演熟悉 AI 主題授課的講師，以「Agent Skills」為主題設計講義 首先我讓他熟悉 AI 主題授課的講師，以「Agent Skills」為主題設計講義
2. 目標：講義用純 html 網頁（CSS/JS 都放裡面）呈現 然後說明產出的目標，這邊讓 AI 只生成單純的 html 網頁，這是為了讓日後部署更輕鬆
3. 風格：日系風格的設計感，部分文字與背景可以搭配適當的漸層 接著我說明自己想要的風格，如果沒想法也可以讓 AI 扮演設計師幫你想
4. 架構：開頭會根據內容呈現標題，然後下面有發人深省的標語 最後則是分階段提出我希望的網頁架構，包含開頭頁面如何呈現、網頁層級如何設計、社群連結要放在最後、側邊欄要有目錄這些

在網站就生成出來後，打開存放網頁的資料夾，點擊兩下 html 檔案便可瀏覽成果：

老實講，這個版本的完成度已經不錯了；也就是說，如果只是想要一份「看起來可以用」的講義網站，其實做到這步就夠了。

痛點：細節調整困難

但如果你是追求細節的人，很快就會遇到問題。

因為 AI 生成的文字描述可能不符合你的期待，段落結構也未必是你要的。

此時我們有兩個選擇：

1. 第一，與 AI 對話調整細節
2. 第二，直接修改 html 網頁

但第一種方案隨機性太高，還可能會動到不該動的；而第二種方案，就算我本身是工程師，改起來都覺得痛苦。

假使在後續要花很大的力氣才能調整，那不管 AI 生成網頁的速度再快、畫面再漂亮；也很難應用到現實專案上。

所以，我們不妨換一種思路；既然生成式 AI 的輸出注定充滿隨機性，那有什麼方式，可以在結果產生後，輕鬆調整細節。

我的答案是建立「可重複使用的模板」

② 將隨機的結果，變成穩定的模板

模板的核心概念，就是不要讓 AI 每次都從零開始生成， 而是先定義好「模板」規則，讓它只要填入內容，這樣就能產出穩定、一致的成果。

這邊我就拿自己當案例，受邀到企業內訓時，我每次都需要準備課程講義。假使都用 Vibe Coding 生成，那講義的內容與網頁風格會充滿隨機性。

但如果有一套模板，那只要替換內容，就能快速產出符合我需求的講義。

不管你是做簡報、寫文件、還是建立網頁，只要是重複性的工作，這個概念都可以適用。

這邊我做了一個嘗試，在對話視窗中跟 AI 說：

我希望剛剛生成出來的網頁，是可以透過 Markdown 格式編輯內容的
請幫我將網頁結構拆解（列點、步驟、圖片、表格、註解）、分層次（大標、中標、小標），並以常見的 Markdown 語法來設計規則
最後建立一個腳本，我只要編輯 Makdown 文件，網頁的 HTML 就會及時改變
操作方式寫在 README.md 文件中，並建立 package.json

• 期待目標：我希望剛剛生成出來的網頁，是可以透過 Markdown 格式編輯內容的
• 設計架構：請幫我將網頁結構拆解（列點、步驟、圖片、表格、註解）、分層次（大標、中標、小標），並以常見的 Markdown 語法來設計規則
• 渲染方式：最後建立一個腳本，我只要編輯 Makdown 文件，網頁的 HTML 就會及時改變
• 說明文件：操作方式寫在 README.md 文件中，並建立 package.json

這段提示詞，目標是把 HTML 逆向回 Markdown 語法結構。

因為想要對內容有掌控力，就應該把它設計在一個可編輯，方便維護的格式中，而不是放在最終輸出的 HTML 裡面。

而且我不只是把它變成 Markdown 而已，我還要求他建立一套可以執行的腳本，這樣我只要編輯 Markdown 文件，HTML 的內容就會及時調整。

稍等一段時間後，AI 就初步幫我們把模板建立完成了。

回到瀏覽器，你可以看到網頁有順利渲染，相比於先前透過靜態的 HTML 打開網站，現在則是透過啟動伺服器的方式來瀏覽。

所以我們就可以來驗證調整 Markdown 文件時，畫面是否會連動。

先回到程式碼編輯器，目前 AI 逆向回來的 Markdown 文件是 lecture.md，我們就嘗試在 Agent Skills 這個標題旁邊加上 Dean Lin 的文字。

儲存文件後，便會重新渲染網頁；然後回到瀏覽器，你就會發現剛剛加上的文字有渲染成功嚕！

建立 Agent Skills 工作流

此時我們就可以把剛剛的工作流，設計成一個可重複使用的 Agent Skill 了。

如果你是第一次接觸 Agent Skills，我過去有拍一隻影片分享安裝、使用、製作的技巧：https://youtu.be/xe00zJEtuMo

接下來我們在終端機輸入下面的 Prompt，我跟 AI 說：

根據下面需求在「.agents」資料夾建立 Skill：
- 參考模板：根據剛剛腳本設計的規格，建立明確的 Markdown 使用規範
- 觸發時機：使用者提供初步想法想建立網頁時，會觸發這個 Skill
- 設計架構：要在 Skill 內建立 scripts 資料夾存放執行腳本、references 資料夾存放參考文件資料
- 執行順序：這個 Skill 會先深入研究輸入的主題，再根據規範設計對應的 Markdown 文件；最後把 Markdown 文件透過腳本生成 html
- 特別提醒：預計會有多個主題，所以觸發時，請根據主題建立新資料夾（英文），裡面存放生成的 Markdown 與 HTML 檔案

稍等一段時間，AI 就根據需求製作好了對應的 Agent Skill，在左側我們可以看到一個「.agents」的資料夾，裡面有 SKILL.md 這個檔案。

name 就是這個 Skill 的名稱，description 則是說明觸發的時機點與預計的執行成果。

references 資料夾放著 Markdown 格式的參考文件，而 scripts 則是存放模板編譯的程式腳本。

驗證 Agent Skill

輸入下面的提示詞：

我想要建立深度介紹「ChatGPT 使用技巧」的課程講義網頁。

這邊你會看到他有成功觸發對應的 Agent Skill 來進行設計：

稍等一段時間，我們可以在左側資料夾下方，看到 chatgpt-usage-skill 的資料夾，對應的 Markdown 文件與 html 網頁有成功生成！

這邊我就直接打開 html 檔案來瀏覽，你可以看到網頁的版型樣式與先前建立的風格一致。

如果你有跟著教學走到這一步，恭喜你建立了屬於自己的模板，但…這只是開始而已。

③ 自由度高的背後，是功能的不完善

儘管剛剛設計的 Agent Skill 搭配模板腳本可以輕鬆生成講義網頁。

但其實功能非常不完善，這邊跟大家舉例：

1. 首先像側邊欄雖然方便導覽，但他會佔掉講義的展示空間，我希望講課時可以自由收合
2. 還有目前的網頁為「淺色」設計，但有時我授課場地是關燈的，如果螢幕是唯一光源，台下觀眾眼睛看久會不舒服
3. 另外有些單位會希望講者提供 PDF 講義，如果使用網頁預設的 PDF 列印，那畫面會非常的醜

這邊我只是舉出幾個常見痛點，雖然建立模板聽起來很厲害，但自由的背後，代表你是目前唯一的維護者。

因為模板的細節是在實際使用後，你才知道哪裡要調整；儘管設計與程式撰寫可以交給 AI，但方向與美感還是要自己掌握。

這就是自己設計模板的代價。你想要主控權，就得承擔客製化背後的複雜度。

老實講，如果只是要有一個線上簡報工具，市面上已經有很多現有工具，比如 Gamma 或 Marp，不一定要走自建模板這條路。

而我選擇做這件事，與其說是建立一個更好的方案，不如說是在設計一套最符合自己需求的工具。

④ 安裝 Codex 外掛 & 體驗模板強大

這邊我就直接跟大家分享，剛剛 Agent Skill 我經過多次迭代後的版本，目前我已經使用這套模板講了 5 場 Vibe Coding 課程了。

歡迎路過按個 Star，讓我知道自己的分享對大家有幫助: https://github.com/deancourse/agent-skill-lecture-builder

我把它設計成一個 Agent Skill，大家可以直接 Fork 我的 Repository 來體驗，Fork 完成後，點擊 Code，從裡面複製專案網址。

然後回到程式碼編輯器，點擊 Clone Repository，貼上剛剛複製的網址來下載專案，指定下載路徑，完成後點擊 Open 便可跟著影片一起操作。

這邊要先安裝所需的套件，打開終端機，輸入 npm install 即可。

這個指令會安裝 package.json 裡面 devDependencies 的套件，而 puppeteer 這款套件，我是用來截取網頁 Open Graph 預覽圖片用的。

安裝 Codex 外掛

也趁這個機會，跟大家分享如何在程式碼編輯器，安裝 Codex 使用這介面的外掛，只要點擊左側的 Exetentions，輸入「chatgpt」。

安裝完成後，點擊上方的 ChatGPT 圖示：

這款外掛有提供登入 ChatGPT 帳號與使用 API Key 兩種使用模式，這邊我選擇登入 ChatGPT 帳號：

登入後，就可以在與 AI 的對話視窗中體驗了，相比於終端機透過輸入指令溝通，透過外掛安裝的使用者介面更適合初學者。

認識 Codex 介面

你可以更輕鬆地切換 GPT 模型、調整思考深度；如果把滑鼠符號打開，AI 就可以辨識你目前選中的區域和打開的檔案。

如果你還想要做更多細微的設定，可以輸入「/」來了解：

比如你打算讓 AI 複雜任務，可以把 Plan mode 打開，來獲得更加詳盡的規劃；假使想了解目前剩餘的額度，則可以透過 Status 來確認。

另外往下滑，會看到安裝好的指令（Commands）與技能（Skills），這邊會看見剛剛我們剛剛設計的 Course Page Generator 這個 Skill。

這邊補充一下，「/」也是可以在終端機當中使用，比如我們這邊打 status 一樣可以看到使用量，但需要你對關鍵字有一定的熟悉度。

提供主題生成講義

假使你今天想要根據指定主題來生成講義網頁，只要在與 AI 的對話視窗輸入自己想研究的主題就好，像我這邊就說：

扮演一位擅長用實際案例解說的資安專家，設計"生成式 AI 資訊安全"的講義並生成網頁
完成後直接啟動

接著稍等一段時間，網頁就建立完成了：

這邊可以看到側邊欄是可以自由收合的，而且在收合後下方會有進度條，讓我講課時可以掌握授課進度：

由於我的授課內容有很多地方需要複製指令，但講課時我可能只有一隻手能操作電腦，所以指令右側有一個複製的 icon，這樣我單手就能輕鬆複製，而不需要透過滑鼠選半天。

並且能夠根據場地自由切換淺色、深色模式；設定中也有多款主題可以使用。

當講課到一半，覺得需要中場休息時，點擊「休息一下」就能夠設定休息時間，而且還有倒數計時來提醒大家。

而前面提到的匯出 PDF，我也直接設計了對應的版面，而不是把網頁的結構直接搬過去，而是做了針對性的設計，這樣才會有更好的閱讀體驗。

甚至如果你想要用簡報模式呈現，右下角的「簡報模式」也可以使用喔，可以針對不同情境自由切換！

提供草稿生成講義

這次我要跟大家示範另一種生成網頁的方式，如果你已經準備好課程講義的草稿，這個 Agent Skill 也可以直接轉換。

我在專案的 exmaple 資料夾底下就有準備一個 Markdown 文件讓大家體驗：

其實這個文件就是這隻影片的 Markdown 逐字稿，我開啟一個新的對話窗，直接跟 AI 說

轉換成網頁，並啟動專案

稍等一段時間，AI 就幫我們完成設計並啟動專案嚕～

相比於提供主題來生成講義，提供詳盡的背景資訊來生成講義，你會對最終生成的結果有更高的掌握度。

讓 AI 學習模板語法

講到這邊，可能會有人好奇網頁背後的 Markdown 文件長什麼樣子，這邊我就回到程式碼編輯器展示給大家看，你會發現大部分都還是依照既有的 Markdown 語法來設計。

但由於這個模板是我建立的，所以我也能設計特殊的語法，像是指令的區塊，以及流程圖的區塊：

不過這些語法我不需要去背誦，因為我已經把它寫成了一個 Agent Skill。

你只需要提出自己想放進去講義的資訊，AI 就會辨識內容，並找到最合適的版型整合到講義中。

你需要做的，就是當文字不符預期時，手動做一些微調。

雖然模板前期的建立有很多細節要處理，但建立好後，你就能根據自己的意志來優化細節，不再被平台綁架。

而且因為它不是一次性工具，所以你會願意花更多時間打磨細節。

輕鬆部署

確認符合預期後，我們就可以打開 Source Control，接著點擊 Generate 自動生成 commit，並 Sync Changes 將內容更新到 GitHub 上面。

接著來到 GitHub 頁面，如果你想要讓網頁被大家瀏覽，只要去 Settings 頁面，因為我們已經把 html 檔案生成完畢，所以選擇預設的 Deploy from a branch 即可，你只要把 Branch 切換到 main 就可以了。

此時到 Actions 的頁面就會看到開始網站正在部署，順利的話，就會看到部署完成後的網址。

但點開來後，你會發現頁面不存在，這是因為網頁檔是存在 example 資料夾底下，所以只要在網址後面加上 example 就可以順利顯示嚕～

而更前面設計的資安網頁，也是複製資料夾路徑，替換上去就可以看到嚕～

了解基礎的操作方式後，你就可以在不同的資料夾下建立對應的課程網頁。

專業對 Vibe Coding 的幫助

這邊也提醒一下大家，雖然這個專案都是 Vibe Coding 出來的，但如果完全沒有技術背景，可能會設計出不合理的架構，或忽略細節。

比如 Open Graph，也就是 OG；如果你最終完成的成品打算公開分享，但沒有設定標題（title）、描述（description）、縮圖（image），那網址預覽畫面會很醜。

如果想知道網頁有沒有設定，可以到這個網站：https://www.opengraph.xyz/

這邊貼上剛剛部署的網址，就能看到 OG 是否有完成相關設定嚕～

設計共用資料夾

接著再回到程式碼編輯器，跟大家分享我的設計細節，如果有些資訊如果希望反覆利用，其實我們可以把它抽出來。

這裡我有設計一個 config 資料夾，裡面存放的設定可以在所有頁面被共用。

像這邊我就把講者介紹、頁面尾端的社群宣傳設計成一個 global.yaml 檔案，而講者圖片我則是放在 assets 資料夾中。

如果有文章想客製化調整的設定細節，則可以編輯 config.yaml 檔案來蓋過去。

模板易用性

我認為好的模板要盡可能減輕使用者操作的負擔；所以在設計上將時常變更的資訊放在 Markdown 文件方便修改，共用的資訊則設計成 config 來進行維護。

而 Markdown 文件、網頁，以及 OG 圖片的初始化，我則是設計對應的 Agent Skill 來處理。

這樣就能讓 AI 幫我快速完成第一版，而我也能在後續輕鬆調整細節。

我已經用 AI 寫了 3 年多的程式，最大的感觸是：

當我們開始思考專案架構的時候，Vibe Coding 的成果才會慢慢脫離 Demo，進入長期可用的狀態。

結語：從「用完就丟」到「越用越好」

回顧這隻影片，我們做了三件事：

1. 用 Codex 從零生成網頁
2. 把 AI 的隨機輸出，轉成可用 Markdown 維護的模板
3. 把模板打包成 Agent Skill，讓它可以重複使用。

在走完這整個流程之後，我感觸最深的，是發現 AI 真的可以把自己腦中的工作流，一點一點變成一套系統。

這個任務放在過去，是需要一個團隊，花好幾週的時間才有可能做到的。

但這次我只是在備課的過程中突然靈光乍現，然後就透過 Vibe Coding 完成了模板的雛形。

當然現在的它還不夠完美，但我覺得最有價值的，反而不是它現在功能有多完整。

而是從這一刻開始，我不再只是使用別人的工具。我也開始有能力，慢慢把工具設計成更符合自己需求的樣子。

而就是讓 Vibe Coding 的成果，從玩具走向產品的過程。

我認為 AI 真正厲害的地方，從來都不是幫你省下一次工作的時間；而是它開始讓你有機會，把自己原有的工作流，設計成一套可以持續優化的模板。

好的，今天的分享就到這邊，如果這篇文章對你有幫助，可以順手按個讚，並把文章分享給對 AI 主題感興趣的朋友們。

可以這麼說：「我坐在椅子的時間，比躺在床上的時間還要長。」

但最近從椅子上起來的時候，總覺得背有點卡、腰也怪怪的。

與身旁的工程師朋友討論後，他們建議我換好一點的人體工學椅，然後推薦了幾個品牌給我參考。

因為椅子是要長期使用的，所以我決定去試坐體驗一下。

如果你也正好在尋找適合自己的椅子，我建議選定目標後要坐15 分鐘以上，這樣感受會比較準確，下面分享我體驗不同品牌的心得給大家參考。

1. SIDIZ T90

朋友有跟我提到這個牌子，發現這台 T90 是新出的，看起來蠻有質感。感覺符合自己的需求，所以就想說去體驗看看，有灰色跟黑色兩個顏色。

第一眼外觀很漂亮，設計感不錯。坐下去後覺得腰背支撐是紮實的，椅背還可以有一定程度的左右移動。

扶手標榜 4D，能前後左右調整角度，聽起來很強，但實際操作起來覺得有點複雜，面積也偏小，手放上去不太穩且有點憋（照片能看出來吧），不過這點見仁見智啦，可能我身形不合吧。

值得一提的是他有 15 年保固，第一次看到保固期限這麼長的椅子。

體驗完畢後，覺得這款椅子各方面都還ＯＫ，但坐起來不是太合適，就先不考慮了。

2. OSIM 天王工學椅

說實話，如果不是朋友推薦，我原本沒有要來體驗；因為「有按摩功能的人體工學椅」，感覺有點像是噱頭，一開始覺得按摩椅不就是按摩椅，跟人體工學椅有什麼關聯？

但沒想到坐上去後比想像中更舒適，而且支撐性很夠，不是那種要硬要挺背，原本以為按摩球會在椅背上面卡卡的；但多一層 S 型背墊其實感受不到滾輪存在，坐在上面滑手機一邊聽店員介紹十分舒服。

手也不會卡卡的，自然擺放就很舒服，有點按摩按到快睡著。

然後有附腳托這點也很棒，把腳托往前拉，椅背往後放，它就從辦公椅變身成了躺臥的姿勢，可以小憩一下，看照片就知道我有多舒適。

店員熱情的跟我介紹了很多功能，其中一點他沒提到我還真的沒注意；那就是椅背後面有內建充電電池，完全不用拉電源線，代表椅子可以隨意移動，超方便的～

3. realf RX5

這張是另一個朋友推薦的，它的展示間在忠孝新生捷運旁邊的商辦大樓，看 Google Map 的標示可能會有點疑惑，但相信自己的直覺，走進大樓按 8 樓就好。

現場陳列了非常多款椅子，建議先跟老闆預約，臨時過去如果碰到其他客人，就只能自己試坐了。

我在裡面坐了不少款，最後重點體驗的是 RX5 這款。

以人體工學椅來說，它的設計比較不同，左扶手可以控制椅背後仰、右扶手則可以控制座椅升降，不用去找椅子底下的撥桿，這種設計細節讓我覺得這牌子有認真思考過人坐著的狀態。

我選椅子的邏輯

三張椅子都有各自的特點，所以最後選擇時，我思考的是哪款可以讓長時間待在椅子上的我，獲得最全面的舒適體驗（當然也包含腰背的放鬆）。

因此最終的選擇是 OSIM 天王工學椅，因為我本身是一個有按摩習慣的人，過去也買了許多按摩器具。

但買回家後使用率一直不高，原因很簡單，因為他們要特地去使用；任何東西只要不在你日常的動線上，使用頻率就不會高。

而 OSIM 這張直接就是你的工作椅，不需要移動，想放鬆就開啟按摩模式。

顏值也很高，放在工作區也很合適且有質感。

買回家後，午休時間我會按摩一次，讓下午有更好的精神上班；而下班後會再按摩一次，來去除一整天的疲勞。

我最喜歡他的肩頸按摩，V手按摩相當有力且能按到酸痛點。

按完後感覺緊繃的肩頸都鬆弛了不少；而腰背的踩背按摩也是一絕，就像把按摩師請回家，對長時間待在電腦前的我來說，按完後感覺整個身體都更輕盈了～

原本晚上容易失眠的我，在使用按摩椅放鬆後，都可以更快進入夢鄉。

除了坐墊旁的簡易操作面板外，OSIM 也有出 APP 讓你做更精細的操作（Android/iOS），裡面會即時顯示按摩椅電量，還可檢測壓力指數，客製化最適合你的按摩體驗。

這邊要再稱讚一次他的電池設計，不用拉電源線的按摩椅超級爽的，完全不受場地限制！

最後我將自己的體驗整理了一個表格，給大家參考（僅為個人體驗感受）：

對遠端工作者來說，能把「坐好」跟「放鬆」整合在同一張椅子，OSIM 天王工學椅是目前對我來說最好的答案。

如果你也正在找一張適合辦公+紓壓的工學椅，那 OSIM 我真的超級推薦！

前陣子與朋友聚會時，我們交流了彼此用 AI 開發專案的心得。

然後發現一個值得討論的議題：「同樣在用 AI，有些人花很少額度就完成一堆任務；但有些人額度燒光，卻連一個問題都沒有解決。」

這種落差，大到讓人懷疑，我們真的在用同一個工具嗎？

為了釐清問題，我們乾脆直接打開電腦，實際 Demo 彼此的操作方式。

看完之後，發現問題其實不在 AI，而在「使用方式」。

我把幾個最關鍵的操作整理給你 👇

1️⃣ 遇到問題就丟給 AI，但每次都跑很久、還不一定解得掉

→ 因為沒有指定範圍，所以 AI 要掃描整個專案，過程不但浪費時間、消耗額度，還很容易改錯方向，衍生更多問題

2️⃣ 請 AI 新增功能，但沒有考量到既有架構

→ 在沒有足夠上下文與規格資訊的狀況下，AI 往往選擇「從頭做一份」，這種做法除了浪費額度外，還會讓專案越來越難維護

3️⃣ 每次調整功能，都要重新提醒規則與習慣

→ 在新的對話視窗中，AI 未必會記住你過去的使用習慣、判斷邏輯，所以要花很多時間在「資訊對齊」上面，甚至要自己手動調整細節

老實說，這些問題真的很常見。

因為很多人即使用了 AI 程式碼編輯器，還是把它當成「問答工具」。

但我認為 AI 的價值，是在幫你建立一套「可重複使用的工作流」。

而現在的 AI Agent 其實已經有對應的解決方案了

✔ 指定資料夾、文件，限定 AI 讀取範圍

💡 可以用「@」的方式，給予 AI 參考資料；當目的、方向明確後，AI 的效率與穩定性會大幅上升。

✔ 建立需求規格，讓 AI 迭代功能時有文件依據

💡 無論新舊專案，都可以透過 OpenSpec 來輔助建立專案的需求規格；這不但能解決團隊專案缺乏文件的痛點，還能讓 AI 與人類在未來迭代功能時更有依據，減少重工的問題。

✔ 設計 Rules / Commands / Agent Skills

💡 不管個人還是團隊，都一定會有自己的「使用習慣、判斷邏輯」，我們可以把通用規則寫在 Rules（不要說廢話、專注解決問題），特定情境的工作流放在 Commands（觸發多個 Skills 的固定流程），而希望 AI 使用的技能記錄到 Agent Skills（前端設計能力、撰寫 Commit、PR）。

不要讓 AI 的「快」，變成未來的「債」。

我自己現在更在意的，其實不是 AI 寫多快，而是：

1. 專案的規格是否足夠清晰，可以持續迭代
2. 新增修改功能時，有沒有影響到既有功能
3. 這次做出的成果，能否整理成 Agent Skill，讓下次直接使用

這些，才是真正會拉開差距的地方。

我在 4/21（二）有一場線上說明會，將透過實際 Demo，分享如何從「用 AI 寫程式」，轉變成「用 AI 建立開發流程」，邀請你免費參加！

如果你希望 AI 不只幫忙寫幾段程式碼，而是真正融入需求拆解、規格整理、開發協作、測試驗證與任務交付，或是有問題想與我線上討論。

那千萬別錯過這場說明會！

👉 立即報名: https://tibame.tw/Rsc3G

因此我請他示範平常的用法。

他先打開 ChatGPT、把需求貼上去、等回覆、複製回 VS Code、跑起來報錯、再把錯誤訊息貼回去問。

來回操作四五次後，我跟他說：「或許不是 AI 幫不了你，是你還沒用到合適的工具。」

使用 AI Agent，讓 AI 直接幫你做事

我使用 AI 輔助開發 3 年了，前兩年也是這樣用的；只把它當成一個比較聰明的「問答機器人」，有問題就問，問完自己動手。

直到去年開始用 AI 程式碼編輯器，整個工作效率才明顯提升，兩者的差別在於：

• 網頁版 AI 是「你問、它答、你自己做」。
• AI Agent 是「你說需求、它直接改程式碼、跑測試、遇到錯誤自己修」。

內訓那天，我開場就直接 Demo 了一段 AI Agent 的開發流程。

過程中我注意到，那位工程師全神貫注地盯著螢幕。

結束後他跟我說：「我之前以為 AI 就是那樣了，完全不知道已經能做到這種程度。」

他不是個案，很多學員的反應都差不多 ──

他們不是不想用，而是「從來沒有」體驗過 AI Agent 的威力，所以一直停留在複製貼上的階段。

直接問 AI 就好，幹嘛學？

不過，光是換工具還不夠。

社群上常有人說「有問題直接問 AI 就好，幹嘛學？」

也許未來有一天，AI 真的無所不能，但至少現在，還遠遠不是。

過去 3 年來，我已經在 AI 工具上投入數千小時學習，直到現在也還在持續研究與嘗試。

因為使用 AI 真正困難的，從來不是工具本身；而是你知不知道怎麼把問題交給它、做完後該怎麼驗證、做錯了又該怎麼修正。

從「知道 AI 可以寫程式」到「真的把它用在工作上」，中間那條路，才是最多人卡住的地方。

把目標從「學習工具」改為「解決痛點」

後來我發現，與其一直追著新工具跑，不如回頭看看自己的工作流，到底是哪裡卡住。

AI 時代每天都有新工具、更強的模型。如果目標是「學會工具」，學完很快就忘了。

但如果出發點是「解決痛點」，你就會開始去想：

• 需求怎麼寫，才不會讓 AI 跑偏？
• 功能迭代後，怎麼確保專案不會壞掉？
• 重複踩到的坑，有沒有辦法系統性地避免？

過去我也針對這些主題，拍了許多 AI 寫程式的實戰教學。

但我發現對剛接觸 AI 寫程式的人來說，很難透過碎片化的資訊，把技術應用到實際專案。

用實戰完整理解，減少認知負擔

所以我開了這堂課。

把過去 3 年摸索出來的開發流程，整理成一門從零開始的全端實戰課程。

不只帶你認識工具，更帶你走完一輪真實的開發流程：從需求釐清、專案初始化、自動化測試，到版本控制和 Code Review。

會讓你看到 AI 可以在哪些環節介入，以及遇到問題時該怎麼處理。

如果你也想把 AI 從「有在用」變成「融入工作流」，這門課就是我想給你的答案。

👉 完整課綱: https://tibame.tw/Zmnts

📌 專屬折扣碼: DEANONLY

最近收到的企業邀約中，除了有軟體部門想將 AI 導入開發工作流外，也有不少來自人力資源、執行業務部門的邀約。

而面對要客製化的課程，會先安排需求訪談。

開會過程中，有位客戶說的話讓我印象深刻，他說：

「我們企業的痛點，是開發系統的人不用系統；真正用系統的人不會開發，所以我們才想學 Vibe Coding。」

其實這個痛點是業界常態，以人力資源系統來舉例好了，雖然是工程師開發，但 HR 才是主要的使用者。

這導致不管前期規劃與設計有多麼詳盡，初步完成的產品在進入易用性測試後，還是會收到一大堆需求變更。

會有這樣的結果，並不是使用者很刁鑽；而是真正的問題，往往在使用後才會被發現；但這些並不是在前期設計，就能完全考慮到的。

所以有些企業想導入 Vibe Coding，目標是讓熟悉業務的人：

有能力設計出符合自己使用需求的產品，並希望完成的產品原型，未來能交給工程師做後續的優化與維護。

這個課程需求如果放在去年，我還真的不敢接；但最近 AI 成長的速度實在太快了。

今天跟大家介紹的 Claude Code，已經可以讓沒有任何程式基礎的人，在了解與 AI 對話的技巧後，生成出一套涵蓋前後端與資料庫的系統。

並透過與 OpenSpec 的搭配，讓 AI 幫忙撰寫專案文件，達成用規格驅動開發的目標；同時解決過去小白不知道如何撰寫規格，以及工程師不想寫文件的痛點。

在 Claude Code 與 OpenSpec 的幫助下，我們不僅能完成專案從 0 到 1 的建置，更可以做到從 1 到 100 的迭代。

完整的 Demo，可以觀看 YT 喔 👉

對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。

【Claude Code 實戰】一次搞懂 OpenSpec，讓專案每次迭代都有依據

① 安裝 Claude 與 OpenSpec，初始化專案設定

安裝 Antigravity

今天這個教學，你可以使用自己熟悉的程式碼編輯器，不管是 VSCode、Cursor、Antigravity 都可以。

如果不知道使用哪一款，可以跟我一樣，使用 Google 最新推出的 AI 程式碼編輯器 Antigravity，登入 Google 帳號就能免費使用。

但這次，我們沒有要使用到編輯器內建的 AI 功能，使用他，只是為了方便檢視程式碼與規格文件的變更，並降低 Claude Code 的入門難度。

確認 Node.js 版本

因為今天分享的 OpenSpec 與實作的全端專案會使用到 Node.js。

所以，我們打開終端機輸入「node -v」，來確認電腦是否有完成安裝。

如果沒有顯示版號，而是出現沒有指令的錯誤訊息，就需要先去安裝 Node.js 才能執行後續步驟。

在安裝 Node.js 這塊，我建議大家透過 NVM 來安裝；因為 Node.js 有多個版本，而 NVM 這款工具可以幫你快速在不同版本間切換、更新。

如果你跟我一樣使用 Mac，執行下面的指令就可以安裝了：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash

但如果你是 Windows，就需要下載 exe 檔來安裝。

nvm 安裝完成後，要開啟新的終端機，然後輸入 nvm -v，確認有成功安裝。

接下來輸入 nvm install — lts 來安裝最新版本的 Node.js，安裝完畢後，輸入 node -v 便可檢視剛剛安裝的版本。

安裝 OpenSpec

在 Node.js 安裝完成後，我們要來安裝 OpenSpec，只要在終端機輸入指令，便可以完成全局安裝：

npm install -g @fission-ai/openspec@latest

透過這款工具，我們只要用白話的方式與 AI 對話，就能建立完善的規格，讓專案從零到一的過程更加完善。

而且日後擴增、修改功能時，不管人類還是 AI，都有對應的文件規格可以參考。

這可以盡量避免過去用 AI 寫程式時，相同功能重複被寫好幾次的痛點。

安裝 Claude Code

安裝好 OpenSpec 後，接下來要安裝 Claude Code。

你可選擇在終端機輸入指令安裝：

macOS, Linux, WSL:
```
curl -fsSL https://claude.ai/install.sh | bash
```

Windows PowerShell:
```
irm https://claude.ai/install.ps1 | iex
```

Windows CMD:
```
curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd
```

但終端機對新手來說，用起來會比較有壓力，所以我更推薦在介面上操作；打開左側的 Extensions，搜尋 Claude Code 就能找到這個外掛。

點擊 Install 安裝完畢後，點擊 Open Claude 的按鈕，就可以打開他。

如果你過去使用過 Cursor 或是 Antigravity，其實操作上大同小異，就是有個對話視窗可以跟 AI 溝通。

但提醒大家，目前 Claude Code 只有付費版才能夠使用，你可以在對話框輸入「/login」來登入。

這邊我們選擇第一個，在網頁點擊授權後回到程式碼編輯器。

另外如果你使用免費版帳號，在登入時會出現這個提醒升級的畫面：

目前 Claude 的月費是每月 20 美金，如果看完今天的影片，覺得 Claude Code 很強大的話，可以考慮付費訂閱。

我認為「時間」才是最寶貴的資產；而「AI」可以幫助你奪回自己的時間。

在專案初始 OpenSpec

登入完成後，你可以在電腦建立一個專案用的空白資料夾，然後選擇 Explorer 用 Open Folder 的方式打開他。

由於這個專案要搭配 OpenSpec 輔助開發，所以要點擊 toggle panel 在終端機輸入：

openspec init

執行指令後，要點擊 Enter 進行初始化，這時問你使用哪些 AI 工具，你可以用「上下鍵」移動，並透過「空白鍵」做選擇。

他是可以多選的，但因為今天以 Claude 做示範，所以就只選 Claude Code。

完成後，就會在左側目錄下看到新增的資料夾，首先要介紹的是「.claude」的資料夾，這個裡面是存放驅動 OpenSpec 功能的 Agent Skills 技能包。

如果你在與 AI 對話的過程中，需求涉及專案的新增、修改、刪除等任務時，AI 會自動調用這些技能，不需要你特別去背指令，我覺得這才更符合 Vibe Coding 的開發流程。

如果你想更深入了解 Agent Skills，我過去有拍一隻影片分享安裝、使用、製作的技巧：https://youtu.be/xe00zJEtuMo

提醒一下大家，在指令不夠明確時，AI 可能不會觸發對應的 Skill，假如想強制驅動 openspec，可以在對話窗中輸入「/opsx」來操作。

目前預設只有提供 4 個指令，其實已經足以面對大多數的需求了。

如果你想要擴充指令的話，可以在終端機輸入

openspec config profile

此時會看到幾個選項：

1. Delivery 是指這些功能「裝在哪裡」

2. Workflows 則是這些功能「有哪些」

這邊我選擇「Delivery and workflows」示範給大家看：

1. Delivery 我選擇要同時安裝在 skills 跟 commands 中

2. 而 workflows 我就用空白鍵，把可以使用的都全選

完成後按下 Enter 就好，安裝好的 skills 跟 commands 會出現在資料夾底下：

如果你想知道每個 Skill 的具體功能，直接請 AI 解釋給你聽就好，這邊就直接貼提示詞，跟他說：

我想知道 openspec 目前安裝的 skill 用途
請使用表格呈現，用白話簡短描述

② 規格驅動開發，從零打造全端系統

安裝 Docker

根據過去經驗，最容易在環境設定上卡關的是「資料庫」，因為每個人電腦環境不同，所以要先安裝 Docker 這款工具。

你可以把 Docker 想成一個「標準化的容器」，把專案需要的環境通通打包在裡面，這樣不管你用 Mac 還是 Windows，打開就能跑，不用自己一個一個裝，也方便未來與其他人一起維護專案。

到官網根據自己的作業系統下載安裝後，就可以直接使用，不需要特別註冊、登入帳號。

在完成 Docker 安裝後，接下來，我們就能體驗 OpenSpec 加 Claude Code 的威力了。

過去的開發流程

今天的教學，我想以大部分上班族都會使用到的「出缺勤系統」作為範例。

在沒有 AI 輔助的年代，如果想完成這個系統，前期需要與 HR 部門開會釐清需求，然後請設計師根據需求完成每個頁面的流程示意圖。

過程中 PM 會把討論細節撰寫成需求規格，之後才會由工程師著手開發。

過去光是要做出能讓 HR 體驗的最小可行性系統（MVP），都至少要花一個月的時間。

但現在，前面的所有步驟，已經有機會讓沒有程式背景的 HR 自行完成。

大家不要急著留言說我妖言惑眾，看完示範後，就會知道這一切並不是誇飾。

Prompt 設計

完整提示詞如下：

請設計一個出缺勤管理系統，員工可以透過此系統打卡上下班
權限分成管理者與一般使用者，管理者可以修改、新增/刪除使用者
新增使用者時，會發送 Email 給予登入密碼
員工可透過系統請假、申請加班，申請假單需要簽核流程，並且有年假、補休申請，代理人制度

前端使用 React，後端使用 Express，資料庫用 Postgres
希望透過 Docker 啟動，並且要包含 Postgres Admin 網頁
這是初步需求，我們可以透過討論釐清細節後，參考 openspec 的 skill 執行

在提示詞中，我分成了 3 塊，分別是「專案目標、使用技術、細節討論」

• 專案目標：在專案目標這塊，我先大概說明自己的需求，一開始的描述有點模糊沒有關係，因為 AI 會在後續跟你釐清細節。

請設計一個出缺勤管理系統，員工可以透過此系統打卡上下班
權限分成管理者與一般使用者，管理者可以修改、新增/刪除使用者
新增使用者時，會發送 Email 給予登入密碼
員工可透過系統請假、申請加班，申請假單需要簽核流程，並且有年假、補休申請，代理人制度

• 使用技術：接下來則是描述使用技術，這個非常重要，如果希望專案完成原型後，可以由工程師團隊接手維護；一定要先詢問他們目前最擅長的「前端、後端、資料庫」是哪些，並且為了讓彼此環境一致、啟動更方便，所以我指定使用 Docker 來啟動。

前端使用 React，後端使用 Express，資料庫用 Postgres
希望透過 Docker 啟動專案，並且要包含 Postgres Admin 網頁

• 細節討論：最後則是提醒 AI 要與我們討論規格的細節，這樣可以釐清一開始沒說清楚的地方，最後要求他要參考 openspec 的 skill

這是初步需求，我們可以透過討論釐清細節後，參考 openspec 的 skill 執行

送出提示詞後，你可以看到 AI 會根據我們的需求提出問題，讓細節更加完善：

同時提醒一下大家，用 Plan Mode 的規劃會非常詳盡，如果大家想要加速體驗，可以在提示詞最後加上「以最小可行性方案來規劃」，否則執行下去跑半小時也是有可能的。

OpenSpec 撰寫專案文件

前面釐清完需求後，你會看到 AI 觸發 OpenSpec 的 Skills 做更細部的規劃：

• proposal.md：一開始會先建立 proposal，這個文件是用來確認目標是否正確、範圍是否合理。
• design.md：然後再進入技術規劃，design 文件就是在說明技術挑選的理由，以及專案可能會遇到的風險與處理方案。
• specs 資料夾：緊接著在 specs 資料夾底下，會根據功能區分資料夾，並分別建立說明細節的規格文件。
• task.md：在最後會設計一個執行任務的 task 文件，他是用來檢驗任務是否完成的列表，目前都是空的，等任務完成後才會打勾。

規格驅動開發（SDD）

確認以上規劃都符合預期後，說「開始實作」，AI 就會根據規劃開始撰寫程式了。

在等待一段時間後，AI 說他已經完成了初版，此時剛剛 Task 的任務列表已經全部打勾：

如果你不知道如何啟動專案，可以貼上下面的提示詞請 AI 幫忙啟動

幫我啟動專案，我想在 Local 開發前後端程式
只有 Postgres 跟 Postgres Admin 用 Docker 啟動
如果根目錄 README.md 沒有操作步驟，請協助補充

我個人建議第一次啟動可以請 AI 幫忙，因為處理較大型的專案時

AI 有很高的機率在第一版遇到一些零星錯誤，我們可以先讓他自我修正一下

初步驗證功能

啟動後就可以根據 AI 只是來確認功能是否符合預期。

首先我們可以正常打卡的，並且當打卡時間沒有在上班時間內時，會有遲到的訊息：

因為我們進來的權限是管理者，所以也可以進行使用者的新增、權限的設定：

再確認網頁內容可以順利瀏覽後，接著我們可以試著打開 Postgres Admin 網頁，看一下資料庫是否是否有順利寫入。

如果不知道這些資訊如何填寫，直接問 AI 就好了。

使用者的資訊會存放在 users 資料夾，這邊就能看到預設的 Admin 管理者帳號，以及剛剛新增的一般使用者：

接受此次變更

初步確認功能符合預期後，我們回到程式碼編輯器，可以跟他說

功能符合預期，進行歸檔

稍等一段時間後，你會發現原本空空的 specs 資料夾底下，出現專案對應的規格文件，而 archives 底下出現了歸檔的文件，並註明了對應的日期。

建立專案規則

在完成專案初步建立後，我們可以在 Claude 對話窗輸入「/init」，這個指令會掃描目前的專案結構，並在根目錄建立「CLAUDE.md」。

這份文件會在每次對話開始時自動載入，幫助 Claude 在未來開發過程中，能更了解這個專案的架構、技術、開發規則等資訊。

除了 Claude 的設定外，我們也可以幫 OpenSpec 建立規則，你可以在對話窗輸入這段提示詞：

Please read openspec/config.yaml and help me fill it out
with details about my project, tech stack, and conventions

這是請 AI 幫你填寫專案使用到的技術，以及需要遵守規則，目標是讓 OpenSpec 的 Skill 觸發時，有參考的慣例。

簡單來說，CLAUDE.md 是給「做事」用的，openspec/config.yaml 是給「規劃」用的。

③ 建立版本控制，根據需求迭代功能

在完成專案初版後，我強烈建議大家先建立版本控制，因為 Vibe Coding 時，你的每個指令都可能大幅調整專案程式。

但 AI 修改的結果未必是你要的，甚至有時會把正常的功能給改壞了。

為了把改壞的內容救回來，我會建議大家安裝 Git，這個程式碼版本控制工具，並註冊 GitHub 帳號來管理專案。

如果你是第一次接觸，我有專門錄一隻影片分享詳細的操作步驟！

https://www.youtube.com/watch?v=5DEV_K0JauQ&t=836s

設計 .gitignore

版本控制並不代表你需要把專案底下所有檔案都上傳，比如像「.env」這類有隱私資訊的檔案就不適合加入。

所以我們要建立「.gitignore」，把他從 Git 版控中移除；如果不確定專案有哪些檔案、資料夾要加入「.gitignore」，可以使用下面的提示詞：

請幫我設計專案的「.gitignore」
但「.claude、openspec」要加入版本控制

建立版本控制

完成前面 Git 的相關設定後，可以點擊左側的 Source Control，點擊 Initialize Repository 可以初始化專案。

接著點擊 Generate，AI 就會辨識我們更新的內容，來產生 commit 訊息；確認文字描述符合自己的預期後，點擊 commit，就會在自己的電腦記錄這個變更。

但如果想更新到雲端，你需要點擊 Publish Branch才會正式上傳喔！

如果專案尚未存在於 GitHub，會有彈窗出現，讓你輸入專案名稱，這邊我就用跟資料夾一樣的就好了。

如果你的專案沒打算對外公開原始碼，我建議選擇 Private 隱私模式，完成後，點擊 Open GitHub 去看看是否部署順利。

如果能看到專案的內容，就代表你成功上傳專案了！

迭代功能

其實不管 Vibe Coding 還是開發系統，最難的並不是 0 到 1，而是 1 到 100 的那段路。

不過有了 OpenSpec 的幫助，這一切會變得容易許多。

這邊我們開一個新對話窗來處理新任務，比如我們可能會有忘記打卡的情形發生，就可以跟 AI 說：

幫我設計忘打卡的處理方案，讓規則彈性一點，使用 OpenSpec

這樣 AI 就會開始著手設計，並根據 OpenSpec 的 SKill 建立對應的需求規格；稍等一段時間後，AI 就完成了前期的設計。

由於我們有加入 Git 做版本控制，所以可以在 Source Control 中，清楚看到 AI 撰寫的需求變更規格書。

再確認需求與自己的期待相符後，接下來的流程都是一樣的，直接跟他說「開始實作」就好。

驗證功能

等 AI 完成調整後，因為功能涉及後端與資料庫，所以我會建議大家跟 AI 說：

請協助確認資料庫變更是否執行，並幫我重新啟動後端程式

等 AI 執行完畢後，我們再去瀏覽網頁，這樣測試會比較準。

畫面中能看到補打卡的功能完成新增：

申請補打卡：

核准補打卡：

確認結果生效：

功能歸檔

確認沒問題後，回到程式碼編輯器，直接在與 AI 的對話窗說

幫我歸檔

稍等一段時間後，你就會看到 archive 裡面多了一個資料夾，裡面放的就是這次的變更。

另外專案的 specs 也有進行對應的調整，綠色是新增，黃色是變更的意思。

這邊也提醒大家，每做完一件事，記得保持 commit 的好習慣；這樣每個版本完成的功能會比較明確，而不是一堆功能全部混一起。

模擬測試資料

補充一個情境，不是所有變更，都會觸發 OpenSpec 的 Skill。

比如目前專案初始狀態下，只有一個 Admin 的帳號，這樣想測試多位使用者的不同情境，要自己手動慢慢加，很沒效率。

此時我們就可以請 AI 幫忙設計模擬資料，我就跟他說：

我想要根據權限建立多位使用者，來模擬不同情境

因為這個需求不會涉及到功能上的改變，所以不會觸發 OpenSpec 的 Skill

等 AI 完成後，我們可以到員工管理看一下，哇！真的建立了對應的員工資料：

這樣可以方便我們測試更加複雜的流程。

設定 Email SMTP

另外如果有功能卡住，不知道如何處理時，也可以先詢問 AI 如何設定。

比如新增員工時，會需要寄信通知，但如果環境變數沒有設定好，信件是不會發送的。

此時就可以詢問 AI：

我要如何設定環境變數，讓 email 可以順利寄出？

這邊他就說 Gmail 要開啟兩步驟驗證，我們就點擊對應的網址來進行設定。

設定完成後，因為我們有更新到「.env」環境檔，所以要重啟才會生效，你可以直接請 AI 幫忙：

幫我重啟後端

重啟完畢後，我們再新增一個使用者測試是否能收到信件：

如果你也跟著教學走到了這一步，先給自己拍拍手，然後別忘記幫文章點個讚。

你已經初步完成一個有資料庫的全端系統啦！

AI 正在改變企業決策

如果在幾個月前拍這個主題，我肯定會從 AI 完成的系統挑出很多安全性的漏洞。

但這次拍完教學後有點被嚇到，雖然還是遇到了許多功能上 Bug，但我已經無法在短時間找出系統漏洞了。

以往這類的出缺勤管理系統，企業都是要找特定廠商購買，並且支付年費來維護的；但 Vibe Coding 的出現，可能會導致企業做出不同的選擇。

不過提醒大家，目前只是完成系統的初版，如果接下來打算在團隊內開發協作，還需要設計合適的工作流。

我過去有拍一隻影片，分享如何解決版本控制與團隊協作的痛點：https://youtu.be/1VuLTQidbPM

另外如果你想要讓系統更穩定，還需要加入自動化測試，畢竟市場不會為爛產品買單：https://youtu.be/Rb0_LutRIaw

別忘記，不管 AI 有多強大，出事還是要人類來背鍋。

結語：AI 時代下每個人，正在經歷角色的轉變

其實我是懷抱沈重的心情發布這期影片的，因為今天介紹的 OpenSpec 與 Claude Code 給了我完全不同的開發體驗。

如果你是工程師，一定要嘗試看看這個工具組合；假使你沒有程式背景，建議跟著影片實作一遍。

其實早在幾個月前，我就想拍攝這個主題了。

但用相同的指令，當時 AI 完成的初版，連專案啟動都有問題。我需要來回溝通十幾次，才能勉強讓專案跑起來，但結果還是漏洞百出。

可是今天這期影片想必大家也都看到了，我們已經能用簡單的提示詞生成一個有資料庫、登入功能的前後端系統。

儘管中間遇到了一些小問題，目前版本也有許多細節要優化。

但光是這個版本，放在過去可是要一個專業團隊才有辦法完成。

也許這樣說會被很多人罵，但我還是想提醒大家，尤其是工程師。

過去，程式碼是個昂貴的產品，但不是程式碼本身貴，而是要產生出有意義的程式，需要大量的經驗、專業。

但 AI 的發展正在讓程式碼快速貶值，因為 AI 不僅寫程式很快，品質還越來越優秀。

不過今天這隻影片想傳遞的不是「工程師已死」，這類網路上爛大街的口號。

而是透過實際的範例告訴大家，在 AI 時代下的每個人，大家正在經歷角色的轉變。

工程師的重點不再是寫了多少行程式，而是去評估系統架構、審查程式碼合理性。

而 PM 與執行業務單位，也不再只是眼巴巴的等工程師開發，在 AI 的輔助下，他們已經可以嘗試加入開發。

這中間當然還有很多細節要磨合，我自己也還在摸索。

但有件事我可以肯定，現在的開發分工，跟過去相比已經不一樣了；而不久的將來，變化只會更快。

好的，今天的分享就到這邊，如果這篇文章對你有幫助，可以順手按個讚，並把文章分享給對 AI 主題感興趣的朋友們。

最近與一群工程師朋友聚餐時，我們聊到公司導入 AI 加速開發後，遇到的各種問題。

其中討論最熱烈的點，就是大家 Code Review 的負擔大幅增加，畢竟 AI 寫程式的速度，實在太快了。

在過去，一天完成既定工作量就是好員工；但現在有了 AI 的幫助，有些公司會認為，一天要完成 3 倍工作量才算達到 KPI。

而這，就衍生了一系列的問題：

① 缺乏深度思考

因為 KPI 大幅上升，大家為了追上進度，就會犧牲對需求的深度思考，或者說，直接讓 AI 代替思考。

② 懶得 Code Review

完成的功能增加，就會導致功能合併到主線時的 Code Review 負擔，以往會認真思考別人的設計是否合理，但如果要看的份量太多，很多人就放棄理解直接合併。

③ 最終導致的結果

團隊集體責任感下降、專案理解力降低、程式碼品質降低、上線後錯誤增加。

切記，我們雖然可以讓 AI 自己檢查、修改、寫測試程式，但這只是確保產品的底線。

假使用 AI 開發過中大型專案，就會理解全權交給 AI 有多麼的不切實際。

AI 產生的程式碼很多，但這不是你不檢查的原因，我們應該去想怎麼利用 AI 去優化檢查流程。

別忘記，當你對 AI 產出的內容，按下同意的那一刻，所有的錯誤必須由人類來承擔。

所以今天這篇文章，我要跟大家分享如何用 Git Worktree 搭配 Agent Skills，來解決前面提到的痛點：

① 爲什麼版本控制很重要

我會先展示一個經典的錯誤案例，讓大家更直觀的理解，如果沒有基礎的版本控制概念，專案會遭遇哪些災難。

② 完成前置作業

接著帶大家了解 Git Worktree 基礎操作，並安裝 pnpm 減少磁碟空間浪費，以及分享有哪些好用的擴充套件能增加我們操作效率。

③ Agent Skills：透過 Git Worktree 拆分任務、設計 SPEC

然後就要進入實作階段，這邊會先提出一個複雜功能，以此觸發 Agent Skills 執行 Git Worktree 拆分任務，讓每個功能都有自己的工作區，這樣 AI Agent 就可以同時執行。

④ Agent Skills：拆分 Commit，讓邏輯可被追蹤

在確認功能符合預期後，我會請 AI 根據調整檔案分階段的 commit，讓邏輯在未來可以被追蹤。

⑤ 降低 Code Review 負擔

把修改推送上去後，我們要透過 Pull Request 將變更的內容合併到主分支，為了讓 Code Review 的人快速理解，我們可以請 AI 根據變更生成 PR 模板。

如果你是第一次接觸 Agent Skills，我過去有拍一隻影片分享安裝、使用、製作的技巧：https://youtu.be/xe00zJEtuMo

如果你剛接觸 Vibe Coding ，或是進入職場不久，相信這隻影片會讓你了解業界在導入 AI 開發時，遇到的實際狀況。

完整的 Demo，可以觀看 YT 喔 👉

對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。

【Git Worktree 實戰】指揮 AI Agents 同時運作，搭配 Agent Skills 建立自動化協作體系

① 缺乏版控概念，是災難的起點

現在輸入簡單的指令，AI 就可以根據需求完成功能，甚至一口氣完成 10 個功能都沒有問題。

從表面上來看，效率倍增，但實際上有非常多的隱患，這邊展示一個實際案例讓大家更能理解：

在團隊合作時，如果想把自己的修改合併回主線，會先開一個 Pull Request，讓其他人幫你檢查程式碼、討論是否需要修改，確認沒問題後再合併。

以這個 Pull Request 舉例，標題寫著「新增 i18n 多語系、淺色深色主題設計、常見 QA 問答區…」等多個功能，感覺做了很多事。

但從專案管理的角度來看，其實每個功能都應該對應到不同的 feature branch，不要在一個分支中放多個功能。

把視角切換到「Files changed」，你會對我說的話更有體會，像這個 Pull Request 涵蓋了 18 個檔案，有近千多行的程式變更；從 Code Review 的角度來看，你根本無法了解變更的功能要對應到哪些檔案。

再來，我們看一下「Commits」的分頁，你會發現改了這麼多功能，竟然只有一個 commit，而且訊息也非常的簡單。

這會導致未來發生問題時，我們無法追溯當時的設計邏輯，完全沒有參考價值。

其實這邊所展示的問題，在過去就已經存在了，但在使用 AI 加速開發後，問題被成倍放大。

因此接下來要跟大家分享，如何透過 Git Worktree 與 Agent Skills 來解決這些痛點。

② 建立 Git Worktree 環境：Git + pnpm + Extensions

為了方便大家可以跟著影片操作，我在 GitHub 有上傳一個練習用的專案，歡迎大家路過按個 Star：

這邊我建議大家點擊 fork，將專案複製到自己的帳號下：

然後點擊 Code，從裡面複製專案網址：

接著打開你熟悉的程式碼編輯器，這邊我以 Google 最近推出的 Antigravity 來示範，這是 Google 最新推出的 AI 程式碼編輯

目前登入 Google 帳號就可以使用，但如果付費升級到 Pro 會有更高的使用額度：

但如果你熟悉的是 Cursor 或 Claude 等其他 AI 工具也沒關係，因為以 Agent Skills 的設定來說，只有路徑稍微不同而已。

好的，我們再把注意力轉回 Antigravity，點擊 Clone Repository，貼上剛剛複製的網址來下載專案：

接下來要先跟大家分享，安裝哪些工具可以更舒適的使用 Git Worktree 功能：

確認 Git 版本

首先，我們要確認電腦的 Git 版本。

提醒一下大家，因為這隻影片會使用到 Node.js 與 Git 等技術，如果你是第一次接觸，我有專門錄一隻影片分享詳細的操作步驟喔！

https://youtu.be/5DEV_K0JauQ

安裝好 Git 後，點擊上方的 Toggle Panel 開啟終端機，輸入指令 git -v 確認有正確安裝。

另外提醒安裝過的朋友，如果你的版本低於 2.30，建議升級到最新版本，這樣 Git Worktree 功能會較為完整。

安裝 pnpm

因為 Git Worktree 會建立多個工作目錄，而 Node.js 專案的 node_modules 動輒上百 MB。

如果用 npm 安裝會消耗大量硬碟資源，因此我推薦大家使用 pnpm 這款套件。

在終端機輸入 npm install -g pnpm 便可完成全局安裝。

pnpm 會將所有套件存放在電腦的一個共用儲存區，各專案的 node_modules 只是透過連結指向同一份套件。

雖然每個 Worktree 需要執行 pnpm install，但不會重新下載套件，非常適合搭配 Git Worktree 進行並行開發。

安裝 Extensions

然後我們把視角轉到左側選單，點擊「Extensions」的分頁，這邊推薦大家安裝兩款外掛。

第一款是「Git Worktree Manager」，他能讓你透過介面輕鬆的建立、切換、清理 Worktree。

第二款是「GitLens」，安裝好後，你把滑鼠移到對應的程式碼位置時，可以直接看到 Commit 的歷史。

不過這邊要提醒一下大家，這些外掛大部分是由第三方開發的，安裝前請自行評估安全性。

了解 Git Worktree 工作模式

做好前置作業後，我們先在終端機輸入 pnpm install 安裝套件。

安裝完成後，輸入 pnpm run dev 便可啟動專案，下面就會有一個「localhost:3000」的網址。

確認專案可以順利啟動後，我們回到 Antigravity，點擊左側剛剛安裝好的「Git Worktree Manager」，然後點擊這個資料夾的符號來新增 Worktree。

因為我們要從現在的主分支，切換到其他分支，所以選擇第一個「Create new branch」

至於分支的名稱就打 test，主要是先讓大家了解 Git Worktree 概念；至於目錄，使用系統自動生成的就好了，最後點擊「Create」，就會直接把工作區的內容複製一份過去。

此時，你就會看到 test 出現在 Worktree List 當中：

點擊後便會開啟一個新的工作區，打開終端機後，要在輸入 pnpm install 來安裝套件；你會發現套件幾乎在瞬間安裝完畢，打開 node_modules 資料夾，你會發現有箭頭圖示「↩」。

代表只是建立資料夾的連結，而非重新下載套件，這就是 pnpm 的運作方式，可以幫我們節省硬碟空間。

然後我們嘗試輸入 pnpm run dev 啟動專案，這次的網址變成了「localhost:3001」，點擊後，網頁也可以順利呈現。

這邊的示範，是想要讓大家了解每個 Worktree 都是獨立的工作目錄，所以可以同時跑不同的 dev server 跟 port。

當然，也代表我們可以同時指揮多個 AI Agent 並行開發不同功能。

也跟大家說明一下，如何把 Worktree 刪除；在刪除前，請先把剛剛啟動的專案關閉。

然後回到 Git Worktree Manager 的介面，點擊右鍵，在 Worktree Action 當中選擇 Remove Worktree，就可以移除了。

③ Agent Skill：自動建立分支與開發規格

前面有說到，不同的功能應該使用不同的 feature branch 來開發；但具體怎麼拆分功能，以及 branch 的名稱如何命名，我們可以直接設計一個 Agent Skill 來幫我們搞定。

如果你是 Fork 我的專案，在根目錄下方會有一個「.agent」的資料夾，我有放一些 Skills 讓大家跟著影片一起體驗：

像這邊我設計了一個 git-worktree-design 技能，把 Markdown 點開來後，跟大家說明一下設計的邏輯：

1. 首先會檢查目前專案分支的狀況，確認既有 Worktree，以及是否有沒提交的變更。
2. 然後將複雜的需求拆成獨立的 feature branch 以及參考的規格後，用表格預覽，使用者確認後才會執行。
3. 接下來就會根據 Skill 指定的格式建立 Worktree。
4. 並順便安裝好每個 Worktree 的套件。
5. 然後新增這個 feature 要執行的 SPEC，方便後續 AI Agent 的開發。
6. 完成以上任務後，會再用表格像我們展示完成的結果。

了解 Skill 的設計邏輯後，我們在右側與 AI 的對話視窗中，輸入指令

採用 Worktree，新增淺色深色主題設計、常見 QA 問答區、Cookie 同意彈窗

此時，你會發現 AI 判斷需要使用 Git Worktree 這個 Skill，並初步規劃了每個 Worktree 要參考的規格：

確認沒問題後，就可以讓 AI 幫我們執行下去，稍等一段時間後，AI 說他已經幫我們完成了對應的設計。

打開左側 Git Worktree Manager 的分頁，可以看到看到新增的 Worktree：

這邊點擊其中一個 Worktree，你可以看到 AI 有根據我們的指示，用 pnpm 來安裝套件，所以 node_modules 下面資料夾有這個箭頭符號。

並且根目錄的地方有存放給「git-Worktree-spec.md」這個給 AI Agent 參考的規格，確保執行的方向。

④ 指揮多個 AI Agents 同時執行

但讓 AI 參考規格開發前，跟大家分享一個小技巧。先開啟與 AI 對話的視窗，點擊右上方的「…」選擇 Customizations，選擇 Workflows：

我有設計一個自動化流程，這樣只要輸入快捷鍵，就可以讓 AI 知道讀取規格、執行實作、驗收結果的步驟：

這邊我們先點開其中一個 Worktree，輸入「/」，選擇剛剛的那個 workflow，點擊「Enter」他就會開始執行了：

以往我們開發功能因為在同一個工作區，所以需要一個完成後才能執行下一個。

但用 Git Worktree 的好處，就是可以多個 AI Agent 同時執行。這邊我也把另外兩個 Worktree 打開，輸入「/」讓他們根據 workflow 來執行。

但如果如果要在多個視窗切換，來觀察不同 AI Agent 執行的進度有點麻煩。

所以我們可以點擊上方的「Open Agent Manager」，這樣就能知道 Agent 執行的過程是否需要我們介入。

像這邊轉圈圈就是代表執行中，而稍等一段時間後，就會變成鈴鐺提醒的符號。

稍等一段時間後，AI 就在不同的工作區，完成了各自的功能，這邊我們也可以從 SPEC 的修改中，看到他已經自我驗證了功能符合需求。

但 AI 完成後，人類一定也要自行確認結果是否符合期待，這邊我先開啟各個 worktree 的瀏覽器。

把所有服務都啟動後，也剛好趁這個機會，跟大家說明不同功能分 feature 開發的好處

首先是我們人類驗證功能會比較輕鬆，因為要確認的面向單一

• 像 Cookie 的部分，就是下方在使用者進入時，會有彈窗提示

• 而淺色深色主題這塊，則是上方多了一個按鈕，讓使用者自由切換主題

• 至於常見問答，也有根據主題新增了對應的區塊

再確認修改符合預期後，先把 Agent Manager 關閉，我們要把 Worktree 的變更推送上去。

比如我們來打開淺色深色主題的 Worktree，以往我們可能是人工手打，或是點擊「Generate」讓 AI 自動產生。

但人工手打不僅耗時，每個人的撰寫習慣也各不相同；但假使點擊 Generate 讓 AI 自動產生，他生成的訊息有時候是英文，有時是中文，而且長短很隨機。

所以 commit 這塊，我也有設計一個 Skill，讓 AI 根據我的指引生成。

我們先回到專案的目錄，點擊「.agent」資料夾，在 skills 底下有一個「git-smart-commit」的技能：

他的任務就是把雜亂的變更，拆分成有意義的 commit；畢竟請 AI 輔助開發時，很可能一口氣改了很多個檔案，如果全部放在一個 commit，那這個 commit 就跟沒寫一樣。

這邊我們把左側的選單切換到 Source Control，你就會看到這個淺色深色主題有修改到多個檔案

這邊我就在對話窗輸入

新增 commit

稍等一段時間，會看到 AI 根據變更的檔案，生成對應的 commit 訊息：

commit 送出後，記得要點擊 Publish Branch 才會將檔案上傳喔！

完成後可以把這個工作區關閉，另外兩個 Worktree 也是一樣操作即可。

都 Publish 之後，我們回到 GitHub 網頁，此時你會看到下拉選單中有剛剛上傳的 branch：

隨便點擊一個，就可以看到剛剛撰寫的 commit 訊息：

但目前的 feature 都在不同的 branch，所以接下來會帶大家透過 Pull Reqeust，將功能合併到主線。

⑤ 好的 Pull Request，讓 Code Review 變輕鬆

這邊先點擊上方的「Pull Requests」：

選擇「New Pull Requests」：

如果你是 fork 我的專案，這邊要特別注意，base 要改成自己的帳號，然後 compare 要選擇想合併進來的 feature 分支：

建立 PR 後，你會看到要填寫標題與描述，根據我的工作經驗，PR 是決定專案品質的重要環節：

因為他是讓團隊成員 Code Review 時，理解你到底做了些什麼的文件

如果隨便寫寫，那審核的人通常也是隨意看看；畢竟直接讀程式碼，去理解功能為何這樣設計，真的太消耗腦力了。

我知道很多人嫌寫 PR 很麻煩，所以我也設計了一個 Skill，用來生成 Pull Request 的草稿。

這邊我們把視角切換到 Antigravity，這個 Skill 一樣是放在「.agent/skills」底下，名稱叫做「git-pr-description」。

這邊跟大家簡述這個 Skill 的設計

1. 首先，預設合併的目標為 master 這個主線分支，如果你是用 main/develop 等其他的分支請自行調整。
2. 接下來就會把當前的分支與目標分支進行比對，讀取差異的檔案與 commit 訊息，這邊也再次跟大家提醒 commit 訊息是很重要的，你不想寫，至少要讓 AI 幫你寫吧。
3. 而後就是分析變更的內容，然後生成 Pull Request 的 Title 與 Description。
4. 其中 Description 的部分，我是要求他參考「pr-template」的這個範例檔來撰寫，如果大家想把這個 Skill 導入目前的工作流，可以改寫這個檔案。

講了這麼多，我直接示範給大家看比較快；一樣打開 Agent Manager，然後再各自的 Agent 輸入。

撰寫 PR

稍等一段時間後，他就會根據 Skill 提供的格式生成 Pull Request 的草稿了：

這邊我們把它複製到 GitHub 後，我強烈建議大家至少要跟著測試案例執行過一遍。

如果是前端專案的話，建議附上對應的圖片，這樣可以減少別人 Code Review 時的負擔，同時也確認了功能符合預期。

如果專案是自己開發的，那就直接點擊 Merge 合併就好。

接下來回到 Antigravity，合併好的 Worktree，我個人會建議直接點擊右鍵，在 Worktree Action 當中選擇 Remove Worktree 將他移除，避免 Worktree 太多管理困難。

至於另外兩個 Worktree 也是一樣操作，先建立 Pull Request，接著用 AI 生成對應的 Review 草稿，確認沒問題後合併回主線，完成這一切後記得移除 Worktree。

但有一點要提醒一下大家，因為 Worktree AI Agent 同時開發，所以開發當下不會知道彼此的變更

所以把功能合併回主線時，可能出現衝突；像常見問答跟淺色深色的分支在合併時，都遇到了這個問題：

點擊「Resolve conflicts」可以看到發生衝突的位置，但我個人並不建議在網頁上調整，因為你無法得知調整後的實際狀況：

我建議回到程式碼編輯器上操作，本地解決完衝突，確認結果符合預期後再更新上去。

這邊先回到 Antigravity 的頁面，我以切換淺色深色主題這個分支來做示範。

首先，我們要打開終端機，執行 git fetch origin 拉取遠端最新資料 然後再執行 git merge origin/master 來同步主線的更新。

執行後，你就會發現左側 Source Control 這個地方，在 Merge Changes 有一個衝突的檔案：

打開後就會看到產生衝突的位置，衝突通常分成「語法衝突」跟「邏輯衝突」。

邏輯衝突較難處理，因為要考量到相容性或是改寫程式，這個之後有機會透過一個主題專門分享。

而現在看到的這個是調整 CSS 網頁外型的語法衝突；只是括號位置撞到了而已，所以我選擇 Accept Current Change。

這邊也跟大家提一下前面安裝 Gitlens 外掛的好處，像這邊滑鼠移到程式碼時，你就可以看到當時是誰更新了這段程式、更新的目的是什麼：

處理完衝突後，按下「+」，然後輸入 commit

chore: sync with master

這是與主線同步的意思，然後點擊「Sync Changes」推送上去。

此時回到 GitHub，刷新一下網頁，就會發現可以順利合併嚕！

等所有 feature 都合併到主線後，我們可以在 master 的這個地方輸入 git pull，拉回變更。

然後輸入 pnpm run dev，來確認合併後的內容是否符合預期。

這邊把視角切到網頁，我們可以看到第一次進入時，下方會有 Cookie 的詢問視窗，上面可以切換淺色、深色主題，往下滑一點，常見問題的段落也有順利顯示。

如果文章看到這邊，先給自己拍拍手，然後別忘記幫忙點個讚。

假使你有跟著教學做到這個步驟，歡迎留言，讓我知道觀眾裡面有狠人，因為這個主題真的不容易。

結語：人，才是 AI 的瓶頸

完成這隻影片後，我不禁有個特別的感悟。

因為這隻影片不管是專案範例、Commit 訊息、Agent Skills，甚至連 Pull Request 都是 AI 生成的。

我從頭到尾一行程式都沒有寫，主要任務就是去 Review AI 給的建議、執行的成果。

我想未來絕大多數產品，背後也都是 AI 在進行開發與迭代。

但這並不代表 AI 可以取代工程師，雖然現在人人都可以寫程式；但「團隊溝通、功能擴充、系統維護、問題解決」都是需要經驗的。

就拿今天的影片來舉例好了，我是因為觀察到 Code Review 的速度，已經跟不上 AI 寫程式的速度。

當人成為 AI 的瓶頸時，就要去分析如何降低門檻。

比如不同功能要建立各自的分支，以減少 Code Review 的認知負擔。又或者完成功能後，請 AI 分析程式碼分段 commit，並撰寫 Pull Request 草稿，讓團隊協作的資訊有一致性。

雖然每一步都是 AI 在執行，但如果沒有業界的實戰經驗，大家對這些工具如何與 AI 協作是沒有概念的。

但這些才是真正的痛點，只要設計好就能提升個人與團隊的工作效率。

當然，我相信一定還有很多更好的方案，歡迎大家留言分享。

最後提醒大家，不管 AI 多強大，總需要有個人按下同意按鈕。

當你按下去的那刻，責任就歸屬於你，畢竟 AI 還不能幫人背鍋。

如果這篇文章對你有幫助，可以順手按個讚，並把文章分享給對 AI 主題感興趣的朋友們。