AI Coding 無痛上手 - 專為 AI 時代設計的開發方法論

十月硬實力升級👻🥊 10/27 前領券 HMKT261088 再打 88 折！

課程單元規劃

章節一｜AI Coding 新時代:你不是打字員,而是架構師

（章節概要）在動手寫任何一行程式之前,先換一顆腦袋。這一章不教你打字,而是帶你看懂「一個 AI 產品到底由哪些東西組成」,並交給你一套能用一輩子的方法論——把腦中的想法畫成積木流程圖,再用白話串成指令丟給 AI。當別人還在跟 AI 來回鬼打牆,你已經像架構師一樣,清楚知道每一塊積木該放在哪、為什麼。最後我們會一起把開發環境(含 Claude Code)裝好,讓你準備好開始蓋東西。

🎯 學習目標

• 理解「架構師思維」與「打字員思維」的差別,看懂 AI 產品的整體架構
• 學會用 12 個積木 + 4 分區定位圖
• 使用 Prompt 五問，把模糊需求整理成清楚、可驗收的任務
• 掌握積木架構法的核心方法論
• 掌握「顆粒度判斷」，知道一次該讓 AI 修改多少範圍
• 完成程式編輯器與 Claude Code 開發環境的建置

🧰 你將可以獲得

• 一張屬於你的「12 積木定位圖」,日後任何專案都能拿來拆解、定位
• 一套可重複使用的 prompt 框架,把模糊想法變成清楚指令
• 一個裝好、可立即開工的 AI Coding 開發環境

章節二｜展示積木：見證應用網站的誕生

（章節概要）這一章你會做出人生第一個「丟得出去、別人點得進來」的網站，而且當天就上線。我們先從最單純的 HTML、CSS、JavaScript 網頁開始，讓你看懂畫面、樣式與互動各自扮演什麼角色；接著進入本課程主要使用的 Next.js，認識網站骨架與資料夾結構，用 AI 生成畫面、調整 UI，再學會像專業工程師一樣存檔（Git）、把作品一鍵部署到網路上。重點不是做個無聊的個人介紹頁，而是做一個朋友會想玩、你會想分享的互動小作品——成就感與掌控感，從第一個網址就建立起來。

🎯 學習目標🎯 學習目標

• 認識「展示積木」：網頁畫面是怎麼組成的（白話版，看得懂）
• 用 AI 生成第一個網頁畫面，並做出多種風格的 UI 設計與微調
• 看懂 Next.js App Router 的基本資料夾結構
• 學會用 Git 存檔、上傳 GitHub，並用 Vercel 一鍵部署（全程不用背指令）
• 完成一個可公開分享的互動小作品

🧰 你將可以獲得

• 你的第一個公開網址：一個由自己規劃、由 AI 協助完成的作品集網站或互動小工具
• 一套「存檔 → 上傳 → 上線」的標準流程，後面每一章都用得到
• 完整可修改的Next.js專案，能繼續長成你自己的版本

章節三｜加入邏輯和 AI 積木：讓網頁會思考

（章節概要）會畫面還不夠，這一章要讓你的網站「會思考」。我們會解釋為什麼 AI 的金鑰不能直接放在前端，接著我們會在已經建立好的 Next.js 專案中，加入邏輯積木（後端 API Route），讓前端不再只會在瀏覽器內運作，而是能安全地呼叫 AI、處理資料與回傳結果。你會親手做出第一個後端 API，讓畫面能跟 OpenAI 對話，最後做出一個真正能用的 AI 小工具並上線。從這一章開始，你交出去的不再是靜態網頁，而是會幫人做事的 AI 產品。

🎯 學習目標

• 理解 AI 積木怎麼跟 OpenAI 說話，以及為什麼不能放在展示層
• 認識邏輯積木（中間人），做出第一個後端 API route
• 用 AI 完成前後端串接，讓畫面能即時跟 AI 對話
• 學會把帶有 API 金鑰的 Next.js 專案安全部署上線

🧰 你將可以獲得

