AI幫我編程三日奇蹟網站誕生記

👉 新用戶香港 Call 車首程免費（最高減 HK$88）— 按此領取優惠！

我終於試用「Vibe Coding」——結果真係奇蹟級！

我之前寫過唔少關於人工智能（AI），尤其係「vibe coding」點樣理論上可以令任何人成為程式員嘅文章。依家終於親身試一試，到底「vibe coding」係咪真係咁神奇？

我最感興趣嘅係Claude Code，之前仲訪問過佢創辦人，見證佢由六月推出開始人氣急升。Anthropic而家仲話佢係「全球最佳編碼模型」，雖然呢啲說法聽落有啲誇張，AI公司都鍾意用「最聰明」、「最好」呢啲詞嚟宣傳。

我搵咗Anthropic嘅朋友，講我想自己用Claude Code完成一個細小項目，佢哋都幾興奮，但都覺得我啲要求有啲高。因為依家冇公開畀非程式員用家嘅完整教學，Anthropic特別為我整咗一份，包括「Terminal係咩？」呢啲100%程式員都識，但我就唔識嘅基本問題。

三日幾個鐘之後，我成功用Claude Code寫咗個自訂網站，幾乎冇乜大問題。呢個網站解決咗我喺紐約市都會區搵樓嘅一個問題——點樣快速知道屋企到最近公共交通站嘅行路時間。我之前要不停係Zillow或者Redfin複製地址，再貼入Google Maps，設定路線，睇行路時間，重覆又重覆，非常枯燥。

我用Claude Code寫嘅網站會自動從Redfin攞樓盤資料，計算到最近火車站嘅行路時間，然後用簡潔嘅介面顯示地圖同屋企嘅主要資料。以下係我點做嘅，以及點開始你嘅專案。

點揀Vibe Coding工具？

市面上幾乎所有AI聊天機械人都可以產生程式碼片段，但真正嘅vibe coding工具係將編程提升到另一層次。好多工具可以直接存取你電腦嘅檔案，睇晒成個代碼庫，所以專業工程師依然係主要用家。

除咗Claude Code，仲有OpenAI嘅Codex、GitHub Copilot、Replit、Lovable同Windsurf等大牌。呢啲工具都需要一定技術知識先能設置。我今次就用Claude Code做示範。

點喺電腦安裝Claude Code？

Claude Code係收費服務，有$17/月嘅Pro計劃同$100/月嘅Max計劃。免費嘅web版Claude聊天機械人用唔到呢個功能。Anthropic幫我安排咗$100/月嘅Max計劃開始，但我嘅簡單樓盤網站用$17嘅Pro計劃應該都夠。

安裝步驟Windows同Mac有啲分別，我用Mac，以下係重點。首先開Terminal（終端機）app，Anthropic解釋話Terminal係Mac內置嘅應用，係用文字指令同電腦溝通嘅工具，係Claude Code嘅主要介面。

跟住喺Terminal入以下指令：
`curl -fsSL https://claude.ai/install.sh | bash`
按Enter，見到安裝成功嘅提示之前要留意黃色字嘅額外指令，跟住做晒先關閉重開Terminal。

開新Terminal打`claude`，佢會問你用Claude帳號登入定API登入，用鍵盤方向鍵揀選，幾秒就可以開始用。

揀專案：有咩選擇？

我有AI編碼權限，但唔知做乜好。一個Windsurf高層曾講初學者可以輕易用AI做一個Wordle遊戲。亦諗過做派對邀請生成器，但Claude冇圖像生成功能，呢點同其他競爭對手有分別。

最後我諗返過去一年遇到嘅問題，覺得搵樓最麻煩，要知屋企離火車站幾遠。Zillow冇呢個功能，我想自己整一個。

我輸入嘅prompt係：
「幫我整個網站，可以睇我附近嘅樓盤，篩選條件係：紐澤西Montclair鎮嘅獨立屋，行路15分鐘內去到NJ Transit火車站，有4間睡房，最少1.5個浴室。」

用自然語言「Code」出嚟

由呢度開始，我用自然語言同Claude Code傾偈。雖然我有啲基本技術知識，知道網站要有數據，數據要公開先用得，但Claude Code會主動問我Zillow同Google Maps有冇API。Claude話Zillow有免費公開API，Google Maps嘅API要收費，佢建議我用其他免費方案，我就跟住做。

