帶領非技術背景的初學者,用 AI 工具一步步完成真實專案。不需要會寫程式,只需要有想法。
每堂課建立在前一堂的基礎上,從觀念到產品,穩步前進。
點擊展開每堂課的詳細內容與練習專案。
| 專案 | 說明 | 複雜度 |
|---|---|---|
| GNZ BIOSCIENCE | 一頁式品牌官網 | 入門 |
| 劉老師的手作坊 | 手作工坊形象網站 | 入門 |
| Sleep | 睡眠科學知識平台(多頁式) | 初級 |
| 專案 | 說明 | 學到什麼 |
|---|---|---|
| 個人品牌頁面 | 一頁式自我介紹網站 | HTML/CSS 基礎、部署流程 |
| WCA_BMC | 商業模式圖產生器 | 互動元件、表單輸入、PDF 匯出 |
| WCA_BMC_finance | 診所財務模擬器 | 數據視覺化、計算邏輯 |
| Numerology | 數字配對計算工具 | 使用者登入、資料庫儲存 |
| 專案 | 說明 | 學到什麼 |
|---|---|---|
| BNI_submit | 活動簽到管理系統 | 表單提交、資料儲存 |
| Connectome | 人脈管理平台 | 使用者系統、Supabase 雲端資料庫 |
| AAMA_global_map | 全球會員地圖 | 地圖視覺化、MongoDB |
| Startup_Sorting_Hat | 新創分類工具 | Next.js 框架、互動 UI |
| 專案 | 說明 | AI 應用模式 |
|---|---|---|
| BNI_referral | 引薦分類判斷工具 | AI 規則判斷(分類) |
| BNI_9_grid | 產業九宮格產生器 | AI 產業分析(生成) |
| BNI_edu | 教育簡報自動生成 | AI 研究 + 內容生成(複合) |
| 專案 | 說明 | 產品特色 |
|---|---|---|
| DSO_Location | 診所選點評估工具 | 多 API 整合、AI 報告生成、地圖視覺化 |
| WCA_website | WCA 官方網站 | CMS 後台、會員系統、email 整合、課程管理 |
| BNI_Hua_Medical | 會員管理 + 地圖 App | 多應用架構、權限管理、PostgreSQL |
每一個都是 Casper 醫師在經營診所、社群、加速器過程中,用 AI 工具實際打造的。
| # | 專案 | 技術棧 | AI 功能 | 課程 |
|---|---|---|---|---|
| 01 | 劉老師的手作坊 | HTML | — | Lesson 1 |
| 02 | GNZ BIOSCIENCE | HTML | — | Lesson 1 |
| 03 | Sleep | HTML + JS | — | Lesson 1 |
| 04 | WCA_BMC | React + Vite | — | Lesson 2 |
| 05 | WCA_BMC_finance | HTML + JS | — | Lesson 2 |
| 06 | Numerology | Express + SQLite | — | Lesson 2 |
| 07 | BNI_submit | Node.js | — | Lesson 3 |
| 08 | Connectome | Next.js + Supabase | — | Lesson 3 |
| 09 | AAMA_global_map | Express + MongoDB | — | Lesson 3 |
| 10 | CC_TPE_1 | HTML + Leaflet | — | Lesson 3 |
| 11 | Startup_Sorting_Hat | Next.js | — | Lesson 3 |
| 12 | BNI_referral | Flask + Claude API | 分類判斷 | Lesson 4 |
| 13 | BNI_9_grid | Express + Claude API | 產業分析 | Lesson 4 |
| 14 | BNI_edu | Flask + Claude API | 內容生成 | Lesson 4 |
| 15 | DSO_Location | React + Node + Claude | 報告生成 | Lesson 5 |
| 16 | WCA_website | Next.js + Payload CMS | 多功能整合 | Lesson 5 |
| 17 | BNI_Hua_Medical | Fastify + React + PG | — | Lesson 5 |