嗨！大家好，我是鼎淵
歡迎來到工程師下班有約
前陣子我跟 Cake 合作，在台大分享怎麼把 AI 導入工程師日常的開發工作流
準備過程中，我腦中突然蹦出了一個想法
既然課程在講 AI 寫程式，那與其使用傳統的 PPT 做講義
不如嘗試用 Vibe Coding，打造一個屬於自己講義網站，這樣使用者介面可以完全根據自己的需求量身打造
然後花了一個晚上的時間，完成了模板的雛形設計
他不僅可以在電腦、平板、手機瀏覽，甚至還可以匯出 PDF
為了讓設計可以被重複使用，我把他封裝成了一個 Agent Skill
這樣未來我收到新需求時，只要提供講義初稿，AI 就會在分析內容後，直接生成一個講義網頁
如果對產生結果不滿意，也可以調整 Markdown 文件修改細節
聽起來是不是棒呆了？
今天這隻影片，我除了會分享如何用系統設計思維打造 Agent Skill 外，更會提醒過程中會遇到的陷阱與痛點
相信大家看完後，就不會只把 Vibe Coding 的成果當成免洗餐具，用完就丟；而是開始去思考，如何把它設計成可以長期使用、維護、擴增的工具。
另外今天使用的 AI Agent 是 ChatGPT 的 Codex，目前可以免費使用。
我會展示兩種操作方式，一種是在終端機輸入指令，另一種則是在程式碼編輯器安裝外掛，透過對話窗操作。
透過實際 Demo 讓大家更直觀的比對兩種使用方式的差異。
而這隻影片提到的所有工具連結和提示詞，我都有把他整理到部落格文章中，連結放在下方的影片描述。
如果你是頻道的老觀眾，也許看到這邊會有個疑惑：「為什麼我怎麼一直在換新的 AI 工具？」
其實我會這麼做，是想要培養自己「多個 AI Agent 交替使用的能力」
因為只要某個 AI 被捧上天，就注定不久後會隕落，歷史總是驚人的相似
我教學的目標從來不是強調「哪一款工具」最強，而是想透過實際案例，讓大家了解如何解決痛點
因為工具間的差異，並沒有你想像的那麼大；唯一要提醒的，就是不要為了折扣付年費，因為每個時期最好用的 AI 一直在改變
今天這個教學，你可以使用自己熟悉的程式碼編輯器
不管是 VSCode、Cursor、Antigravity 都可以
如果不知道使用哪一款，可以跟我一樣
使用 Google 最新推出的 AI 程式碼編輯器 Antigravity，登入 Google 帳號就能免費使用 https://antigravity.google
但這次，我們沒有要使用到編輯器內建的 AI 功能，使用他，只是為了方便檢視程式碼的變更
在開始前，我們要先準備一個空的資料夾
這是為了讓 AI Agent 有明確的工作區
你可以點擊 Open Folder，或是直接把資料夾拖曳進來都可以
因為今天分享的 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 便可檢視剛剛安裝的版本
在 Node.js 安裝完成後，我們要來安裝 Codex
只要在終端機輸入指令，便可以完成全局安裝
npm i -g @openai/codex
在安裝完成後，於終端機輸入 codex
這邊有提供三種登入方式：
在成功登入後，他一開始會先詢問你是否信任這這個資料夾，選擇 Yes 才能繼續
接下來出現的輸入框，就可以把它當成過去與 AI 的對話視窗，兩者並沒有什麼差異
這邊我先貼上一段 Prompt，請他幫我生成一個教學講義的網頁
請扮演熟悉 AI 主題授課的講師，以「Agent Skills」為主題設計講義
講義用純 html 網頁（CSS/JS 都放裡面）呈現
日系風格的設計感，部分文字與背景可以搭配適當的漸層
開頭會根據內容呈現標題，然後下面有發人深省的標語
會根據不同層級與意圖呈現對應的區塊（ex: 大小標題、陳述、列點、流程）
最後放上社群連結鼓勵大家訂閱（FB/YouTube/Medium）
側邊欄會有對應的目錄，方便跳轉到對應位置
下面分享提示詞的幾個重點：
接著稍等一段時間，網站就生成出來了
我們可以打開存放網頁的資料夾，點擊兩下 html 檔案便可預覽
老實講，這個版本的完成度已經不錯了；也就是說，如果只是想要一份「看起來可以用」的講義網站，其實做到這步就夠了。
但如果你是追求細節的人，很快就會遇到問題。
因為 AI 生成的描述可能不符合你的期待，段落結構也未必是你要的。
此時我們有兩個選擇：
但第一種方案隨機性太高，還可能會動到不該動的；而第二種方案，就算我本身是工程師，改起來都覺得痛苦。
假使在後續要花很大的力氣才能調整，那麼初始版本產生的速度再快、畫面再漂亮；也是很難應用到現實情境的
所以，我們不妨換一種思路
既然生成式 AI 的輸出注定充滿隨機性，那有什麼方式，可以在結果產生後，輕鬆調整細節
我的答案是「建立模板」
因為今天分享的內容包含建立穩定的模板，以及如何把它封裝為可重複使用的 Agent Skill，所以影片時間較長，還沒訂閱頻道的朋友，可以先訂閱一下，這樣之後才找得到喔！
模板的核心概念，就是不要讓 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 就初步幫我們把模板建立完成了
我們就按造他的指示，輸入 npm run dev，打開對應的網址
這邊可以看到網頁有順利渲染，然後我們再去看一下 AI 設計的 Markdown 文件
調整一下文字，此時你會看到網頁有即時更新
在初步確認結果符合預期後，我們回到程式碼編輯器
此時我們就可以把剛剛的工作流，設計成一個可重複使用的 Agent Skill 了
如果你是第一次接觸 Agent Skills，我過去有拍一隻影片分享安裝、使用、製作的技巧
點擊右上方資訊卡就可以看到嚕 https://youtu.be/xe00zJEtuMo
接下來我們在終端機輸入下面的 Prompt，我跟 AI 說：
根據下面需求在「.agents」資料夾建立 Skill：
- 參考模板：根據剛剛腳本設計的規格，建立明確的 Markdown 使用規範
- 觸發時機：使用者提供初步想法想建立網頁時，會觸發這個 Skill
- 執行順序：這個 Skill 會先深入研究輸入的主題，再根據規範設計對應的 Markdown 文件；最後把 Markdown 文件透過腳本生成 html
- 特別提醒：預計會有多個主題，所以觸發時，請先建立新的資料夾，裡面存放新生成的 Markdown 與 HTML 檔案；並且建立獨立的 scripts 與 references 資料夾，確保可單獨執行
稍等一段時間，Agent Skill 就幫我們製作完畢了
在左側我們可以看到一個「.agents」的資料夾，裡面有 SKILL.md 這個檔案
name 就是這個 Skill 的名稱，description 則是說明觸發的時機點與預計的執行成果
references 資料夾放著 Markdown 格式的參考文件，而 scripts 則是存放模板編譯的程式腳本
接下來，我們就要來試用看看這個 Agent Skill 是否符合預期
也趁這個機會，跟大家分享如何在 Antigravity 安裝 Codex 外掛
只要點擊左側的 Exetentions，輸入「chatgpt」，第一個就是我們要安裝的外掛
如果找不到，在瀏覽器網址輸入「antigravity:extension/openai.chatgpt」開啟安裝外掛的頁面喔
安裝完成後，接著打開任一文件，點擊上方的 ChatGPT 圖示
這款外掛有提供登入 ChatGPT 帳號與使用 API Key 兩種使用模式，這邊我選擇登入 ChatGPT 帳號
我們要點擊上方的「Setting」按鈕，來登入 ChatGPT 的帳號
登入後，就可以在與 AI 的對話視窗中體驗了
相比於終端機透過輸入指令溝通，透過外掛安裝的使用者介面更適合初學者
你可以更輕鬆地切換 GPT 模型、調整思考深度；如果把滑鼠符號打開，AI 就可以辨識你目前選中的區域和打開的檔案
如果你還想要做更多細微的設定，可以輸入「/」來了解
比如你打算讓 AI 初始化專案，可以把 Plan Mode 打開，來獲得更加詳盡的規劃
假使想了解目前剩餘的額度，則可以透過 Status 來確認
另外往下滑，會看到安裝好的指令（Commands）與技能（Skills）
滑到底部，就會看見剛剛我們剛剛設計的 Website Markdown Builder 這個 Skill
當然「/」也是可以在終端機當中使用，比如我們這邊打 status 一樣可以看到使用量，但需要你對關鍵字有一定的熟悉度
這邊我們輸入下面的提示詞
我想要建立深度介紹「ChatGPT 使用技巧」的課程講義網頁。
這邊你會看到他有成功觸發對應的 Agent Skill 來進行設計
稍等一段時間，對應的 Markdown 文件與 html 網頁就生成出來了！
如果你有跟著教學走到這一步，恭喜你建立了屬於自己的模板
但…這只是開始而已
你可以先喘口氣幫這隻影片點個讚，還沒訂閱頻道的朋友，可以先訂閱一下
因為接下來，我要分享 Vibe Coding 時需要需要注意的細節
儘管剛剛設計的 Agent Skill 搭配模板腳本可以輕鬆生成講義網頁。
但其實功能非常不完善，這邊跟大家舉例：
這邊我只是舉出幾個常見痛點，雖然建立模板聽起來很厲害，但自由的背後，代表你是目前唯一的維護者
因為模板的細節是在實際使用後，你才知道哪裡要調整；儘管設計與程式撰寫可以交給 AI，但方向與美感還是要自己掌握。
這就是自己設計模板的代價。你想要主控權，就得承擔客製化背後的複雜度。
老實講，如果只是要有一個線上簡報工具，市面上已經有很多現有工具，不一定要走自建模板這條路。
而我選擇做這件事，與其說是建立一個更好的方案，不如說是在設計一套最符合自己需求的工具。
這邊我就直接跟大家展示目前的成果，我已經使用這套模板講了 5 場 Vibe Coding 課程了
我把它設計成一個 Agent Skill，大家可以直接到 GitHub Fork 我的 Repository 來體驗 https://github.com/deancourse/agent-skill-lecture-builder
網址放在下方的影片資訊欄，歡迎路過按個 Star，讓我知道自己的分享對大家有幫助
Fork 完成後，點擊 Code，從裡面複製專案網址
然後回到程式碼編輯器，點擊 Clone Repository，貼上剛剛複製的網址來下載專案
指定下載路徑，完成後點擊 Open 便可跟著影片一起操作
這邊要先安裝所需的套件，打開終端機，輸入 npm install 即可
目的是安裝幫忙截圖的 puppeteer 套件
假使你今天想要根據指定主題來生成講義網頁，只要打開與 AI 的對話視窗
然後輸入自己想研究的主題就好，像我這邊就說：
扮演一位擅長用實際案例解說的資安專家，設計"生成式 AI 的資訊安全"的講義並生成網頁
完成後直接啟動
接著稍等一段時間，網頁就建立完成了，因為我這邊要求他啟動，所以我們直接點擊上面的網址來查看成果
這邊可以看到側邊欄是可以自由收合的，而且在收合後下方會有進度條，讓我講課時可以掌握授課進度
由於我的授課內容有很多地方需要複製指令，但講課時我可能只有一隻手能操作電腦
所以指令右側有一個複製的 icon，這樣我單手就能輕鬆複製，而不需要透過滑鼠選半天
並且能夠根據場地自由切換淺色、深色模式；設定中也有多款主題可以使用
當講課到一半，覺得需要中場休息時，點擊「休息一下」就能夠設定休息時間，而且還有倒數計時來提醒大家
而前面提到的匯出 PDF，我也直接設計了對應的版面，而不是把網頁的結構直接搬過去，這樣才會有更好的閱讀體驗
甚至如果你想要用簡報模式呈現，右下角的「簡報模式」也可以使用喔，是不是覺得超讚的！
好的，了解如何一句話生成網頁後，我們再回到程式碼編輯器
這次我要跟大家示範另一種生成網頁的方式
如果你已經準備好課程講義的草稿，這個 Agent Skill 也是可以直接轉換的
這個專案當中，我在 exmaple 資料夾底下就有準備一個 Markdown 文件來給大家體驗
其實這個文件就是這隻影片的 Markdown 逐字稿，我開啟一個新的對話窗，直接跟 AI 說
轉換成網頁，並啟動專案
稍等一段時間，AI 就幫我們完成設計並啟動專案嚕～
用這個方案來生成講義，你會對內容的掌握度更高
講到這邊，可能會有人好奇網頁背後的 Markdown 文件長什麼樣子，這邊我就回到程式碼編輯器展示給大家看
你會發現大部分都還是依照既有的 Markdown 語法來設計
但由於這個模板是我建立的，所以我也能設計特殊的語法，比如「XXX」
不過這些語法我不需要去背誦，因為我已經把它寫成了一個 Agent Skill
你只需要提出自己想放進去講義的資訊，AI 就會辨識內容，並找到最合適的版型整合到講義中
你需要做的，就是當文字不符預期時，手動做一些微調
雖然模板前期的建立有很多細節要處理，但建立好後，你就能根據自己的意志來優化細節，不再被平台綁架
而且因為它不是一次性工具，所以你會願意花更多時間打磨細節
確認符合預期後，我們就可以打開 Source Control，接著選擇 Init Repository 如果你打算公開網頁，可以選擇 Public
接著點擊 Generate 自動生成 commit，並 Push Branch 將內容更新到 GitHub 上面
接著來到 GitHub 頁面，如果你想要讓網頁被大家瀏覽，只要去 Settings 頁面
這次我們用預設的 Deploy from a branch，你只要把 Branch 切換到 main 就可以了
因為前面生成的是單純的 html 檔案，因此可以直接顯示
此時到 Actions 的頁面就會看到有成功觸發，順利的話，就會看到部署完成後的網址
但點開來後，你會發現頁面不存在，這是因為網頁檔是存在 example 資料夾底下
我們回到 Code 頁面，我們的檔案在 example 底下
所以只要在網址後面加上 example 就可以順利顯示嚕～
而更前面設計的資安網頁，也是複製資料夾路徑，替換上去就可以看到嚕～
了解基礎的操作方式後，你就可以在不同的資料夾下建立對應的課程網頁
這邊也提醒一下大家，雖然這個專案都是 Vibe Coding 出來的
但如果完全沒有技術背景，可能會設計出不合理的架構，或是忽略細節
比如 Open Graph，也就是 OG；如果你最終完成的成品打算公開分享，但沒有設定標題（title）、描述（description）、縮圖（image），那網址預覽畫面會很醜。
如果想知道網頁有沒有設定，可以到這個網站「https://www.opengraph.xyz/」
這邊貼上剛剛部署的網址，就能看到 OG 是否有完成相關設定嚕～
接著再回到程式碼編輯器
如果有些資訊如果希望反覆利用，其實我們可以把它抽出來，放到 config 資料夾，讓他可以在所有頁面被共用。
像這邊我就把講者資訊、頁面尾端的社群宣傳，還有預設的 OG 顯示拉出來設計成一個 global.yaml 檔案，而 og 圖片我則是放在 assets 資料夾中
而有些希望根據文章客製化調整的資訊，我讓大可以透過 config.yaml 檔案來蓋過去
其實我是用系統設計的角度，來思考模板如何設計會更好用
比如變動性高的資訊，我把它放在 Markdown 文件方便修改，共用的資訊則設計成 config 來進行維護。
而 Markdown 文件、網頁，以及 OG 圖片的初始化，我則是設計一個 Agent Skill 來處理。
這樣就能讓 AI 幫我快速完成第一版，而我也能在後續輕鬆調整細節。
我已經用 AI 寫了 3 年多的程式，最大的感觸是
當我們開始思考專案架構的時候，Vibe Coding 的成果才會慢慢脫離 Demo，進入長期可用的狀態。
回顧這隻影片，我們做了三件事：
第一，用 Codex 從零生成網頁
第二，把 AI 的隨機輸出，轉成可用 Markdown 維護的模板
第三，把模板打包成 Agent Skill，讓它可以重複使用。
在走完這整個流程之後，我感觸最深的，是發現 AI 真的可以把自己腦中的工作流，一點一點變成一套系統。
這個任務放在過去，是需要一個團隊，花好幾週的時間才有可能做到的。
但這次我只是在備課的過程中突然靈光乍現，然後就透過 Vibe Coding 完成了模板的雛形。
當然現在的它還不夠完美，但我覺得最有價值的，反而不是它現在功能有多完整。
而是從這一刻開始，我不再只是使用別人的工具。
我也開始有能力，慢慢把工具設計成更符合自己需求的樣子。
而就是讓 Vibe Coding 的成果，從玩具走向產品的過程。
我認為 AI 真正厲害的地方，從來都不是幫你省下一次工作的時間。
而是它開始讓你有機會，把自己原有的工作流，設計成一套可以持續優化的模板
相信大家在看我 Demo 的過程中，充分感受到了 Agent Skill 的魅力。
今天的分享就到這邊，如果這隻影片有給你啟發與幫助
別忘了按讚、訂閱
並把影片分享給需要的朋友
未來，我會分享更多 AI 工具的應用技巧與注意事項
我是鼎淵，我們下班有約！大家掰掰！