ELI5 · 新手友好版 · 🇭🇰

用 Vibe Coding 整一個自己嘅網站
——好似同聰明朋友傾偈咁簡單

唔識寫 code？完全冇問題。呢份指南用最簡單嘅廣東話，帶你由零開始，用「Vibe Coding」將你腦海嘅諗法變成一個真正開到嘅網站。🌐

🤔
PART 01

咩係 Vibe Coding？

🍕 一句講晒

Vibe Coding（氛圍編程）就係：你用平時講嘢嘅方式話俾 AI 知你想要咩，AI 幫你寫晒啲 code。你負責「諗」同「驗收」，AI 負責「寫」。

🏗️ 用砌積木嚟打個比方

  • 以前整網站，你要自己逐粒「刻」積木（寫 HTML、CSS、JavaScript），刻錯一粒成幅牆就歪晒。
  • 而家有咗 AI 呢個超級積木工廠，你只要形容你想要嘅城堡：「我想要一座粉紅色、有塔樓、可以放相展覽嘅城堡」。
  • AI 好快幫你起一座出嚟，你睇吓邊度唔滿意，就話：「塔樓再高啲」「換個藍色大門」，佢即刻改。
  • 改到滿意為止，然後將城堡「搬出大街」——即係部署上線，全世界都開到。

🎬 你同 AI 嘅工作迴圈（動態示意）

下面係一個實時面板：睇住「你」發需求 → AI 出第一版 code → 你本地預覽 → 俾意見 → AI 改 → 滿意就 push 上 GitHub → Cloudflare Pages 自動部署上線。呢個迴圈通常要轉幾次，先至有滿意嘅網站。

面板係示意動畫：畫面數字（版本、回合、部署次數）屬模擬示範，唔係你嘅真實數據；面板由 live-panel 製作。

✨ 點解佢咁啱新手？

  • 門檻極低：唔使背語法，識講廣東話／英文就開始得。
  • 回饋超快：幾分鐘就見到網頁效果，唔似以前要搞幾個鐘。
  • 邊做邊學：AI 寫 code 嗰陣會解釋，你睇多咗自然就明。
  • 啱細 project：個人主頁、Blog、作品集、小工具，全部都係佢嘅主場。
🌐
香港用戶留意（VPN 提示）：ChatGPT（OpenAI）、Claude 等服務未有香港地區支援，直接上會連唔到／用唔到。解決方法：① 用 VPN／科學上網（教學見 科學上網雙通道指南）；② 或者直接用香港／內地開到嘅免費 AI（DeepSeek、Kimi、豆包、智譜清言等，見下一個 section）。
🎯 記住一句Vibe Coding 嘅核心唔係「命令 AI」，而係「同 AI 一齊改」：講諗法 → 睇結果 → 俾意見 → 再改。你就是呢個 project 嘅產品經理 + 體驗官。
🗂️
PART 02

動手之前：要準備咩帳號？

整網站就好似開一間小店，開舖前要裝好「水電煤」。下面呢啲帳號就係你嘅基礎設施，大部分都免費，建議提前註冊好（可以用同一個郵箱註冊，慳返唔使記咁多密碼）。

🤖 AI 模型帳號必選

DeepSeek / Kimi / 豆包 —— 香港直接用到嘅免費 AI，做入門練習啱晒。DeepSeek 免費額度足、寫 code 能力好；Kimi 中文好；豆包免費任傾。

🔗 https://chat.deepseek.com🔗 https://www.kimi.com🔗 https://www.doubao.com

想用 ChatGPT／Claude？要開 VPN 先用得到（見 Part 01 VPN 提示）。

💻 雲伺服器 VPS進階 · 可選

Oracle Cloud 免費 VPS 等。想行動態網站（有資料庫、登入功能嗰啲）就要一部「長開嘅電腦」托管佢。Oracle 有永久免費檔，不過註冊繁複啲。純靜態網頁可以跳過，直接用下面嘅部署服務。

🐙 GitHub強烈推薦

Code 嘅「雲端倉庫 + 時光機」。你嘅 project code 放喺度，隨時回帶去之前版本，亦係好多部署服務嘅「貨源地」。免費，註冊 1 分鐘搞掂。

🔗 https://github.com

☁️ Cloudflare強烈推薦

你嘅「舖面 + 速遞員」。用 Cloudflare Pages 免費將網站放上網（自帶網址同 HTTPS），仲可以買平域名（例如 yourname.com）。

🔗 https://dash.cloudflare.com

