第1章　什麼是 Vibe Coding
1-1 從「自己寫程式」到「用自然語言做程式」

1-1-1 傳統程式設計在做什麼

1-1-2 AI如何改變寫程式的方式

1-1-3 Vibe Coding的基本概念
1-2 Vibe Coding 可以幫你做什麼

1-2-1 從一句需求產生程式

1-2-2 修改既有功能

1-2-3 找錯誤與修正程式

1-2-4 快速做出小工具與網頁
1-3 Vibe Coding 的正確觀念

1-3-1 不懂程式也能開始

1-3-2 但不能完全不檢查

1-3-3 AI是開發助手，不是萬能程式設計師
?

第2章　認識 Codex
2-1 Codex 是什麼

2-1-1 Codex 與一般 ChatGPT 的差異

2-1-2 Codex 為什麼特別適合寫程式

2-1-3 Codex 可以完成哪些工作
2-2 Codex 如何工作

2-2-1 看懂你的需求

2-2-2 讀取專案檔案

2-2-3 修改與建立程式

2-2-4 執行、測試與修正
2-3 Codex 的使用環境

2-3-1 ChatGPT 桌面版中的 Codex

2-3-2 Codex CLI

2-3-3 IDE 中的 Codex

2-3-4 本書為什麼以 CharGPT 桌面版的 Codex 為主

?
第3章　完成第一個 Codex 程式從溫度轉換到生活單位換算工具
3-1 從需求開始，而不是從程式碼開始

3-1-1 想清楚你要做什麼

3-1-2 用一句話描述需求

3-1-3 讓Codex幫你補完整
3-2 認識 ChatGPT 桌面版 Codex 操作環境

3-2-1 認識「網站」與「專案」

3-2-2 使用「請求核准」保留操作控制權

3-2-3 變更權限

3-2-4 選擇 Codex 的工作模型
3-3 建立第一個小程式–攝氏轉華氏溫度網頁

3-3-1 請Codex建立第一個網頁

3-3-2 看懂第一版成果

3-3-3 網站分享

3-3-4 修改需求再查看結果
3-4 延伸練習–建立更多轉換工具

3-4-1 公分與英吋轉換

3-4-2 公斤與磅轉換

3-4-3 公里與英里轉換

3-4-4 平方公尺與坪數轉換

3-4-5 公升與美制加侖轉換

?
第4章　寫出好用的 Vibe Coding Prompt 以「旅遊預算工具」為實例
4-1 從模糊需求到清楚 Prompt

4-1-1 找出真正的任務目標

4-1-2 補上使用情境與使用者

4-1-3 說清楚完成標準
4-2 一個好 Prompt 的基本結構

4-2-1 任務

4-2-2 功能

4-2-3 畫面

4-2-4 限制條件

4-2-5 驗收條件
4-3 用對話持續修正 Prompt

4-3-1 看結果再補需求

4-3-2 一次只改一個方向

4-3-3 告訴 Codex 哪些地方不要改

4-3-4 讓 Codex 先提出改善建議

?
第5章　不必會寫，也要看懂 AI 幫你做了什麼
5-1 不必全部懂，也要看懂基本結構

5-1-1 程式專案與程式檔案是什麼

5-1-2 HTML、CSS、JavaScript 各自負責什麼

5-1-3 Python 是什麼，什麼時候會看到它
5-2 讓 Codex 幫你解釋程式

5-2-1 用白話解釋

5-2-2 分段說明

5-2-3 告訴你哪裡可以修改

5-2-4 小結–用同一份程式，逐步看懂
5-3 看懂 Codex 到底改了什麼

5-3-1 讓 Codex 執行修改

5-3-2 用白話看懂實際修改內容

5-3-3 比較「原本預計修改」和「實際修改」

5-3-4 小結–從「已完成」到「看懂修改」

?
第6章　打造個人作品與專業形象網站
6-1 規劃個人作品與專業形象網站