• 一個可以輸入職缺、由 AI 出題與提供回饋的 AI 面試模擬器
• 第一個全端的實作經驗和部署

章節四｜加入記憶、身份與檔案積木：從工具變成系統

（章節概要）目前你的作品一重新整理，資料可能就消失，也不知道使用者是誰，更無法永久保存他上傳的圖片或 PDF。這一章一次補齊產品最重要的三種能力：用 MongoDB 記住資料、用註冊登入認出使用者，以及用雲端檔案空間保存圖片與文件。你會從第一筆資料開始，逐步完成資料架構、CRUD、使用者權限與檔案串接，最後做出多人智能記帳本與合約審查小幫手。

🎯 學習目標

• 理解記憶積木的概念，理解 SQL／NoSQL 的差異，以及本課程為什麼使用 MongoDB
• 建立免費雲端資料庫（MongoDB Atlas），用 AI 白話寫出資料庫架構（Schema／Model）
• 用 AI 寫出對資料增刪查改（CRUD）的 API
• 認識身份積木與原理，完成登入機制
• 認識檔案積木，讓 AI 能讀取使用者上傳/存入的 PDF / 圖片
• 將檔案網址、使用者身份與資料庫紀錄串接起來

🧰 你將可以獲得

• 一個有登入、每位使用者只能看到自己資料的多人智能記帳本
• 一個能上傳 PDF、保存檔案並交由 AI 分析的合約審查小幫手
• 一套「資料庫＋登入＋檔案儲存」的完整產品骨架

章節五｜加入連線與爬蟲積木：跟世界拿資料

（章節概要）真正強大的產品，不會只使用自己資料庫裡的資訊。這一章教你的網站伸手到外面的世界：閱讀 API 文件、取得股價、新聞與其他結構化資料；當網站沒有提供 API 時，也會認識如何用簡單爬蟲取得公開內容，以及使用爬蟲時應注意的規則。最後，我們把外部資料、AI、展示與記憶積木組合起來，打造股票摘要網站。

🎯 學習目標

• 理解連線積木的本質，以及理解外部 API 的請求、參數、驗證與回傳格式
• 串接外部API來取得其他應用程式的結構化資料
• 學會簡單的網頁爬蟲，取得網路上的公開資料
• 將外部資料結合邏輯、AI、展示與記憶積木

🧰 你將可以獲得

• 一個能取得股價與新聞資料、整理並產生 AI 摘要的股票摘要網站

章節六｜加入排程與通知積木：讓系統自己跑

（章節概要）最理想的工具，是你睡覺時它還在幫你工作。這一章幫系統裝上「自己動」與「主動通知」的能力——用觸發積木設定定時任務，用通知積木把結果推到你的 Email 。你會把前一章的連線能力和這章的自動化串起來，做出一個每天早上自動幫你整理好資訊、主動送到你面前的系統。讓 AI 幫你做事，你只需要做決策。

🎯 學習目標

• 理解自動化的價值：不需要前端，系統也能持續幫你產出
• 用排程積木設定定時自動執行的任務
• 用通知積木把結果透過 Email 主動推播
• 將連線 + 自動化串接成一條完整的自動流程

🧰 你將可以獲得

• 一個每天自動爬新聞、股價、天氣、AI 摘要、推播到信箱的「AI郵件秘書」
• 把多塊積木串成全自動流程的實作經驗

章節七｜從 Demo 到產品：AI Coding 的最佳實踐

（章節概要）積木都學會了，但擁有工具，不代表每次都能順利做出產品。這一章不再加入新技術，而是回頭整理整套 AI Coding 工作方式：怎麼從需求規劃一個 AI SaaS、怎麼把指令講得更精準、怎麼避免 AI 一次修改太多，以及當 AI 開始亂跑、功能壞掉或終端機開錯位置時，如何找到問題並救回專案。這一章會把前面分散的技巧，整理成一套能反覆使用的最佳實踐。

🎯 學習目標