✈️ Telegram可選 · 但好用

如果你想整「Telegram Bot」小工具就需要佢。另外好多 vibe coding 社群同 AI 機械人都活躍喺 TG，方便搵靈感、問問題。

🔗 https://telegram.org

🛠️ 其他加分項錦上添花

🎨 Figma（畫頁面草圖）；📝 Notion／飛書（整理需求同靈感）。想比較 Cloudflare Pages／Vercel／Netlify 三個免費部署平台？見下面一節。

🚀 部署平台三選一：三個都有免費檔

本站示範用 Cloudflare Pages，不過 Vercel 同 Netlify 一樣可以免費上線。三個都唔需要信用卡、唔需要 VPN，做法同樣係「連 GitHub → 自動 build → 出一個網址」，分別只在免費額度同用途限制。

平台免費檔實際額度要注意
Cloudflare Pages
🔗 https://dash.cloudflare.com		無限帶寬、無限網站；每月 500 次 build；每個網站最多 20,000 個檔案、單檔上限 25 MiB。香港用最順手；免費檔帶寬唔另外收費，靜態站流量大最抵。
Vercel
🔗 https://vercel.com		$0／月（Hobby）：每月 100 GB 流量、1,000,000 次 CDN requests、無限次部署、1 個 developer seat；build 分鐘用基本機器已包。Hobby 只限 個人、非商業用途；免費額度到頂即停，唔可以加購用量（要升級 Pro $20／月）。
Netlify
🔗 https://www.netlify.com		$0 永久（Free）：每月 300 credits 硬上限；自訂域名加 SSL、無限 deploy previews、Functions／Database／Blob 都有，同時 1 個 build。已改為 credit 制：帶寬 20 credits／GB、每次正式部署 15 credits → 300 credits 大約等於 15 GB 流量，或約 20 次上線；到頂即停，唔會意外收費。

點揀？第一次整網站 → 跟本站用 Cloudflare Pages（額度最鬆、香港最順）；已經用 Next.js 或想要獨立 preview 環境 → 試 Vercel；想玩 serverless functions／資料庫 → 睇 Netlify。三個都可以隨時搬走，唔會綁死。

額度資料來源：三個平台官方 pricing／limits 頁，查核日期 2026-10-05；免費政策會變，用之前再確認一次。

💰 慳錢心法新手第一個網站盡量全部用免費檔：AI 免費額度 + GitHub + Cloudflare Pages = 0 蚊上線一個網站，等真係有流量先諗使錢。
🚀
PART 03

點開始？一步一步嚟

🧰 需要識咩技能？

真係唔多，識呢幾樣就夠：

  • 識講清楚需求：將「我想要咩」形容具體啲（顏色、內容、撳個掣會點）。
  • 識複製貼上：將 AI 俾嘅 code 存做檔案，或者貼入佢嘅線上編輯器。
  • 識睇效果俾意見：好似試食蛋糕咁，講一句「太甜／再鬆軟啲」。

加分項（唔識都冇事）：少少英文（AI 對英文 prompt 理解好少少）、基礎 Markdown、知道「檔案／資料夾」嘅概念。

🗣️ 同 AI 溝通嘅 5 條實用技巧

  1. 一次淨係講一件事。唔好一次過要求「改 10 個地方」，一次一個目標，出錯先易搵。
  2. 俾佢睇，而唔係淨係講。截圖俾佢：「呢個掣而家太靠左喇」，比純文字形容準好多。
  3. 講清楚「你係邊個、俾邊個用」。「我係攝影師，想俾客人睇作品」會令 AI 做出完全唔同嘅設計。
  4. 錯咗就貼報錯。網頁開唔到嗰陣，將紅色報錯文字原樣複製俾佢，佢基本上都修到。
  5. 隨時嗌「重嚟」。改壞咗唔使驚，講「返去上一個版本」，或者直接喺編輯器撳還原。

🧩 好用嘅 Prompt 框架

框架唔係玄學，就係「填空模板」。掌握一兩個，你嘅要求會清晰好多：

框架含意例子
P-T-C-F角色 · 任務 · 約束 · 格式「你係一位前端工程師（P），幫我整個個人主頁（T），只用一個 HTML 檔案、手機睇都靚（C），直接俾我完整 code（F）」
R-C-T角色 · 情境 · 任務「你係網頁設計師（R）。我要幫烘焙工作室整展示頁（C）。請生成首頁 code 並解釋每一部分（T）」
改嘢三板斧睇 → 評 → 改「呢個係而家嘅效果截圖（睇）。我覺得標題太細、配色太寡（評）。請將標題放大一倍，轉做暖橙色主題（改）」