6-1-1 決定網站定位

6-1-2 整理網站需要的內容

6-1-3 規劃網站區塊

6-1-4 撰寫完整網站需求
6-2 認識 Vercel

6-2-1 為什麼網站需要公開網址

6-2-2 Vercel 是什麼

6-2-3 建立或登入 Vercel 帳號

6-2-4 認識 Vercel 專案首頁與發布入口
6-3 建立並發布第一版網站

6-3-1 建立網站專案

6-3-2 輸入完整網站需求

6-3-3 預覽第一版網站

6-3-4 發布網站並取得公開網址
6-4 完善網站內容與視覺

6-4-1 檢查網站內容

6-4-2 加入圖片與修改文字

6-4-3 調整版面與區塊

6-4-4 統一色彩與風格
6-5 加入互動功能並完成測試

6-5-1 增加按鈕、連結與互動設計

6-5-2 加入簡單聯絡表單

6-5-3 檢查桌面與手機版面

6-5-4 修改後記得再次部署
6-6 更多適合用 Codex 製作的網站

6-6-1 小型公司�工作室官網

6-6-2 咖啡館�餐廳介紹網站

6-6-3 旅遊介紹網站

6-6-4 課程�講座介紹網站

6-6-5 從第一版開始，逐步完成網站

?
第7章　用 Codex 整理與分析資料以「銷售資料整理」為實例
7-1 把資料交給 Codex

7-1-1 認識這次要處理的資料

7-1-2 認識 CSV 與 Excel 資料

7-1-3 建立 Codex 專案並指定本機來源資料夾

7-1-4 讓 Codex 讀取並檢查銷售資料
7-2 整理與計算銷售資料

7-2-1 先區分哪些資料可以直接整理

7-2-2 先整理可以明確修正的資料

7-2-3 確認需要人工判斷的資料

7-2-4 新增銷售金額並進行統計
7-3 把分析結果變成容易閱讀的資訊

7-3-1 建立資料摘要

7-3-2 整理成統計表格

7-3-3 找出重要結果與排行

7-3-4 用圖表呈現資料
7-4 匯出並保存分析成果

7-4-1 保存整理後的 CSV 資料

7-4-2 匯出 Excel 分析檔案

7-4-3 保存圖表與分析成果

7-4-4 最後檢查所有輸出結果

?
第8章　設計互動遊戲世界從滾輪盤、保齡球到太空射擊
8-1 從遊戲點子開始

8-1-1 Codex 也可以幫我們做遊戲

8-1-2 先說清楚遊戲怎麼玩

8-1-3 本章的三個主要實作
8-2 幸運滾輪盤

8-2-1 規劃第一版滾輪盤

8-2-2 讓Codex建立第一版遊戲

8-2-3 檢查隨機結果與旋轉效果

8-2-4 增加遊戲感
8-3 保齡球遊戲

8-3-1 規劃保齡球遊戲規則

8-3-2 建立第一版保齡球遊戲

8-3-3 測試球的路徑與球瓶連鎖碰撞

8-3-4 讓遊戲更有臨場感
8-4 太空射擊遊戲

8-4-1 規劃玩家、敵人與遊戲規則

8-4-2 建立第一版太空射擊遊戲

8-4-3 加入玩家控制與射擊

8-4-4 加入敵人與碰撞判斷

8-4-5 加入分數、生命與遊戲結束

8-4-6 讓遊戲逐步變得更有挑戰
8-5 更多適合用 Codex 製作的熱門遊戲

8-5-1 打地鼠遊戲

8-5-2 貪食蛇遊戲

8-5-3 打磚塊遊戲

8-5-4 飛行障礙遊戲

8-5-5 賽車遊戲
8-6 從第一版開始，再逐步變好玩

?
第9章　設計 AI 換臉程式–臉部偵測、馬賽克與圖像去背
9-1 認識 AI 換臉程式