• 回顧 12 個積木及各自負責的能力
• 根據產品需求，判斷需要哪些積木
• 提高 Prompt 的精準度，降低 AI 做錯與亂改的機率
• 建立 AI Debug 的問題定位流程
• 排除常見的資料夾、終端機、Server 與環境錯誤

🧰 你將可以獲得

• 一套從產品構想到實作順序的 SaaS 規劃方式
• 一份 AI Coding 最佳實踐與常見地雷清單
• 一套「描述問題 → 縮小範圍 → 找到原因 → 修正驗收」的 Debug 流程

章節八｜專案實戰武力全開

（章節概要）積木全到齊、方法論也熟了，這一章火力全開，帶你用「功能prompt → 跟 AI 說 → 驗收」的節奏，快速打造多個橫跨不同領域的完整作品。每個專案都是一個能放進作品集，涵蓋職場、行銷、學習、求職等不同場景，讓你的作品集一次充實到位。

🎯 學習目標

• 用所學的全部積木，獨立完成跨領域的完整專案
• 判斷每個階段需要加入哪些積木
• 從使用者需求畫出完整的積木與資料流程
• 累積一份能展示、能對外服務的額外作品集

🧰 你將可以獲得

• 完整專案的拆解流程、Prompt 與實作示範，以及多組可繼續延伸的產品題目
• 專案完整開發：行銷心理測驗名單收集、履歷健檢優化器、AI 英文家教、AI 面試模擬器
• 一份橫跨多領域、立刻能展示的作品集

章節九｜畢業：從學會開發，到做出自己的產品

（章節概要）課程不可能教完世界上每一種功能，但你可以帶走一套面對陌生功能的方法。最後一章不再塞入更多技術，而是教你未來遇到語音輸入、多語系、地圖或任何新服務時，如何先讓 AI 當你的家教，理解原理、比較方案與限制，再把最小版本拆成可實作的步驟。接著我們會回頭整理，在 AI 接手大量程式執行工作後，真正被放大的 10% 能力是什麼；最後，談談如何把你原本的工作經驗與專業，轉化成只屬於你的產品。

🎯 學習目標

• 學會用 AI 自學任何沒做過的積木與新功能
• 掌握 AI Coding 時代最重要的架構、拆解、溝通、驗收與 Debug 能力
• 思考如何把自己的專業、工作流程與真實痛點轉化成產品題目

🧰 你將可以獲得

• 一套「先讓 AI 當家教，再讓 AI 當工程師」的新功能學習法
• 一套不容易被工具汰換的 AI Coding 核心能力
• 一個從自身專業出發、尋找下一個產品題目的思考方式

課程教學方式與內容設計總覽

• 教學方式： 本課程將採用「概念投影片講課」搭配「螢幕側錄實戰操作」。每個核心觀念會先以圖解投影片快速建立基礎，接著直接切換至編輯器與 AI 工具畫面，由老師帶著你一步步下指令、除錯與撰寫程式碼。
• 內容設計： 課程遵循「觀念建立 ➔ 實機操作 ➔ 範例剖析 ➔ 實作練習」的循環。不講冗長的傳統程式理論，而是直接教你「如何用人類語言指揮 AI 寫程式」，並透過每一章節的作業，確保你能真正帶走屬於自己的專案作品。

回覆與作業設計

課堂作業會分成兩個部分：

專案作業

會讓你實際發想以及操作，拆解並堆疊你的程式碼架構，做出實際作品，以截圖或網址的方式呈現在作業中給老師批改和給予回饋，詢問問題會以附上截圖或是公開github，來讓老師去協助查看問題，也可以在專案作業中去詢問老師問題。

相關問題回答

開課前我們會在每個週末統一回覆同學提出的問題；開課後依照課程進度，暫定每兩週回覆 15 則同學關於課程或作業的問題。由於目前只有一位講師，較難在上課人數未定時就給大家確定的回答頻率與回答形式（Hahow回覆 / 社群回覆 / Email），還請各位同學見諒！開課後我們也會再公告給各位同學知道。