由一句想法，行到網站上線

撳任何一步睇詳情；唔滿意可以返轉頭再改。

唔滿意：再生成／再改，通常來回幾次 下次要改內容：由預覽開始 上線成功xxx.pages.dev 1諗清楚想整咩寫低一句需求 2開個 AI 帳號DeepSeek／Kimi／豆包 3發生成 prompt攞第一版 index.html 4本機預覽 + 改版睇效果，再俾意見 5開 GitHub repo上傳網站檔案 6Cloudflare Pages連結 Git，一鍵上線 7（可選）綁靚域名用自己易記嘅網址 8持續更新改完 push，自動再部署 唔滿意：再生成／再改，通常來回幾次 下次要改內容：由預覽開始 上線成功　xxx.pages.dev（由第 6 步上線後取得） 1諗清楚想整咩寫低一句需求 2開個 AI 帳號DeepSeek／Kimi／豆包 3發生成 prompt攞第一版 index.html 4本機預覽 + 改版睇效果，再俾意見 5開 GitHub repo上傳網站檔案 6Cloudflare Pages連結 Git，一鍵上線 7（可選）綁靚域名用自己易記嘅網址 8持續更新改完 push，自動再部署

步驟 1／8

諗清楚想整咩

做咩：寫低你想整嘅網站，一句講清用途同對象。

新手提示：先由細目標開始，例如整一頁介紹自己嘅網站。

大概時間：5–10 分鐘

🪜 新手完整流程（由零到上線）

每步嘅做咩、提示、時間可以撳上面流程圖睇；下面只列圖上冇嘅落手操作。

開 GitHub 帳號＋新 Repo

登入 GitHub → 右上角「+」→ New repository → 填名（例如 my-first-website）→ Create → Uploading an existing file → 揀 index.html → Commit。

🔗 https://github.com

用 Cloudflare Pages 上線

Cloudflare 註冊 → 左邊「Workers & Pages」→ Create → Pages → Connect to Git → 授權 GitHub → 揀 repo → Deploy，之後得到 xxx.pages.dev。

🔗 https://dash.cloudflare.com

（可選）綁靚域名

喺 Cloudflare 或 Namecheap 買個易記域名，喺 Pages 設定度綁定。

📚
PART 04

即用 Prompt 模板庫（複製即用）

下面每個模板都係填返「你嘅 project」就發得俾 AI。頭三個入門必用，後幾個係常見場景，收藏起嚟以後成日用。

🅾️ 通用版開場 prompt（任何網站都用得）複製下面呢段，將括號入面換成你嘅內容，直接發俾 AI：

你係一位資深前端工程師。我要整一個【網站類型，例如：個人作品集】，
目標訪客係【邊個】，風格想要【例如：簡約日系 / 型格暗黑】。
要求：只用 HTML+CSS+JS 寫一個檔案；手機上正常顯示；
包含【部分1】、【部分2】、【部分3】。
請：先俾我整體結構同設計思路（50 字內），
再輸出完整可運行嘅 code，並喺 code 入面用註解標出每個部分。
① 個人主頁

用途：CV / 自我介紹 / 個人品牌

你係一位資深前端工程師。我要整一個【個人主頁】，訪客係【潛在客戶或僱主】，
風格想要【簡約高級、淺色、少少橙色點綴】。
要求：只用 HTML+CSS+JS 一個檔案；手機同電腦都正常顯示；
包含【頂部介紹 + 我嘅作品 + 聯絡方法】。
請先俾我 50 字以內嘅設計思路，再輸出完整 code，關鍵位置寫中文註解。
② 作品集 / 相簿頁

用途：攝影師 / 插畫師 / 手作人展示作品

我想整一個【作品展示頁】，我係【攝影師】，想俾客人睇作品集。
風格：【深色背景、相係主角、卡片式佈局】。
要求：單個 HTML 檔案；撳相可以放大預覽；有「關於我」同「聯絡我」兩個小部分；
相先用 6 張佔位圖，我會自己換。請直接輸出完整 code。
③ 落地頁 / 活動宣傳頁

用途：店舖活動、課程招生、產品預售