9-1-1 換臉程式要完成什麼

9-1-2 從「怎麼做」改成「我要什麼」

9-1-3 Codex 可以自行設計換臉程式模組

9-1-4 換臉程式的輸入、處理與輸出

9-1-5 先完成第一版，再看結果修改
9-2 建立換臉程式上傳介面

9-2-1 規劃圖片上傳介面

9-2-2 建立第一版圖片上傳介面

9-2-3 測試拖曳上傳功能
9-3 製作 AI 換臉程式

9-3-1 從介面進入真正的圖片處理

9-3-2 讓 Codex 自行設計換臉模組

9-3-3 測試第一組換臉照片

9-3-4 如果效果不好，就直接修改模組
9-4 更多 AI 圖像應用

9-4-1 圖片去背

9-4-2 自動偵測與標示人臉

9-4-3 人臉模糊與馬賽克

9-4-4 不使用 API Key，也能製作圖像程式

?
第10章　設計 AI 繪圖程式–串接 API 服務
10-1 認識 AI 繪圖程式

10-1-1 AI 繪圖程式和一般圖片處理有什麼不同

10-1-2 Prompt 就是繪圖指令

10-1-3 為什麼這一章需要 API

10-1-4 API Key 是什麼

10-1-5 ChatGPT 訂閱和 API 使用是兩回事
10-2 建立第一個 AI 繪圖介面

10-2-1 先規劃操作流程

10-2-2 建立第一版AI繪圖介面

10-2-3 測試 Prompt 輸入功能
10-3 串接 OpenAI 圖像生成 API

10-3-1 建立 OpenAI API Key

10-3-2 將 API Key 安全放入專案

10-3-3 讓 Codex 串接 OpenAI API

10-3-4 第一次真正生成 AI 圖片

10-3-5 用 .gitignore 保護 API Key
10-4 加入繪圖設定

10-4-1 先加入圖片尺寸

10-4-2 加入圖片品質設定

10-4-3 加入背景設定

10-4-4 加入圖片格式設定

10-4-5 一次完成完整的繪圖設定區

10-4-6 實際比較不同設定
10-5 更多 OpenAI 圖像 API 應用

10-5-1 更換圖片背景

10-5-2 修改人物服裝與造型

10-5-3 圖像風格轉換

10-5-4 三個專案使用的是同一種 API 思考方式

10-5-5 查看各專案的 API 使用費用
?

第11章　讓 Codex 學會你的程式設計方式建立與使用Skill
11-1 認識 Codex Skill

11-1-1 Prompt 和 Skill 有什麼不同

11-1-2 Skill 的核心是 SKILL.md

11-1-3 Skill 可以影響 Codex 怎麼工作

11-1-4 什麼內容適合做成 Skill
11-2 建立第一個程式設計 Skill

11-2-1 先決定 Skill 要解決什麼問題

11-2-2 建立 Skill

11-2-3 認識 Skill.md 存放資料夾

11-2-4 看看 SKILL.md 裡面有什麼

11-2-5 第一次使用這個 Skill

11-2-6 檢查 Skill 是否真的有作用

11-2-7 如果 Skill 規則不夠清楚
11-3 讓 Skill 影響 Codex 的程式設計

11-3-1 建立測試專案

11-3-2 先觀察沒有使用Skill的結果

11-3-3 使用 web-project-style Skill 再建立一次

11-3-4 比較使用 Skill 前後的差異

11-3-5 Skill 不是取代 Prompt

11-3-6 Skill 最有價值的是「不用重複說」
11-4 建立 API 安全開發 Skill

11-4-1 先決定這個 Skill 要負責什麼

11-4-2 建立 secure-api-project Skill

11-4-3 檢查 SKILL.md

11-4-4 使用 Skill 建立一個 API 專案

11-4-5 檢查 Skill 是否真的被套用

11-4-6 把第10章的經驗變成可重複規則
11-5 更多 Skill 應用與使用原則

