VIDEO 零基礎學Vibe Coding
Codex
不懂程式，也能用AI從想法做到作品
《不懂程式，也能用 AI 從想法做到作品》
《不會寫程式，也能開始做程式》
過去，想把一個想法變成真正可以操作的程式，往往得先學語法、工具、開發環境，還要知道怎麼除錯、測試與部署。
現在，有了生成式 AI 與 Codex，程式開發的起點正在改變。
你可以先用自然語言說出自己想做什麼，再讓 Codex 協助建立程式、修改功能、找出錯誤、執行測試，甚至逐步完成一個真正可以使用的作品。
這就是 Vibe Coding。
本書不是要你先變成程式設計師，而是帶你從「想法」出發，學會如何和 Codex 合作，把需求一步一步做成成果。
你將從第一個小程式開始，學習如何描述需求、寫出更清楚的 Prompt、看懂 AI 幫你做了什麼，再進一步實作網站、資料分析、互動遊戲、圖片處理與 AI 繪圖。
接著，你還會接觸 API、Skill、除錯、AI Agent，以及程式開發中不可忽略的安全觀念。
整本書貫穿一個最重要的工作流程：
●想法 → 需求 → 第一版 → 測試 → 修改 → 再測試 → 完成作品
你不需要一開始就知道程式該怎麼寫。
但你會逐漸學會：
●如何把模糊想法變成清楚需求
●如何讓 Codex 建立第一個可用版本
●如何透過對話持續修改作品
●如何判斷 AI 產生的結果是否正確
●如何處理錯誤，而不是遇到問題就全部重來
●如何把重複的工作方式整理成 Skill
●如何從單純使用 AI，進一步理解 AI Agent 的工作方式
●如何建立屬於自己的 Vibe Coding 工作流程
本書實戰內容
這不是一本只介紹 Vibe Coding 觀念的書，而是從最簡單的小工具開始，逐步帶你用 Codex 完成真正可以操作、測試與持續修改的作品。
從第一個小程式開始
先從最容易理解、最容易驗證結果的轉換工具開始，學會如何用一句自然語言需求，讓 Codex 建立可以操作的網頁程式。
實作網站包括：
●攝氏轉華氏溫度
●公分與英吋轉換
●公斤與磅轉換
●公里與英里轉換
●平方公尺與坪數轉換
●公升與美制加侖轉換
這些小程式會讓讀者熟悉「輸入 → 計算 → 顯示結果」的基本模式，也學會如何檢查計算結果、修改功能與改善操作方式。
用 Prompt 把模糊想法變成真正需求
以「旅遊預算工具」為完整實例，從一句模糊的「幫我做一個旅遊工具」開始，逐步加入：
●任務目標
●使用者與使用情境
●交通、住宿、餐飲、購物費用
●總預算
●總支出
●剩餘預算
●超支提醒
●手機操作
●限制條件
●驗收條件
讓讀者真正看到 Prompt 如何一步一步影響 Codex 做出的結果。
看懂 AI 幫你寫了什麼
延續旅遊預算工具，實際讓 Codex：
●找出負責計算的 JavaScript
●用白話解釋程式用途
●將程式拆成「準備資料、整理金額、檢查輸入、計算結果、更新畫面、接收操作」等功能區塊
●分析新增「其他費用」欄位需要修改哪些地方
●判斷哪些程式其實不需要修改
讓完全沒有程式背景的讀者，也能逐步從「完全看不懂」進入「大概知道 AI 在做什麼」。
打造真正可以公開的網站
完整製作一個「個人作品與專業形象網站」，內容包括：
●首頁主視覺
●關於我
●專業領域
●代表作品
●演講與活動
●聯絡方式
●圖片與書封
●超連結與按鈕
●聯絡表單
●桌面與手機版面
●Vercel 部署與公開網址
不只「把網站做出來」，還真正學會修改、測試、重新部署與分享。
同時還提供更多網站第一版實例：
●AI 顧問工作室官網
●「午後咖啡」咖啡館介紹網站
●新疆旅行紀錄網站
●「生成式 AI 入門講座」活動網站
讓讀者可以把同一套 Vibe Coding 方法延伸到公司、工作室、餐廳、旅遊與課程網站。
用 Codex 整理真正的銷售資料
不再只是做網頁，而是直接處理一份真實風格的 sales.csv。實作內容包括：
●讀取 CSV
●檢查欄位與資料筆數
●找出日期格式不一致
●找出商品名稱空白與不同寫法
●處理單價混入「元」
●找出數量空白與負數
●找出業務欄位空白
●找出疑似重複交易
●新增銷售金額
●計算商品、類別、業務與每日銷售額
●找出排行
●產生圖表
●匯出整理後 CSV
●匯出 Excel 分析成果
這一章讓讀者體驗：Vibe Coding 不只是做網站，也能處理日常工作中的資料整理與分析。
用 Codex 做真正可以玩的遊戲
遊戲實作從簡單到複雜，逐步加入動畫、控制、碰撞、分數、生命與遊戲狀態。三個主要完整實作：
1.幸運滾輪盤
2.保齡球遊戲
3.太空射擊遊戲
其中會實際處理：
●隨機結果
●輪盤旋轉與減速
●保齡球方向與移動
●球與球瓶碰撞
●球瓶連鎖倒下
●投球控制
●分數計算
●玩家太空船控制
●發射子彈
●敵人出現
●子彈與敵人碰撞
●生命值
●遊戲結束
●難度逐步提高
另外還提供 5 個可直接延伸的遊戲專案：
1.打地鼠
2.貪食蛇
3.打磚塊
4.飛行障礙遊戲
5.賽車遊戲
讓讀者知道，一套互動、動畫、碰撞與狀態控制的觀念，可以延伸成很多不同遊戲。
製作 AI 換臉與本機圖像工具
建立完整的「AI 換臉工作室」，從：
●上傳來源照片
●上傳參考照片
●拖曳上傳
●圖片預覽
●執行換臉
●顯示處理結果
●下載圖片
一路做到真正的換臉模組，並學會只修改圖像處理邏輯，而不破壞原本介面。
另外還有多個不需要 API Key、可以直接使用本機套件完成的圖像工具：
●圖片自動去背
●自動偵測與標示人臉
●顯示人臉數量與臉部關鍵點
●人臉模糊
●人臉馬賽克
讓讀者了解，AI 圖像應用並不一定都要使用付費雲端服務。
自己打造 AI 繪圖工作室
從零建立「AI 繪圖工作室」，先完成操作介面，再真正串接 OpenAI Image API。實作包括：
●Prompt 文字輸入
●圖片生成按鈕
●生成狀態提示
●AI 圖片顯示
●重新生成
●圖片下載
●API Key
●.env
●後端安全讀取 API Key
●API 錯誤處理
再進一步加入完整繪圖設定：
●正方形、橫式、直式比例
●快速、標準、高品質、自動品質
●一般背景與透明背景
●PNG、JPEG、WebP 圖片格式
真正從「用 AI 畫圖」走到「自己做一套 AI 繪圖程式」。
再做 3 種 AI 圖片編輯程式
除了文字生成圖片，還進一步建立不同用途的 OpenAI 圖像 API 專案：
●AI 背景替換：保留人物，將背景改成海邊、城市、森林或其他場景
●人物服裝與造型修改：例如把休閒服改成西裝、晚禮服、運動服，或加入帽子與眼鏡
●圖像風格轉換：將普通照片轉成漫畫、插畫、水彩、3D 公仔或復古海報
讓讀者從「生成新圖片」進一步學會「上傳原圖，再讓 AI 修改圖片」。
建立自己的 Codex Skill
當一些要求開始重複出現，就把它們變成可重複使用的 Skill。書中會實際建立：
●web-project-style：網站風格、手機版、程式結構與測試規則
●secure-api-project：API Key、.env、後端呼叫與安全規則
●data-processing-rules：資料整理、保留原始檔與輸出規則
●image-project-rules：圖片上傳、預覽、處理、下載與錯誤訊息規則
還會實際比較「使用 Skill 前」與「使用 Skill 後」建立的課程介紹網站，觀察 Skill 是否真的會影響 Codex 的工作方式。
練習真正的程式除錯
書中特別準備一個故意有問題的旅遊預算網頁專案，讓 Codex 實際處理：
●JavaScript 語法錯誤
●按鈕沒有反應
●計算邏輯錯誤
不是直接叫 AI 全部重寫，而是實際練習：
●先找出所有問題 → 一次修一個 → 修改後測試 → 再處理下一個問題
讓讀者建立真正可重複使用的除錯習慣。
從寫程式進一步理解 AI Agent
當 Codex 開始能夠：
●讀取多個檔案
●修改不同程式
●執行指令
●執行測試
●根據結果繼續修正
●使用工具與 Skill
讀者就會進一步理解，Codex 已經不只是「幫忙產生程式碼」，而是一個可以逐步完成任務的 AI Agent，或是稱Coding Agent。
最後，建立自己的 Vibe Coding 工作方式
全書最後不再增加新的技術，而是把前面所有經驗整理成一套真正可以反覆使用的方法：
●找到需求 → 拆成小任務 → 建立第一版 → 測試 → 修改 → 保留正常版本 → 繼續擴充
從此之後，面對新的生活、工作或學習需求，不再只是問：
●有沒有現成的工具？
而是開始思考：
●這個需求，我能不能用 AI 自己做出來？
作者簡介：
洪錦魁
作者序
從想法開始，把作品做出來
從想法開始，把作品做出來
目錄
第1章 什麼是Vibe Coding
第1章 什麼是Vibe Coding
收藏
二手徵求有驚喜
2026專利防護中