用 Vibe Coding 打造自己的個人網站
我們把整個流程梳理一遍，用清晰的條列式呈現，讓我們能跟著節奏一步步用 Vibe Coding 打造自己的個人網站。 🎯 什麼是 Vibe Coding？ 這是 2025 年開始流行的開發模式：你負責描述「想要什麼」，AI 負責生成程式碼。你不用記語法，但要學會怎麼跟 AI 溝通需求、審視成果，像個製作人一樣引導專案方向。 🗺️ 四階段建站攻略（條列版） 1️⃣ 準備心態與工具 · 心態調整：拋開「一次到位」的完美主義，擁抱「快速疊代」。先求有，再求好。 · 推薦工具： · 首選整合型 IDE：Cursor 或 Windsurf（AI 深度整合，可自動編輯檔案） · 輕量入門：ChatGPT、Google Gemini 或 Claude（直接對話生成程式碼） · 輔助工具：v0.dev（生成 React 元件）、Perplexity（查技術問題） 2️⃣ 挑選你的技術路線 根據你的目標和技術背景，選擇一條路起步： · 路線 A：標準部落格／作品集 · 適合誰：想寫文章、展示作品、重視 SEO 和外觀自訂 · 核心技術：Next.js（React 框架） + Tailwind CSS（樣式） + 可選 Ghost CMS（內容後台） · 優點：彈性大、SEO 友善、社群資源豐富 · 需留意：需稍微理解前後端渲染（SSR／CSR）概念 · 路線 B：極簡上線／單頁式工具 · 適合誰：只想快速有個個人頁面，或做個小工具 · 核心技術：純 HTML／CSS／JavaScript，部署在 Vercel 或 GitHub Pages · 優點：門檻極低、部署免費、AI 生成準確率高 · 需留意：後續若要新增複雜功能，可能要重構 如果你是新手，強烈建議從 路線 B 開始，成功上線建立信心後再挑戰路線 A。 3️⃣ 動手實作：跟 AI 協作的節奏 這是最關鍵的部分，記得循序漸進，一次只加一個功能。 🧱 第一步：建立骨架 給 AI 一個非常具體的初始指令，包含頁面結構、風格和技術限制。 Prompt 範例： 「請幫我生成一個個人網站的 HTML 程式碼。它是一個單頁式網站，需要有『關於我』、『作品集』、『聯...