11-5-1 為不同類型的程式建立不同 Skill

11-5-2 建立資料處理 Skill

11-5-3 建立圖像程式 Skill

11-5-4 一個專案可以使用多個 Skill

11-5-5 Skill 也需要定期整理
?

第12章　用 Codex 找錯與修正
12-1 程式為什麼會出錯

12-1-1 語法錯誤

12-1-2 邏輯錯誤

12-1-3 執行環境問題

12-1-4 套件、檔案與設定問題
12-2 把錯誤訊息交給 Codex

12-2-1 看懂錯誤訊息

12-2-2 請Codex分析原因

12-2-3 修改後再次執行

12-2-4 上傳錯誤畫面與相關檔案
12-3 建立正確的除錯流程

12-3-1 先列出所有問題，不要急著修改

12-3-2 一次只改一個問題

12-3-3 修改後一定測試

12-3-4 保留可以正常工作的版本
12-4 讓 Codex 修正一個有錯誤的網頁程式

12-4-1 複製錯誤專案

12-4-2 建立新的除錯專案

12-4-3 先找出所有問題，不要修改

12-4-4 一個一個修正
?

第13章　從「寫程式」進入 AI Agent
13-1 Codex 不只是程式碼產生器

13-1-1 它可以讀檔案

13-1-2 它可以修改多個檔案

13-1-3 它可以自己執行測試
13-2 認識 Agent 工作方式

13-2-1 從 Prompt 到任務

13-2-2 一步一步完成工作

13-2-3 根據結果繼續修正

13-2-4 工具、權限與核准
13-3 Harness是什麼

13-3-1 用白話理解 Harness

13-3-2 為什麼 Codex 能操作工具

13-3-3 初學者需要了解多少

?
第14章　Vibe Coding 必須知道的安全觀念
14-1 不要完全相信 AI 程式碼

14-1-1 可以執行，不代表結果正確

14-1-2 重要結果要自己驗證

14-1-3 AI 的修改也可能造成新問題

14-1-4 把 AI 當助手，不是最後裁判
14-2 小心帳號、密碼與 API Key

14-2-1 不要把密碼直接寫進程式

14-2-2 API Key 也不能放在前端

14-2-3 不要把 Key 貼進公開內容

14-2-4 如果懷疑 Key 外洩

14-2-5 建立一個簡單原則
14-3 不要任意執行不明程式

14-3-1 先看懂要執行什麼

14-3-2 來源不明的程式要特別小心

14-3-3 安裝套件也不是完全沒有風險

14-3-4 需要高權限時更要確認

14-3-5 把「執行前先確認」變成習慣
14-4 重要資料要先備份

14-4-1 修改前先留一份

14-4-2 重要資料不要直接覆寫

14-4-3 重大修改前先建立可回復點

14-4-4 備份不只用在程式碼

14-4-5 把備份變成工作習慣
14-5 不要隨意提供敏感資料

14-5-1 上傳前先判斷是否真的需要

14-5-2 測試時優先使用假資料

14-5-3 不要把敏感資料寫進程式碼

14-5-4 公開前再檢查一次

14-5-5 建立最小揭露原則
?

第15章　建立自己的 Vibe Coding 工作方式
15-1 從生活需求找題目

15-1-1 先找「重複做」的事情

15-1-2 從「覺得麻煩」的地方開始

15-1-3 先解決自己的問題

15-1-4 不要一開始追求「大作品」

15-1-5 把需求寫成一句話
15-2 把大需求拆成小任務

15-2-1 先做最小可用版本

15-2-2 按照使用流程拆任務

15-2-3 一次只加入一類功能

15-2-4 把每個小任務寫成清楚 Prompt

15-2-5 拆小之後比較容易修改
15-3 用 Codex 反覆修改

15-3-1 先看結果，再決定下一步

15-3-2 一次只改一個方向

15-3-3 告訴 Codex 哪些地方不要改