Claude Code會主動搵資料，例如搵齊Montclair嘅火車站，列出嚟等我確認。佢設計網站時我冇任何美學指示，搵API連結，教我點註冊。十分鐘內就完成網站基本框架。

我用瀏覽器打`http://localhost:8000`睇到網站，外觀唔錯，但呢類網站係本地運行，未能用公開網址分享，要註冊買域名先得。

排錯、調整及大問題

我跟指示註冊API，貼入標識符，但Zillow API出現404錯誤，冇法載入樓盤資料。地圖顯示正確，但火車站位置錯誤，Claude即時修正。

我同Claude反覆嘗試解決Zillow問題，但都唔得。Claude建議轉用Redfin資料，成功之後樓盤出現咗！

後來請朋友睇，發現Zillow嘅免費公開API已經停用，Claude冇發現呢點。

網站上樓盤圖標出現，但右邊列表唔穩定，Claude調整前端後終於正常顯示。

（順帶一提，某個價值650萬美元嘅樓盤係多戶型，但經紀人錯誤上傳為獨立屋，數據出現咗誤差。）

最後檢查：資料準確嗎？

我核對Redfin嘅價格、位置、放盤天數、睡房同浴室數量，資料都啱。唯一問題係行路時間比Google Maps快3至5分鐘，Claude解釋因為用咗「直線距離」計算。

佢幫我提高「繞路因子」（circuity factor），經過幾次調整，行路時間幾乎同Google Maps一樣。因為呢個修正，符合15分鐘行路範圍嘅樓盤由5個減到2個。

我仲請Claude加咗一個可調整行路時間嘅滑動條，方便我自己調整篩選條件。其實呢個滑動條設計方法都可以套用到價格、睡房數量等其他條件，幫你打造專屬嘅搵樓網站。

Claude Code仲幫我整理寫稿嘅檔案

呢個過程大約三日完成，每日花一兩個鐘，我無需自己寫程式碼，只係同chatbot對話。

Claude Code可直接存取我電腦檔案，幫我整理截圖。我叫佢將所有Claude Code截圖放入一個新資料夾，並按時間排序命名。佢完成得唔錯，但我需手動補漏。後來又幫我整理網站截圖，效果差唔多。

由於我唔係好清楚Claude Code背後技術，最後問佢做咗啲咩，佢交代得好清楚。

總括嚟講，呢次經驗真係奇蹟，我明白點解軟件工程師一旦開始用AI編碼助手，就會深陷其中，依家用AI編碼嘅人數遠超一般人用普通聊天機械人。

—

編輯評論與啟發

今次親身體驗「vibe coding」，特別係用Claude Code完成一個實用嘅搵樓網站，充分展示咗AI編碼助手嘅強大潛力。唔使有深厚編程背景，只要有基本電腦操作知識，普通用家都可以透過自然語言指令，喺幾日內搞掂一個自訂化嘅應用程式。呢個轉變對科技民主化有深遠意義，將程式創作門檻大幅降低。

不過，體驗中亦顯示AI嘅限制：依賴公開API嘅可用性同準確性，若API過時或者停用，AI未必即時識破，會拖慢開發進度。用家要有一定判斷力同埋求證能力，避免盲目相信AI建議。再者，雖然AI可以快速生成框架同功能，但細節調校同錯誤排查仍需人手介入，證明AI輔助編碼係合作而非完全取代人類。

另外，Claude Code可以直接操作本機檔案，對於資料管理同工作流程整合同提升效率有顯著優勢，超越純網頁版工具。未來AI助手若能更好結合本地與雲端資源，將更貼近用戶需求。

對香港用戶而言，「vibe coding」或可推動本地創新，令非技術行業嘅人亦能利用AI快速開發工具解決工作或生活問題，打破專業壁壘。不過，語言支援、地區服務API嘅可用性仍是挑戰，開發AI工具商要注意本地化。

總括來講，AI編碼助手正逐步改變軟件開發生態，從專業領域走向普羅大眾。未來隨住技術成熟，呢種「對話式編碼」或會成為主流編程新方式，值得香港科技社群及用戶密切關注與嘗試。

以上文章由GPT 所翻譯及撰寫。而圖片則由GEMINI根據內容自動生成。