零基礎學 Vibe Coding-Codex: 不懂程式，也能用 AI 從想法做到作品

洪錦魁

畢業於明志工專（現今明志科技大學），跳級留學美國University of Mississippi計算機系研究所。

2023~2025年連續3年獲選博客來「年度十大華文作家」，多年來唯一獲選的電腦書籍作者。也是一位跨越電腦作業系統與科技時代的電腦專家，著作等身的作家，下列是他在各時期的代表作品。

► DOS時代：「IBM PC組合語言、Basic、C、C++、Pascal、資料結構」。

► Windows時代：「Windows Programming 使用C、Visual Basic」。

► Internet時代：「網頁設計使用HTML」。

► 大數據時代：「R 語言邁向Big Data之路、Python王者歸來」。

► AI時代：「機器學習數學、微積分 + Python實作」、「AI視覺、AI之眼」。

► 通用AI時代：「ChatGPT、Gemini、Copilot、無料AI、AI職場、AI行銷、AI影片、AI賺錢術、AI 學習術、AI 生活術、NotebookLM - 打造AI『第二大腦』」。

► Vibe Coding 時代：「寫程式的 AI 戰友、Vibe Coding - ChatGPT x Codex」。

► 國內第 1 本「Gemini 3.5、ChatGPT 5.5、Nano Banana 藝術宇宙」作者。

► 國內第 1 本「AI 健康養生長壽書」、「AI 思維 – 原子習慣」作者。

作品曾被翻譯為簡體中文、馬來西亞文，英文，近年來作品則是在北京清華大學和台灣深智同步發行。

他的多本著作皆曾登上天瓏、博客來、Momo電腦書類，不同時期暢銷排行榜第1 名，他的著作特色是，所有程式語法或是功能解說會依特性分類，同時以實用的程式範例做說明，不賣弄學問，讓整本書淺顯易懂，讀者可以由他的著作事半功倍輕鬆掌握相關知識。

第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 本章重點