唔識寫 code？完全冇問題。呢份指南用最簡單嘅廣東話，帶你由零開始，用「Vibe Coding」將你腦海嘅諗法變成一個真正開到嘅網站。🌐
Vibe Coding（氛圍編程）就係：你用平時講嘢嘅方式話俾 AI 知你想要咩，AI 幫你寫晒啲 code。你負責「諗」同「驗收」，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 提示）。
Oracle Cloud 免費 VPS 等。想行動態網站（有資料庫、登入功能嗰啲）就要一部「長開嘅電腦」托管佢。Oracle 有永久免費檔，不過註冊繁複啲。純靜態網頁可以跳過，直接用下面嘅部署服務。
Code 嘅「雲端倉庫 + 時光機」。你嘅 project code 放喺度，隨時回帶去之前版本，亦係好多部署服務嘅「貨源地」。免費，註冊 1 分鐘搞掂。
🔗 https://github.com你嘅「舖面 + 速遞員」。用 Cloudflare Pages 免費將網站放上網（自帶網址同 HTTPS），仲可以買平域名（例如 yourname.com）。
🔗 https://dash.cloudflare.com如果你想整「Telegram Bot」小工具就需要佢。另外好多 vibe coding 社群同 AI 機械人都活躍喺 TG，方便搵靈感、問問題。
🔗 https://telegram.org☁️ Netlify / Vercel（同 Cloudflare Pages 同類，三揀一就得）；🎨 Figma（畫頁面草圖）；📝 Notion／飛書（整理需求同靈感）。
真係唔多，識呢幾樣就夠：
加分項（唔識都冇事）：少少英文（AI 對英文 prompt 理解好少少）、基礎 Markdown、知道「檔案／資料夾」嘅概念。
框架唔係玄學，就係「填空模板」。掌握一兩個，你嘅要求會清晰好多：
| 框架 | 含意 | 例子 |
|---|---|---|
| P-T-C-F | 角色 · 任務 · 約束 · 格式 | 「你係一位前端工程師（P），幫我整個個人主頁（T），只用一個 HTML 檔案、手機睇都靚（C），直接俾我完整 code（F）」 |
| R-C-T | 角色 · 情境 · 任務 | 「你係網頁設計師（R）。我要幫烘焙工作室整展示頁（C）。請生成首頁 code 並解釋每一部分（T）」 |
| 改嘢三板斧 | 睇 → 評 → 改 | 「呢個係而家嘅效果截圖（睇）。我覺得標題太細、配色太寡（評）。請將標題放大一倍，轉做暖橙色主題（改）」 |
用一兩句寫低：呢個係咩網站？俾邊個睇？一定要有邊幾個部分？（寫喺便條，傾偈時貼俾 AI。）
去 DeepSeek 或 Kimi 註冊（香港直接用）。
🔗 https://chat.deepseek.com用 Part 04 嘅模板發俾 AI，攞到第一版 code，儲存做 index.html。
雙擊 index.html 用瀏覽器開嚟睇效果。唔滿意就截圖 + 俾意見，來回幾輪，直到順眼為止。
去 GitHub 註冊（免費）→ 撳右上角「+」→「New repository」→ 填個名（例如 my-first-website）→ 撳 Create。然後將你嘅 index.html 上傳入去。
🔗 https://github.com👉 步驟：登入 GitHub → 右上角「+」→ New repository → 填名 → Create repository → Uploading an existing file → 揀 index.html → Commit去 Cloudflare 註冊 → 撳「Workers & Pages」→「Create」→「Pages」→「Connect to Git」→ 揀返你嘅 repo → 撳 Deploy。1 分鐘後你就會得到一個 xxx.pages.dev 網址，全世界都開到！🎉
🔗 https://dash.cloudflare.com👉 步驟：註冊 Cloudflare → 左邊「Workers & Pages」→ Create → Pages → Connect to Git → 授權 GitHub → 揀 repo → Deploy喺 Cloudflare 或 Namecheap 買個易記嘅域名（一年幾蚊美金到幾十蚊），喺 Pages 設定度綁定，你嘅網站就有「門牌號碼」。
想改內容？改完本地預覽 OK → 推上 GitHub → Cloudflare 自動重新部署。呢個就係最慳心嘅工作流。
下面每個模板都係填返「你嘅 project」就發得俾 AI。頭三個入門必用，後幾個係常見場景，收藏起嚟以後成日用。
用途：CV / 自我介紹 / 個人品牌
你係一位資深前端工程師。我要整一個【個人主頁】，訪客係【潛在客戶或僱主】， 風格想要【簡約高級、淺色、少少橙色點綴】。 要求：只用 HTML+CSS+JS 一個檔案；手機同電腦都正常顯示； 包含【頂部介紹 + 我嘅作品 + 聯絡方法】。 請先俾我 50 字以內嘅設計思路，再輸出完整 code，關鍵位置寫中文註解。
用途：攝影師 / 插畫師 / 手作人展示作品
我想整一個【作品展示頁】，我係【攝影師】，想俾客人睇作品集。 風格：【深色背景、相係主角、卡片式佈局】。 要求：單個 HTML 檔案；撳相可以放大預覽；有「關於我」同「聯絡我」兩個小部分； 相先用 6 張佔位圖，我會自己換。請直接輸出完整 code。
用途：店舖活動、課程招生、產品預售
幫【我嘅教育機構】整一個【招生落地頁】。 內容包括：課程賣點（3 個）、導師介紹、學生評價（2 條）、報名按鈕同 QR code 位。 風格：【溫暖活潑，啱家長閱讀】，一撳直達報名。 要求：單檔 HTML，手機優先（大部分家長用手機睇），底部留一個「立即報名」按鈕。 請俾我完整 code。
用途：實用小工具，練手首選
整一個【記帳小工具】：可以加一筆收支（金額 + 類別 + 備註）， 列表顯示，可以刪除，仲可以計今個月總和。介面要【可愛清爽】。 要求：單檔 HTML+JS，資料存瀏覽器本地（刷新唔會冇）。 請直接俾我完整可運行嘅 code。
用途：寫日記、發文章、知識沉澱
我要整【個人 Blog】，寫【美食探店】主題。 佈局：【左邊文章列表，右邊分類標籤】，頂部有 Blog 名同一句簡介。 風格：【日系素雅、米白底、字大啲舒服閱讀】。 先放 3 篇示範文章。要求：單檔 HTML+CSS，內嵌 Markdown 自動排版。 請俾我完整 code。
你係一位資深前端工程師。我要整一個【網站類型，例如：個人作品集】， 目標訪客係【邊個】，風格想要【例如：簡約日系 / 型格暗黑】。 要求：只用 HTML+CSS+JS 寫一個檔案；手機上正常顯示； 包含【部分1】、【部分2】、【部分3】。 請：先俾我整體結構同設計思路（50 字內）， 再輸出完整可運行嘅 code，並喺 code 入面用註解標出每個部分。
如果跟住上面個流程行，一個下晝就上線到一個簡單嘅個人主頁。第一日唔好追求完美，「開到」就係勝利。
唔使住。先做幾個 project，遇到邊忽唔明就撳住問 AI「呢段做咩㗎？」，實戰入面慢慢明，比由教科書開始高效得多。
因為 OpenAI 同 Anthropic 未有香港地區支援，會 block 香港 IP。解決：① 開 VPN／科學上網；② 或者用香港開到嘅 DeepSeek、Kimi、豆包、智譜清言。VPN 教學可以參考 科學上網雙通道指南。
啱：個人主頁、落地頁、Blog、小工具、demo。要小心：處理支付／私隱數據、高流量生產系統——呢啲需要專業架構同安全審查，AI 可以幫手，但人要嚴格把關。
入門階段可以 0 蚊：AI 免費額度 + GitHub + Cloudflare Pages（免費 hosting 同 xxx.pages.dev 域名）。只有想要靚域名先要俾少少錢。
都得。而家主流 AI 對中文（包括廣東話書面）理解已經好好；個別複雜技術描述用英文可能更精準。用你最順手嘅語言，講得清楚最重要。
整網站唔再係由「學一門語言」開始，而係由「講出你想要咩」開始。
今晚就打開 AI，將你嘅第一個網頁整出嚟啦！