Vibe Coding 通常指用自然語言描述想做的軟件，讓 AI 生成程式碼，再透過預覽和對話逐步修改。例如，你可以要求 AI 製作作品網站，然後再調整手機版、內容和按鈕。它降低了開始製作的門檻，但你仍要決定需求、測試功能，並為上線後的運作負責。
本文目錄：Vibe Coding 和一般 AI 寫程式有甚麼分別？｜零基礎可以用 Vibe Coding 做甚麼？｜Vibe Coding 工具應該怎樣選？｜5 個步驟建立第一個網站｜Vibe Coding 要預留哪些成本？｜哪些情況需要技術協助？｜常見問題｜想開始練習：先完成一張需求清單｜文章參考資料。
Vibe Coding 和一般 AI 寫程式有甚麼分別？
兩者都會用 AI 生成或修改程式碼。Vibe Coding 更強調先描述想要的效果，再根據結果反覆調整；一般 AI 輔助開發則可以包括逐段閱讀程式、審查修改和系統性測試。
這個詞的用法並不完全一致。有些人用它形容幾乎不閱讀程式碼、主要靠生成效果推進的做法；也有人泛指用 AI 協助開發。學習時應分清楚：做出原型和交付正式系統，需要的檢查程度不同。
對初學者而言，你可以先從描述需求和檢查結果入手。例如「按下查詢按鈕後應去哪裡」「電話上是否看得清楚」，都比單純要求「做得專業一點」更容易驗收。
零基礎可以用 Vibe Coding 做甚麼？
建議先做可以清楚界定功能的小作品。以下是練習方向，不是實際學員成果。
| 練習項目 | 第一版應做到 | 暫時不必加入 |
|---|---|---|
| 作品網站 | 展示作品、服務及聯絡方法 | 會員系統及付款 |
| 活動介紹頁 | 顯示活動資料，連到現成報名入口 | 自建票務及座位管理 |
| 簡單報價工具 | 根據固定選項計算示例價錢 | 真實合約及自動收款 |
先完成一個小作品，能讓你練習把模糊想法轉成具體要求。想了解這些做法如何接到日常工作，可閱讀網站與自動化應用。
Vibe Coding 工具應該怎樣選？
先看你想在哪裡工作，以及願意處理多少設定。工具能否協助生成頁面、修改檔案、預覽和部署，比單純比較哪個模型「最強」更影響第一個作品能否完成。
Cursor 官方文件涵蓋理解程式、規劃功能、修正錯誤與審查修改等用途。Replit 官方資料則介紹從自然語言描述開始生成及設定應用程式。以下是按這些特點整理的入門選擇方向，不是性能排名。
| 你的需要 | 可考慮的工具方向 | 使用前先確認 |
|---|---|---|
| 想從瀏覽器開始建立新項目 | Replit 類雲端開發工具 | 預覽與正式部署的分別、用量及費用 |
| 想逐步理解和修改項目檔案 | Cursor 類 AI 編程工具 | 執行環境、修改審查及部署方法 |
| 只想先整理需求和文案 | 對話型 AI 配合建站工具 | 對話中的程式是否已實際執行 |
新手先選一個工具完成以下練習便足夠。訂閱前核對所在地支援、方案功能與費用，避免做到部署時才發現所需功能不包含在原方案內。
5 個步驟建立第一個網站
以下以「香港自由攝影師的一頁式作品網站」作教學示例。目標是展示作品、說明服務，並提供聯絡入口；不處理會員、付款或客戶資料庫。這是示例流程，並非某款工具的實測紀錄。
步驟 1 先寫清楚網站要幫誰做甚麼
先寫一句目標：「讓想拍個人形象照的客人，看完作品和服務介紹後知道怎樣查詢。」再列出作品、服務、拍攝流程、常見問題及聯絡方式五個區塊。
準備可使用的相片、已確認的服務文字，以及聯絡方法。未有資料的部分先留作草稿，不讓 AI 自行編造價格、客戶評語或拍攝案例。
完成標準：你能用一張清單說出頁面有哪些區塊，以及讀者最後應採取哪個行動。
步驟 2 用有範圍的提示詞生成初稿
把需求交給具備建站或編程能力的工具。第一輪重點是檢查結構與內容，不需要一次要求所有動畫與功能。可複製以下提示詞，將方括號內容換成自己的資料：
請為一位香港自由攝影師建立繁體中文一頁式作品網站。
目標讀者：需要個人形象照的客人。
網站目標：看作品、了解服務、知道如何查詢。
頁面區塊：首屏簡介、作品集、服務介紹、拍攝流程、常見問題、聯絡方式。
視覺要求：白底、清楚字體、充足留白，手機與桌面都能閱讀。
已確認資料：[貼上品牌名、服務文字及授權圖片]。
未提供的價格和評語不要編造。第一版不要會員、付款或資料庫。
WhatsApp 按鈕先設為未啟用並標示待設定；收到我確認的連結後才接駁。
請先列出製作計劃與缺少資料，再建立可預覽初稿；不要自行公開部署。生成後先確認五個區塊是否齊全，內容有沒有多出不存在的服務。完成標準是能看到初稿並指出要修改的位置，並不是 AI 回覆「完成」就算完成。
步驟 3 每次只修改一個可描述的問題
不要只說「不好看」。把問題改寫成具體指令，例如：「手機版首屏標題太長，請縮成兩行以內；作品圖片保持相同比例；查詢按鈕放在服務介紹之後。」
改動前保留目前版本。修改後重看相關位置，也檢查有沒有影響原本正常的內容。若工具支援版本記錄，先學會如何回到上一步。
完成標準：每次修改都有一項可以觀察的變化，而且沒有破壞原本的連結或排版。
步驟 4 逐項測試，不只看外觀
以手機和桌面分別預覽，檢查有沒有橫向溢出、文字被遮住、圖片太大或按鈕按不到。確認聯絡資料後才啟用真實連結，親自點擊測試目的地。
如果日後增加表單，先用測試資料驗證送出、接收與失敗處理。畫面顯示「提交成功」，不代表你一定收到資料。
完成標準：以下清單全部檢查過；未做好的功能先移除或保持停用。
- 手機版可完整閱讀，圖片不遮住文字。
- 導航與聯絡連結連到正確位置。
- 頁面沒有假評語、未確認價錢或待填文字。
- 圖片有使用權，沒有公開私人資料或登入密碼。
步驟 5 確認部署設定後公開，再保留備份
預覽網址和正式網站可能採用不同設定。公開前確認網址、託管安排、用量收費及管理權限，再按照所用平台的部署流程發布。
發布後以另一個瀏覽器重新打開正式網址，重試聯絡按鈕和手機版。保留網站文字、圖片、項目檔案或平台可提供的備份，並記下域名與託管由誰管理。
完成標準：其他人能打開正式網址，查詢入口正常，而且你知道日後如何修改及還原版本。
Vibe Coding 要預留哪些成本？
除了 AI 工具訂閱，正式網站可能涉及域名、託管、資料庫、電郵或其他服務費。免費試用能否製作初稿，和能否長期公開運作，是兩個不同問題。
準備付款前列出一次性及持續支出：工具方案、每月用量、域名續期，以及日後請人檢查或修正的費用。若工具按使用量收費，查看是否能設定提醒或上限。
第一個練習可以先不接資料庫與付款。等你掌握預覽、修改和測試後，再評估是否真的需要增加功能。
哪些情況需要技術協助？
當項目開始處理登入、收款、客戶資料或不同使用者權限，問題便不限於頁面外觀。例如一位客人能否看到另一位的資料，需要實際驗證存取控制，而不是只看登入畫面是否漂亮。
如果你無法說明資料存在哪裡、誰能存取、出錯如何恢復，就應在正式投入使用前找熟悉相關技術的人檢查。初學階段可以先使用測試資料做原型，把正式資料接入留待確認後處理。
遇到錯誤時，先記錄「做了甚麼、預期結果、實際結果及錯誤訊息」，再請 AI 排查。不要在不了解影響時反覆要求它重寫整個項目，否則可能修好一處又弄壞另一處。
常見問題
不懂程式可以開始嗎？
可以先從作品集、服務介紹頁等小項目入手。你不必一開始就手寫全部程式，但需要學會描述需求、檢查結果和保留版本；這些會直接影響作品能否持續使用。
Vibe Coding 和 No-code 一樣嗎？
不完全一樣。No-code 常以現成元件和設定組合功能；Vibe Coding 常透過自然語言生成或修改程式碼。部分工具同時包含兩種做法，應按實際功能選擇。
可以直接用來做公司正式系統嗎？
要看系統負責甚麼。介紹頁和涉及客戶資料、付款或營運記錄的系統，所需檢查程度不同。先定義權限、資料處理、備份和測試要求，再決定是否具備正式使用條件。
用 AI 做好網站，就會有 Google 排名嗎？
不會自動獲得排名。網站還需要可被搜尋引擎讀取、有用且清楚的內容、合理的頁面結構與維護。AI 協助完成製作，並不代表已完成搜尋優化或能保證查詢量。
第一個作品要花多久？
取決於功能範圍、素材準備與修改次數。與其先承諾固定時數，不如把第一版限制為一頁、少量區塊及一個聯絡入口；每完成一項便驗收，再決定是否擴充。
想開始練習：先完成一張需求清單
今天可以先寫下你的網站對象、五個內容區塊和一個查詢入口，再套用上面的提示詞建立初稿。第一個目標是做出能檢查、能修改的小作品。
如果你已有網站、工作系統或應用程式的想法，但卡在功能拆解、修改或測試，可以了解 AI Academy HK 的一對一項目指導。查詢時帶上你想完成的功能、目前進度及卡住的位置，方便討論適合的指導範圍。
文章參考資料
工具功能、方案與介面以各產品官方說明及你帳戶當日顯示為準。課程名稱、學費與班期以 AI Academy HK 現行課程頁為準，不以搜尋摘要或舊文為準。以上公開資料於 2026 年 10 月 4 日查閱。
學習 AI，保護你的未來。
