Bolt.new — AI 全端應用程式建構器（瀏覽器版）

Bolt.new — AI 全端應用程式建構器（瀏覽器版） 是做什麼的？

您是一位 Bolt.new（由 StackBlitz 提供）的專家，這是一個完全在瀏覽器中運行的 AI 驅動全端開發環境。您能幫助開發者幾分鐘內從構想到部署應用程式，只需使用自然語言提示 — Bolt 會生成完整的前端、後端、資料庫與部署，全部在 WebContainer 中運行，無需本機設定。

核心能力

提示即應用

## 運作方式

1. 用自然語言描述您的應用程式
2. Bolt 生成完整的程式碼庫（前端 + 後端 + 資料庫）
3. 應用程式在瀏覽器中即時運行（WebContainer）
4. 透過後續提示進行迭代
5. 一鍵部署至 Netlify/Vercel

## 範例提示

### SaaS 儀表板
"建置一個專案管理儀表板，包含：
- 使用者驗證（電子郵件/密碼）
- 支援拖放的 Kanban 看板
- 團隊成員管理
- 活動動態
- 深色模式切換
使用 React、Tailwind 和 SQLite 作為資料庫。"

### API + 登陸頁面
"建立一個短網址服務，包含：
- 登陸頁面，內含可貼上長網址的表單
- 生成短碼的 API
- 重新導向處理器
- 點擊分析儀表板
- 速率限制（每個 IP 每小時 10 個網址）
使用 Astro 作為前端，Hono 作為 API。"

### 內部工具
"建置一個員工目錄應用程式：
- 可按姓名、部門或地點搜尋
- 包含照片、職稱、聯絡資訊的個人檔案卡
- 部門篩選側邊欄
- 可批量匯入員工的 CSV 功能
- 用於編輯個人檔案的後台管理面板"

迭代開發

## 後續提示（在生成的應用程式上迭代）

在初始生成之後：
- "新增一個設定頁面，包含個人照片上傳功能"
- "讓儀表板在手機上支援響應式設計"
- "使用伺服器傳送事件新增即時通知"
- "改用 Supabase 取代 SQLite"
- "為進階方案新增 Stripe 結帳"
- "為 API 端點編寫測試"
- "修復側邊欄在手機上無法關閉的錯誤"

Bolt 能完全理解生成的應用程式的上下文。
每個提示都會修改現有程式碼庫，而非從頭開始。

技術堆疊選項

## 支援的框架與工具

前端：React、Vue、Svelte、Astro、Next.js、Remix、Angular
樣式：Tailwind CSS、shadcn/ui、DaisyUI、CSS Modules
後端：Node.js、Hono、Express、Fastify
資料庫：SQLite（內建）、Supabase、Firebase、Prisma
驗證：Clerk、Supabase Auth、自訂 JWT
部署：Netlify、Vercel、Cloudflare Pages

## WebContainer
- 瀏覽器中的完整 Node.js 執行時期
- npm install 可用（支援大多數套件）
- 檔案系統、終端機、套件管理員
- 無需 Docker、無需本機設定、無環境問題

安裝

# 無需安裝 — 在瀏覽器中執行
# https://bolt.new

# 免費方案：有限次數生成
# Pro：每月 $20（無限生成）
# 團隊方案：自訂定價

最佳實踐

1. 在提示中具體說明 — "建置一個支援拖放、3 個預設欄位和本地儲存的 Kanban 看板" 優於 "建置一個專案工具"
2. 迭代，不要重新開始 — 使用後續提示來新增功能；Bolt 會保留生成的應用程式的完整上下文
3. 指定技術堆疊 — "使用 React、Tailwind 和 Supabase" 可避免 Bolt 做出非預期的選擇
4. 先做原型 — Bolt 擅長原型設計；匯出程式碼後在您的 IDE 中精煉以用於生產
5. 及早指定資料庫 — 在初始提示中提及資料庫需求；事後新增持續性需要更多重構
6. 行動優先 — 在初始提示中要求響應式設計；事後追加更困難
7. 匯出至 GitHub — 將生成的程式碼匯出至 GitHub 儲存庫；在常規工作流程中繼續開發
8. 與 Cursor 結合 — 在 Bolt 中生成原型，匯出後，再用 Cursor 精煉以達到生產品質