---
# System prepended metadata

title: Vibe Coding+Replit平台  書籍提案大綱

---

# 書名：《小學生都懂的 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 使用者

---