15-3-4 每次修改後都要測試

15-3-5 不要害怕多次對話
15-4 從使用者走向創作者

15-4-1 不要只停在「使用別人的工具」

15-4-2 創作者不是什麼都要自己寫

15-4-3 作品可以從很小開始

15-4-4 開始建立自己的作品累積

15-4-5 創作的重點是持續改善
15-5 建立自己的 Vibe Coding 工作流程

15-5-1 先把需求說清楚

15-5-2 先做最小可用版本

15-5-3 每完成一步就測試

15-5-4 修改前先確認哪些功能已經正常

15-5-5 保留正常版本

15-5-6 把重複經驗整理起來

15-5-7 形成自己的工作節奏

15-5-8 本章重點

從想法開始，把作品做出來

?

過去，很多人一想到「寫程式」，第一個反應就是：
? 我不會寫程式，所以應該做不到。

?

因為傳統程式設計通常要先學習語法、變數、條件判斷、函式，再慢慢熟悉各種開發工具。對沒有程式背景的人來說，真正的困難往往不是沒有想法，而是不知道怎麼把想法變成程式。

?

生成式 AI 的出現，正在改變這件事。

?

現在，我們可以先用自然語言說出需求，例如：

? 幫我做一個旅遊預算工具。

? 幫我整理一份銷售資料。

? 做一個可以玩的保齡球遊戲。

? 建立一個可以產生 AI 圖像的程式。

?

接下來，再讓 Codex 協助建立程式、修改功能、找出問題，並根據實際結果持續改善。這就是本書所要介紹的 Vibe Coding。

?

Vibe Coding 並不是完全不需要理解程式，也不是把所有事情都交給 AI。真正的改變是：
? 不必先會寫程式，才能開始做程式。

?

我們可以先從自己的想法出發，學習如何把需求說清楚，再讓 AI 協助處理技術細節。因此，這本書不會從大量程式語法開始，而是從「想做什麼」開始。你會先認識 Vibe Coding 與 Codex，再實際建立第一個小程式；接著學習如何寫出更清楚的Prompt、如何看懂 AI 幫你做了什麼，以及如何透過一次又一次的對話，把作品逐步修改得更完整。

?

之後，你還會實際接觸網站、資料整理、遊戲、圖片處理、AI 繪圖、API、Skill、除錯與 Agent 等不同應用。但不論作品怎麼變化，本書始終維持同一個核心方法：
? 先做出第一版，再看結果、修改、測試，逐步把作品完成。

?

因為 Vibe Coding 並不是追求一次寫出完美的 Prompt，而是學會在每一次結果之後，知道下一步該怎麼做。

?

AI 可以幫助我們加快開發速度，但最後的需求、判斷與選擇，仍然掌握在人手中。

?

所以，我希望讀完這本書之後，你得到的不只是「會使用 Codex」，而是建立一種新的思考方式：
? 看到一個需求，就開始思考：這件事，我能不能自己做一個工具來解決？

?

作品不一定要很大。

?

一個實用的小工具、一個自己的網站、一個簡單的遊戲，甚至是一個能幫自己節省時間的程式，都可以是一個作品。從一個想法開始，透過 AI 一步一步把它做出來。

?

這就是這本書真正想帶給你的能力。

?

也希望《Vibe Coding 入門 - Codex：不懂程式，也能用 AI 從想法做到作品》，能成為你開始創作第一個程式作品的起點。

?

洪錦魁2026/10/30

著作編號：325( 個人) / 375( 含合著) / 500

[email protected]

?
臉書粉絲團

歡迎加入：王者歸來電腦專業圖書系列

歡迎加入：iCoding 程式語言讀書會

歡迎加入：MQTT 與AIoT 整合運用

歡迎加入：深度機器學習線上讀書會
?

圖書資源說明

本書籍的所有Prompt 和資源實例可以在深智公司網站下載。

?