# 書名：《小學生都懂的 Vibe Coding：Replit 讓你多種願望一次滿足！》 > 不用安裝、直接部屬，AI陪你一起開發6個實用專案！ --- ## Ch01 Replit × Vibe Coding：邊寫邊上線的魔法教室 專案類型：Replit 基礎認識與實作流程 使用技術：帳號註冊、Ghostwriter、預覽與部署 Replit App 類型：Auto（自動判斷） ### 1-1 什麼是 Vibe Coding？ ### 1-2 認識 Replit 與帳號註冊 ### 1-3 Ghostwriter AI 助手介紹 ### 1-4 從 Hello World 到部署第一個應用 --- ## Ch02 打造個人網頁名片 專案主題：建立個人簡介網站 使用技術：HTML / CSS / JS Replit App 類型：Web app (Python) ### 2-1 建立你的第一個 HTML 頁面 ### 2-2 用 CSS 美化你的網頁 ### 2-3 用 AI 幫你產出內容與樣式 ### 2-4 部署並分享你的作品集網站 --- ## Ch03 畫畫小畫家（p5.js） 專案主題：互動式塗鴉小工具 使用技術：p5.js（JavaScript 視覺化框架） Replit App 類型：Web app (Python) 或 Auto ### 3-1 認識 p5.js 與畫布控制 ### 3-2 滑鼠繪圖與筆刷切換功能 ### 3-3 儲存畫布成圖片 ### 3-4 自訂工具列與顏色選擇器 --- ## Ch04 小貓追球 3D 遊戲 專案主題：製作簡單 3D 遊戲畫面 使用技術：Three.js + JavaScript Replit App 類型：3D game ### 4-1 認識 Three.js 與基本 3D 場景建立 ### 4-2 加入角色控制與物件碰撞 ### 4-3 計分與倒數系統設計 ### 4-4 部署分享你的 3D 小遊戲 --- ## Ch05 冰箱記帳王（資料小系統） 專案主題：表單輸入與資料儲存應用 使用技術：Python + Flask Replit App 類型：Web app (Python) ### 5-1 建立 Flask 專案與前端表單 ### 5-2 儲存與顯示冰箱物品清單 ### 5-3 新增與刪除功能的程式設計 ### 5-4 打包成實用的線上記帳工具 --- ## Ch06 成績分析圖表機 專案主題：互動式資料視覺化 使用技術：Python + Streamlit + Chart.js Replit App 類型：Interactive data app ### 6-1 建立成績輸入與儲存表單 ### 6-2 使用 Chart.js 繪製圖表 ### 6-3 Streamlit 視覺化整合介面 ### 6-4 上傳 CSV 並進行分析比較 --- ## Ch07 每日知識挑戰（React + API） 專案主題：從公開 API 抓取問答題，做成每日問答小工具 使用技術：React + JavaScript + Open Trivia API Replit App 類型：Modern web app ### 7-1 使用 fetch 從 Open Trivia DB 抓取題目 ### 7-2 建立題目卡元件與選項互動 ### 7-3 顯示解答與計分統計 ### 7-4 延伸功能：分類、難度、每日記錄 --- ## Ch08 Vibe Coding 的倫理與公平 專案主題：探討 AI 協作開發背後的社會責任 使用技術：討論與反思（無程式實作） Replit App 類型：無 ### 8-1 AI 協作的著作權與責任 ### 8-2 教育現場的使用界線與風險 ### 8-3 AI 偏見與資訊安全問題 ### 8-4 成為有責任感的 Vibe Coding 使用者 ---