第一章：專案介紹與 Astro 網站極速建置 (Vibe Coding 實戰)

歡迎來到 「露營官方網站架設」 的 Vibe Coding 實戰課程！ 在這個專案中，我們不會像傳統補習班一樣教你一行一行寫 Code。這是一個**「教你當老闆」**的課程。我們將學習如何指揮 AI (Claude 3.5 / Antigravity)，從零開始打造一個具備現代感、且擁有後台資料庫的超高質感官方網站！

🎯 這章你能學會什麼？

  1. 商業價值：了解 Astro 框架為什麼是架設 SEO 官網的首選，以及如何賣給客戶。
  2. AI 工具選擇：學會挑選最適合前端開發的 LLM 模型。
  3. 精確 Prompt (咒語) 下達：學會用「Vibe Coding SOP」指揮 AI 建置完整的開發環境。
  4. 驗證與除錯：如果 AI 給錯 Code，如何不寫程式就能把錯揪出來。
  5. 部署上線：直接把你的第一個空殼網站推上 GitHub 與 Vercel。

🤖 LLM 平台與工具建議 (Vibe Coding SOP 第一步)

要做好 Vibe Coding，選對工具佔了 80% 的成功率。 對於前端網頁開發，目前業界的黃金組合是：

  • 編輯器：推薦使用 VSCode、Cursor 或是 Antigravity (內建 AI 輔助的強大程式編輯器)。
  • AI 模型 (Model)：強烈建議切換到 Claude Sonnet 4.6、Claude Opus 4.7，或是 Gemini Flash / Gemini Pro。它們在處理 React 與 UI 刻板時的精準度極高。
  • 開源模型選擇：如果想使用開源模型，可以選擇 OpenRouter 或 SiliconFlow 平台，並使用裡面的 DeepSeek v4 Flash 或 DeepSeek v4 Pro。

[!TIP] Vibe 思維：不要把 AI 當成搜尋引擎，請把它當成你的「資深工程師員工」。

📂 起手式：創建專案與資料夾

  1. 在你的電腦上，打開終端機 (Mac 的 Terminal 或 Windows 的 PowerShell)。
  2. 建立一個乾淨的空資料夾，並進入它：
mkdir camping-official-site
cd camping-official-site
  1. 在終端機輸入 code . 或使用 Cursor 開啟這個資料夾。

💬 神級 Prompt 咒語庫：環境建置

打開 Cursor 右邊的 Chat 視窗 (Cmd/Ctrl + L)，準備下達你的第一道指令！

[!IMPORTANT] 請直接複製以下 Prompt 並發送給 AI：

你現在是一位資深前端架構師。我要在當前目錄下建立一個名為 "not_far_web" 的 Astro 專案。 需求如下： 1. 使用 TypeScript 2. 安裝 Tailwind CSS 與 React 整合 (Integrations) 3. 請給我完整的 npm 建立指令，並詳細說明執行過程中，終端機跳出的互動選項我應該選擇什麼（例如：是否安裝依賴、是否初始化 git）。 4. 請確保指令是最新版本的 Astro 語法。

AI 通常會給你極為精準的回覆。它會請你在終端機執行：

npm create astro@latest not_far_web

當終端機出現互動選項時，請依照 AI (或以下) 的建議選擇：

  • Where should we create your new project? ./not_far_web
  • How would you like to start your new project? Include sample files
  • Install dependencies? Yes
  • Do you plan to write TypeScript? Yes
  • Initialize a new git repository? Yes

接著，為了安裝 Tailwind 與 React，你可以繼續對 AI 下 Prompt：

專案建好了。現在請給我指令，幫我自動安裝並設定好 @astrojs/tailwind 以及 @astrojs/react。

執行 AI 給你的指令 (通常是 npx astro add tailwind react)，遇到詢問一直按 Yes (y) 即可！AI 工具幫我們省去了手動修改設定檔的麻煩。

🛠️ 驗證與除錯 (Debug)

Vibe Coding 最重要的一環就是「驗證」。 在終端機輸入以下指令啟動開發伺服器：

cd not_far_web
npm run dev

打開瀏覽器進入 http://localhost:4321，你應該要看到 Astro 的歡迎畫面。

如果畫面壞掉或終端機噴出紅字錯誤怎麼辦？ 千萬不要自己去 Google！ 請把終端機的紅字錯誤「整段複製」，貼回 AI 對話框：

我在執行 npm run dev 時遇到了以下錯誤，請告訴我是哪裡出了問題，並給出修復指令： [貼上錯誤訊息]

AI 基本上能在 3 秒內幫你解決 99% 的環境相容性問題。

🚀 GitHub 上傳與 Vercel 雲端部署

架站的第一天就要部署！這樣之後每次改動都能立刻看到成果。

  1. 上傳 GitHub： 請在 AI 對話框輸入：

我要把這個專案推送到我剛在 GitHub 建好的空白 Repo，網址是 https://github.com/myname/my-camping-site.git。請給我完整的 git 指令。

AI 會教你依序執行 git add .、git commit -m "Init"、git remote add origin ... 與 git push。

  1. 部署 Vercel：
  • 前往 Vercel 官網，使用 GitHub 登入。
  • 點擊 Add New Project。
  • 匯入你剛剛上傳的 Repo。
  • Framework Preset 選擇 Astro。
  • 點擊 Deploy！

等待 2 分鐘，你的「露營區官網」就正式上線，擁有專屬的網址了！

✅ 本章小結與下一步

你已經掌握了 Vibe Coding 的核心：下達精確規格 -> 驗證成果 -> 遇到錯誤丟回給 AI -> 部署。

在下一章，我們將進入後端核心：Supabase 資料庫的建立與 Schema 設計。我們將教你如何用 Prompt，讓 AI 幫你寫出包含「營區預約、會員資料」的完美關聯式資料庫設計！