幫【我嘅教育機構】整一個【招生落地頁】。
內容包括：課程賣點（3 個）、導師介紹、學生評價（2 條）、報名按鈕同 QR code 位。
風格：【溫暖活潑，啱家長閱讀】，一撳直達報名。
要求：單檔 HTML，手機優先（大部分家長用手機睇），底部留一個「立即報名」按鈕。
請俾我完整 code。
④ 小工具頁（計數 / 打卡 / 清單）

用途：實用小工具，練手首選

整一個【記帳小工具】：可以加一筆收支（金額 + 類別 + 備註），
列表顯示，可以刪除，仲可以計今個月總和。介面要【可愛清爽】。
要求：單檔 HTML+JS，資料存瀏覽器本地（刷新唔會冇）。
請直接俾我完整可運行嘅 code。
⑤ Blog / 文章頁

用途：寫日記、發文章、知識沉澱

我要整【個人 Blog】，寫【美食探店】主題。
佈局：【左邊文章列表，右邊分類標籤】，頂部有 Blog 名同一句簡介。
風格：【日系素雅、米白底、字大啲舒服閱讀】。
先放 3 篇示範文章。要求：單檔 HTML+CSS，內嵌 Markdown 自動排版。
請俾我完整 code。
💡
PART 05

其他超實用嘅小知識

🔁 推薦工作流

  • 小步走：需求便條 → 生成 → 預覽 → 一個一個細改，每步都儲存。
  • Code 托管：GitHub 當倉庫，Cloudflare Pages 當門面，改完自動上線。
  • 多模型交叉驗證：揸唔定嘅 code 可以發俾另一個 AI 審查：「呢段 code 有咩問題？」

❓ 常見問題 FAQ

我完全零基礎，幾耐先整到第一個網站？

如果跟住上面個流程行，一個下晝就上線到一個簡單嘅個人主頁。第一日唔好追求完美，「開到」就係勝利。

AI 寫嘅 code 我睇唔明，使唔使學寫 code？

唔使住。先做幾個 project，遇到邊忽唔明就撳住問 AI「呢段做咩㗎？」，實戰入面慢慢明，比由教科書開始高效得多。

喺香港用 ChatGPT／Claude 點解用唔到？

因為 OpenAI 同 Anthropic 未有香港地區支援，會 block 香港 IP；解決方法同詳細教學見 Part 01 嘅 VPN 提示。可以參考 科學上網雙通道指南。

Vibe Coding 啱做咩，唔啱做咩？

啱：個人主頁、落地頁、Blog、小工具、demo。要小心：處理支付／私隱數據、高流量生產系統——呢啲需要專業架構同安全審查，AI 可以幫手，但人要嚴格把關。

整網站要使錢嗎？

入門階段可以 0 蚊：AI 免費額度 + GitHub + Cloudflare Pages（免費 hosting 同 xxx.pages.dev 域名）。只有想要靚域名先要俾少少錢。

Prompt 用中文定英文？

都得。而家主流 AI 對中文（包括廣東話書面）理解已經好好；個別複雜技術描述用英文可能更精準。用你最順手嘅語言，講得清楚最重要。

🧠
PART 06

Prompt 自檢 + 詞典

提示詞自檢 6 問

發之前先對一對：6 樣齊，AI 就少估。呢張係 checklist，唔係評分。

