【ChatGPT Codex 實戰】Vibe Coding 速度很快，但用完就丟的東西，永遠不會變成你的

前陣子我跟 Cake 合作，在台大分享怎麼把 AI 導入工程師日常的開發工作流。準備過程中，我腦中突然蹦出了一個想法。

既然課程在講 AI 寫程式，那與其使用傳統的 PPT 做講義；不如嘗試用 Vibe Coding，打造一個屬於自己講義網站，這樣使用者介面可以完全根據自己的需求量身打造。

然後花了一個晚上的時間，完成了模板的雛形設計。

他不僅可以在電腦、平板、手機瀏覽，甚至還可以匯出 PDF。

為了讓設計可以被重複使用，我把他封裝成了一個 Agent Skill。

這樣未來我收到新需求時，只要提供講義初稿，AI 就會在分析內容後，直接生成一個講義網頁。

如果對產生結果不滿意，也可以調整 Markdown 文件修改細節。

今天這篇文章，我除了會分享如何用系統設計思維打造 Agent Skill 外，更會提醒過程中會遇到的陷阱與痛點。

相信大家看完後，就不會只把 Vibe Coding 的成果當成免洗餐具，用完就丟；而是開始去思考，如何把它設計成可以長期使用、維護、擴增的工具。

今天使用的 AI Agent 是 ChatGPT 的 Codex，目前免費版就可以使用。

我會展示兩種操作方式，一種是在終端機輸入指令，另一種則是在程式碼編輯器安裝外掛，透過對話窗操作。

透過實際 Demo 讓大家更直觀的比對兩種使用方式的差異。

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

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

[embed]

➤ 培養多個 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 主題感興趣的朋友們。

https://www.tenlong.com.tw/products/9786264142083

▶︎ 如果這篇文章有幫助到你

1. 可以點擊下方「Follow」來追蹤我～
2. 可以對文章拍手讓我知道 👏🏻
你們的追蹤與鼓勵是我繼續寫作的動力 🙏🏼

▶︎ 如果你對目前的職涯感到迷茫

1. 也許我在iT邦幫忙發表的系列文可以給你不一樣的觀點 💡
2. 也歡迎您到書局選購支持，透過豐富的案例來重新檢視自己的職涯