AI Course · 課程大綱

AI 時代的創造力
從零到一,打造你的第一個 AI 作品

帶領非技術背景的初學者,用 AI 工具一步步完成真實專案。不需要會寫程式,只需要有想法。

5 堂課 17 個真實專案 零程式基礎 Claude Code
Positioning · 課程定位

為誰設計?學什麼?做什麼?

目標學員
有想法,沒技術
醫師、創業者、專業工作者 — 想把腦中的點子變成可用的工具
核心理念
自然語言寫程式
不教程式語法,教你如何用中文指揮 AI 幫你寫出完整的應用程式
最終成果
一個可上線的作品
每位學員完成一個有自己網址、可以分享給全世界的個人專案
Learning Path · 學習路徑

漸進式五堂課

每堂課建立在前一堂的基礎上,從觀念到產品,穩步前進。

Lesson 1
觀念建立
AI 能做什麼
Lesson 2
全局架構
第一個網頁上線
Lesson 3
資料庫
有記憶的應用
Lesson 4
AI 整合
作品會思考
Lesson 5
完整產品
從專案到產品
Curriculum · 課程內容

五堂課,完整學習旅程

點擊展開每堂課的詳細內容與練習專案。

01
觀念篇
AI 能幫你做什麼?
在你動手之前,先建立正確的期待與判斷力。

課程內容

  • AI 程式開發的現況:什麼可以做、什麼還不行
  • Vibe Coding 是什麼?用自然語言寫程式的時代
  • 工具介紹:Claude Code vs ChatGPT — 怎麼選?
  • 實際案例展示:這些都是「不會寫程式的人」做出來的

展示專案

專案說明複雜度
GNZ BIOSCIENCE一頁式品牌官網入門
劉老師的手作坊手作工坊形象網站入門
Sleep睡眠科學知識平台(多頁式)初級
02
全局架構
從寫程式到上線
一頁看懂網站開發的五個核心環節,建立完整的心智地圖。

課程內容

  • 全局架構圖:開發 → GitHub → Zeabur → GoDaddy → 使用者
  • 每個環節的角色:誰負責什麼?
  • 環境設定:安裝 Claude Code
  • 第一次對話:用自然語言描述你想要的網站
  • 即時預覽:看到你的指令變成真實畫面
  • 部署上線:用 Zeabur 一鍵部署,取得你的專屬網址
查看架構圖教材 →

練習專案

專案說明學到什麼
個人品牌頁面一頁式自我介紹網站HTML/CSS 基礎、部署流程
WCA_BMC商業模式圖產生器互動元件、表單輸入、PDF 匯出
WCA_BMC_finance診所財務模擬器數據視覺化、計算邏輯
Numerology數字配對計算工具使用者登入、資料庫儲存
03
進階實作
加入資料庫與後端
從「靜態頁面」升級到「有記憶的應用程式」。

課程內容

  • 什麼是前端、後端、資料庫?用白話解釋
  • 使用者系統:註冊、登入、權限管理
  • 資料庫:讓你的應用程式「記住」東西
  • API 串接:讓你的網站連結外部服務

練習專案

專案說明學到什麼
BNI_submit活動簽到管理系統表單提交、資料儲存
Connectome人脈管理平台使用者系統、Supabase 雲端資料庫
AAMA_global_map全球會員地圖地圖視覺化、MongoDB
Startup_Sorting_Hat新創分類工具Next.js 框架、互動 UI
04
AI 整合
讓你的作品會「思考」
最關鍵的一步 — 把 AI 能力嵌入你的應用程式。

課程內容

  • Claude API 入門:什麼是 API?怎麼呼叫?
  • Prompt Engineering:如何寫出好的指令讓 AI 產出好結果
  • 實際應用模式:分類、分析、生成、摘要
  • 成本與風險:Token 計算、錯誤處理、安全考量

練習專案

專案說明AI 應用模式
BNI_referral引薦分類判斷工具AI 規則判斷(分類)
BNI_9_grid產業九宮格產生器AI 產業分析(生成)
BNI_edu教育簡報自動生成AI 研究 + 內容生成(複合)
05
完整產品
從專案到產品
把你的作品變成一個真正可用的產品。

課程內容

  • 產品思維:從「能動」到「好用」
  • 全端架構:前端 + 後端 + 資料庫 + AI 的完整串接
  • 會員系統、email 通知、管理後台
  • 部署與維運:域名設定、環境變數、監控

展示專案

專案說明產品特色
DSO_Location診所選點評估工具多 API 整合、AI 報告生成、地圖視覺化
WCA_websiteWCA 官方網站CMS 後台、會員系統、email 整合、課程管理
BNI_Hua_Medical會員管理 + 地圖 App多應用架構、權限管理、PostgreSQL
Toolchain · 工具鏈

你會用到的工具

Claude Code
AI 程式開發主力工具
Zeabur
一鍵部署平台
GitHub
程式碼版本管理
Supabase
雲端資料庫
Project Index · 專案索引

17 個真實專案,完整對照表

每一個都是 Casper 醫師在經營診所、社群、加速器過程中,用 AI 工具實際打造的。

# 專案 技術棧 AI 功能 課程
01劉老師的手作坊HTMLLesson 1
02GNZ BIOSCIENCEHTMLLesson 1
03SleepHTML + JSLesson 1
04WCA_BMCReact + ViteLesson 2
05WCA_BMC_financeHTML + JSLesson 2
06NumerologyExpress + SQLiteLesson 2
07BNI_submitNode.jsLesson 3
08ConnectomeNext.js + SupabaseLesson 3
09AAMA_global_mapExpress + MongoDBLesson 3
10CC_TPE_1HTML + LeafletLesson 3
11Startup_Sorting_HatNext.jsLesson 3
12BNI_referralFlask + Claude API分類判斷Lesson 4
13BNI_9_gridExpress + Claude API產業分析Lesson 4
14BNI_eduFlask + Claude API內容生成Lesson 4
15DSO_LocationReact + Node + Claude報告生成Lesson 5
16WCA_websiteNext.js + Payload CMS多功能整合Lesson 5
17BNI_Hua_MedicalFastify + React + PGLesson 5