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

- 作者：林鼎淵（Dean Lin）
- 網址：https://deanlin.net/blog/202604/chatgpt-codex-agent-skills/
- 發布：2026-04-11
- 主題：AI 實戰
- 標籤：OpenAI Codex、ChatGPT、Codex、Agent Skills、Vibe Coding
- 摘要：前陣子我跟 Cake 合作，在台大分享怎麼把 AI 導入工程師日常的開發工作流。準備過程中，我腦中突然蹦出了一個想法。

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

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

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

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

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

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

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

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

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

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

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

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

> 完整的 Demo，可以觀看 YT 喔 👉
> 對 AI 應用感興趣的朋友，歡迎按下訂閱按鈕，未來我計畫分享一系列 AI 工具的應用教學。

[YouTube 影片：【ChatGPT Codex 實戰】將 Vibe Coding 成果從「用完就丟」，變成「可持續優化」的 Agent Skills](https://www.youtube.com/watch?v=0pZri5f_tfk)

### 培養多個 AI 工具使用的能力

如果你是頻道的老觀眾，也許看到這邊會有個疑惑：「為什麼我怎麼一直分享新的 AI 工具？」

其實會這麼做，是想培養自己「多個 AI 工具交替使用的能力」。

**因為只要某個 AI 被捧上天，通常在不久後就會開始限縮額度，歷史總是驚人的相似。**

所以我教學的目標從來不是強調「哪一款工具」最強，而是透過實際案例，讓大家了解如何解決痛點。

因為工具間的差異，並沒有你想像的那麼大；唯一要提醒的，就是不要為了折扣付年費，因為每個時期最好用的 AI 一直在改變。

## ① 安裝 Codex，在終端機生成網頁

今天這個教學，你可以使用自己熟悉的程式碼編輯器，不管是 VSCode、Cursor、Antigravity 都可以。

如果不知道使用哪一款，可以跟我一樣，使用 Google 推出的 AI 程式碼編輯器 [Antigravity](https://antigravity.google)，登入 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](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 的官方網站](https://platform.openai.com/)，在「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](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](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/](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](https://www.tenlong.com.tw/products/9786264142083)

---

關於作者：林鼎淵（Dean Lin），台灣的生成式 AI 企業內訓講師、外商資安公司軟體專家，也是生成式 AI 創新學院發起人。出版 7 本書（包含全台第一本 ChatGPT 應用專書），兩度獲得 iThome 鐵人賽佳作，累積上百場授課與顧問經驗。（https://deanlin.net/about/）
引用時請附上原文網址：https://deanlin.net/blog/202604/chatgpt-codex-agent-skills/