The Ultimate Beginner’s Guide to Vibe Coding (Replit)
三句話摘要
用 AI 代碼生成工具（Replit）無碼快速構建網站、應用、在線商店與遊戲的完整實戰指南。 無需編碼、用自然語言幾分鐘內就能構建生產級應用（網站、應用、商店、遊戲），真實支援使用者認證與支付整合，徹底改變了應用開發的進入門檻。 規劃優先於編碼：開啟 Plan 模式讓 AI 先映照應用的完整架構、資料庫設計與元件配置，在生成前逐一審核，避免後續返工修改。
重點整理
重點- 1
規劃優先於編碼：開啟 Plan 模式讓 AI 先映照應用的完整架構、資料庫設計與元件配置，在生成前逐一審核，避免後續返工修改。
- 2
用業務敍述取代功能清單：不是說「加一個五行導航欄」，而是完整描述你的生意在做什麼，讓 AI 自動推導必需功能和設計。
- 3
真實應用的隱形分界線：必須在提示詞中明確加入「每個使用者只能看到自己的資料」，否則所有新用戶都會互相看到彼此的訊息，這是演示與實用應用的本質差異。
- 4
迭代而非宿命：首次輸出只是起點，可用後續提示詞反覆微調設計、排版或功能，逐步逼近理想狀態，不必被第一版鎖死。
實用技巧與重點
乾貨- 工具：Replit（搭載 Agent 4 引擎）
- 核心設定：
- Plan Toggle：前置規劃模式
- Agent Mode：Economy（成本最優、速度品質均衡）
- App Testing：預設開啟、自動測試
- 內建整合：Gmail、Discord、Google Calendar、Docs、Drive、Sheets、GitHub、Shopify
- 設計迭代工具：Canvas 功能同時生成多個設計方向供對比選擇
- 四條核心法則：
- 每次都開啟 Plan Mode
- 保持 Economy 模式，無特殊需求勿升級
- 用真實瀏覽器標籤測試（非模擬環境）
- 用後續提示詞迭代，首次輸出非終點
結論
結論“無需編碼、用自然語言幾分鐘內就能構建生產級應用（網站、應用、商店、遊戲），真實支援使用者認證與支付整合，徹底改變了應用開發的進入門檻。”
完整解析
詳細Vibecoding 這個概念在網路上到處流行，但大多數教學影片只展示激動人心的部分——輸入提示詞、看著應用憑空出現——然後就停止。它們從未說明如何把一個看起來亮麗的演示變成真正能營運的生意。這支影片要展示全貌。
講者用 Replit 這個 AI 代碼平台來示範。它不只是應用構建器，而是一個多功能系統，能建網站、行動應用、設計工具、試算表、投影片、文件、動畫、數據視覺化、3D 遊戲——全在同一瀏覽器頁籤內完成「規劃→代碼→託管→取得實時連結」的全流程。
第一個案例是為特種咖啡烘焙廠 Ember and Oak 構建官網。開啟 Plan 模式、選 Economy 代理、寫提示詞時完整描述業務（我們是誰、賣什麼、網站要做什麼），AI 先映照頁面架構、組件、色彩與字體。用戶審核後開始構建。期間可用 Canvas 功能同時檢視三種設計方向，選最符合品牌的版本。一個提示詞加迭代後，真正活的官網就上線了。
第二個案例是構建健身紀錄應用，這是多數教學跳過的部分。需要真實使用者帳戶、登入機制、資料持久化。最關鍵的細節是在提示詞明確說「每個使用者只能看到自己的資料」，否則所有帳戶都會互相看到彼此的紀錄。同樣三步流程，一個能在行動裝置上運作的真實應用誕生——使用者隔離、紀錄追蹤，全自動完成。
第三個案例進階到商業層面：構建接受真實支付的在線商店。AI 先設計店面流程，再由使用者連接 Shopify 帳戶（平台內建整合），AI 完成購物車與結帳。結果是真正的店面，能收真實訂單、真實金款。這代表從「構建應用」升級到「構建賺錢生意」的轉變。
最後是 3D 無盡跑酷遊戲，展示平台極限。玩家自動向前、躲避障礙、累積分數。一個簡潔提示詞就夠。講者再用後續提示詞加入雙人同屏對戰（方向鍵 vs WASD），遊戲從單人變雙人。
視頻歸納四條核心法則：開啟 Plan 模式讓 AI 先規劃、保持 Economy 模式不必要不升級、用真實瀏覽器測試、用後續提示詞迭代改進。
關鍵時刻
Pipeline v2帶時間戳的重點，會在逐字稿層級分析上線後產生。目前請先透過原始影片觀看。
事實查核
Pipeline v2說法查證是下一次管線升級的一部分。KeyFrame 只會顯示它真正能驗證的內容。