項目自問例子
角色 PAI 要扮邊個？「你係一位資深前端工程師」
任務 T要做咩、交咩貨？「幫我整一個個人作品集頁」
上下文 C俾邊個用、有咩背景？「我係攝影師，客人多數用手機睇」
輸出格式 D要 code？要解釋？幾長？「只回完整單檔 HTML，關鍵位置加中文註解」
約束限制條件「單檔、手機靚、唔用外部 library」
範例有無參考樣本？「跟呢個配色／呢張截圖」

    檢查只按關鍵詞粗略判斷，唔代表 AI 實際輸出質素；請自行覆核 6 樣。

    三種需求開發方式

    幾時一句話就夠，幾時要先寫規格？呢張表答「幾時一句話、幾時要寫規格」；逐步操作見 Part 03 嘅 8 步流程，兩者唔重覆。

    方式做法適合
    快速驗證一句話講清產品類型同要解決嘅問題適合想法多、要快速試錯
    持續迭代好似敏捷開發，用多輪對話逐項加功能、邊做邊改適合需求逐步明朗
    系統規劃用 README.md 承載完整需求，先定架構再開發適合規模大、需求明確
    決策提示：規模大 → 系統規劃；需求未清 → 快速驗證或持續迭代；模型唔夠強 → 拆細步、一次只做一件事。

    新手最易踩嘅坑（合併版）

    坑正確做法
    1) API key 直接寫入前端 code改用 .env 環境變數，並將 .env 加入 .gitignore
    2) node_modules、.next 等依賴目錄推上 GitHub提交前先用 .gitignore 排除，只交源碼
    3) 一次過叫 AI 改 8 個位一次一個目標，改完先驗收，出錯易搵
    4) 未驗證輸入就直接交俾 AI 處理分步除錯：先確認攞到同解析到資料
    5) 前後端、多種語言混寫一個檔分開前後端，一種語言一個位置
    6) 架構圖分幾次生成、拼唔完整一次叫 AI 出完整架構圖，再逐層開發
    7) prompt 太空泛：「幫我整個網站」→ AI 只能亂估俾角色、風格、頁面部分清單；先用自檢 6 問補齊角色／任務／上下文／格式／約束
    8) 改完唔留底：改壞咗返唔到轉頭每次滿意就 commit 一次（或存 index-v1.html、index-v2.html）
    9) 唔記得手機版：一半訪客用手機改完將瀏覽器窗口縮窄（或按 F12 開手機模擬）再檢查一次

    Prompt 常用字詞典

    唔識個字唔緊要，知佢做咩就夠。

    【入門必識】

    字意思同幾時用
    prompt 提示詞你打俾 AI 嘅指令全文
    system prompt開場設定 AI 角色同規矩嘅隱形指令，全程有效
    context 上下文AI 睇得到嘅背景（對話歷史、貼上嘅檔案或截圖）
    tokenAI 嘅計量單位，窗口有限，對話太長要開新對話
    Agent會自己決定步驟、用工具完成任務嘅 AI
    MCPModel Context Protocol，令 AI 可以接外部工具同資源

    【做網站會撞到】

    字意思同幾時用
    deploy 部署將本機 code 推上平台變成人人開得到嘅網站（另有 staging 測試機／production 正式機）
    rollback 回滾退回上一個可用版本
    build 建置將源碼打包成可發佈檔案
    repo 倉庫GitHub 上嘅 project（commit 存檔、push 推上雲、branch 分支）
    static site 靜態網站純 HTML/CSS/JS、無資料庫
    API / API key程式接口同密鑰，密鑰必須放 .env 並加入 .gitignore
    mock / dummy data 假數據先用假資料搭界面，之後才接真接口
    debug除錯
    refactor 重構唔改功能只整理結構
    README.mdrepo 首頁說明文件

    【兩個特別字】

    字意思同幾時用
    reverse engineering 逆向工程由成品反推佢點運作（拆解現成網站或程式學做法、修復無源碼嘅舊 project），注意唔等於可以抄人版權內容或繞過付費
    SKILL.mdAI Agent 嘅技能說明書：用 Markdown 寫明幾時用、步驟、注意事項，Agent 遇到相關任務會自動載入，用途係把你嘅重複流程寫成 skill，下次唔用從頭教

    Agent 係咩？System Prompt 四要素

    Agent = 模型（腦）＋ 工具（手：讀檔、上網、寫檔）＋ 編排（流程：幾時用邊個工具）。

    • 角色定位：例：「你係一位耐心嘅前端導師。」
    • 行為規範：例：「每次只改一個目標，完成後解釋改動。」
    • 能力邊界：例：「未經確認唔好部署或刪除檔案。」
    • 異常處理：例：「遇到錯誤先說明原因，再提出安全做法。」

    工具速覽

    工具做咩備註
    Cursor智能編程環境，有 Agent 模式，可以讀截圖反覆修正全書主要實作工具
    Lovable一句話生成產品嘅示範平台用嚟體會提示詞落差最直觀
    v0.dev／Bolt.new／GitHub CopilotAI 生成與輔助編程平台多數有免費版同部署限制
    DeepSeek-R1大語言模型，可用嚟做聊天同摘要香港可直接使用
    ComfyUI節點式生圖工作流可包成一個生圖 Agent，屬進階玩法

    迴圈最後一環：沉澱成長期記憶

    一個 project 做完唔好就咁散。把你嘅需求便條、常用 prompt、今次踩過嘅坑，寫成一份個人手冊（甚至做成 SKILL.md）放埋一齊。下次開新 project，直接餵返呢份手冊 — 就係你自己嘅長期記憶，比記住任何一個工具更重要。

    🎉 最後送你一句

    整網站唔再係由「學一門語言」開始，而係由「講出你想要咩」開始。
    今晚就打開 AI，將你嘅第一個網頁整出嚟啦！