精華筆記

新手指南 ／ Vibe Coding 建站實戰

Vibe Coding 建站實戰

Vibe Coding 建站實戰:共 8 課,依序學完就能上手。

適合誰:適合想用 AI 做出自己的網站,但也想懂基本資安和部署的人。

  1. 01
    Vibe Coding 是什麼:2026 工具地圖與怎麼選

    Vibe Coding 是什麼:2026 工具地圖與怎麼選

    不會寫程式也能做出自己的網站,這就是 vibe coding。這堂課先打好地基:vibe coding 的定義與你的角色、2026 兩大流派(Lovable、Bolt、v0 vs Claude Code、Cursor、Codex)價格與優缺點對照、決策圖選對起點,最後 10 分鐘試駕加環境健檢。

    →
  2. 02
    零安裝做出第一個網站:Lovable 實戰

    零安裝做出第一個網站:Lovable 實戰

    不用安裝任何軟體,打開瀏覽器就能做出真正上線的網站。這堂課用 Lovable 完整實戰:學會「目的+受眾+頁面+風格」的結構化 prompt 一次講清需求、用對話迭代改設計、看懂免費額度的計費邏輯避免卡關,最後一鍵 Publish 拿到能傳給任何人的公開網址,並對照 Bolt 與 v0 的差異。

    →
  3. 03
    升級 Claude Code:在自己電腦做個人品牌網站

    升級 Claude Code:在自己電腦做個人品牌網站

    從瀏覽器工具畢業:搞懂為什麼專案該放在自己電腦(掌控權、不被平台綁定),一步步安裝 Node 與 Claude Code、登入訂閱帳號,然後從零讓 AI 建出一個 Astro 個人品牌網站、在本地預覽,最後讓 AI 帶你讀懂專案結構,跟第 2 課的 Lovable 成果做完整對比。

    →
  4. 04
    部署上線:GitHub + Vercel + 自訂網域

    部署上線:GitHub + Vercel + 自訂網域

    第 3 課做好的網站還只活在你的電腦裡。這堂課把它推上網路:先用三句話搞懂 git(存檔、上傳、歷史),建 GitHub 倉庫、把程式碼推上去,再用 Vercel 一鍵免費部署拿到正式網址,最後綁自訂網域、設好環境變數不外洩金鑰。接好一次,之後每次 push 都自動更新上線。

    →
  5. 05
    迭代改版不炸掉:需求描述術與 CLAUDE.md

    迭代改版不炸掉:需求描述術與 CLAUDE.md

    網站上線後才是改版的開始。這堂課教你安全迭代的完整方法:一次一件事、把驗收條件講在前面的需求描述術;用 CLAUDE.md 讓 AI 永遠記住專案規則;git 三帖後悔藥讓你改壞 3 秒退回;實戰加深色模式與作品集頁,並學會判斷何時該開新對話。

    →
  6. 06
    AI 生成程式的資安坑:你的網站正在裸奔嗎

    AI 生成程式的資安坑:你的網站正在裸奔嗎

    vibe coding 最容易踩的五個資安坑一次講清楚:API key 寫死進前端、資料庫沒開 RLS、XSS、表單只在前端驗證、管理頁沒上鎖。每個坑都給「有漏洞 vs 修好」的程式碼對照,並拆解 EnrichLead、Lovable、Tea、Base44 四起 2025 年真實事故。

    →
  7. 07
    用 Prompt 守住資安:檢查清單與 AI Code Review

    用 Prompt 守住資安:檢查清單與 AI Code Review

    不會讀程式碼也能守住資安:三段可直接複製的掃描 prompt、把資安班規寫進 CLAUDE.md、.env 與 .gitignore 一次設對、上線前 AI code review 流程、key 洩漏的輪替急救 SOP,加上 GitHub 免費掃描工具當最後一道網。

    →
  8. 08
    綜合實戰:做一個作品集網站+聯絡表單,完整走一遍

    綜合實戰:做一個作品集網站+聯絡表單,完整走一遍

    課程最終回:從一張需求清單開始,用 Claude Code 從零做出作品集網站,接上 Formspree 免後端聯絡表單,跑完資安檢查、部署 Vercel、綁自訂網域,不看筆記完整走一遍上線流程。最後總整理全課程 10 大常見坑,以及下一步:AI 自動化與 Claude API。

    →