Vibe Coding實戰：一個人+AI如何從零做出一個賺錢產品？（附完整工具箱）

作者：伍六七AI編程

日期：2026年4月19日下午3:20

來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點高亮

一個人配搭 AI，用 Vibe Coding 工作流（Claude Code + Supabase + Vercel/Cloudflare）就可以從零快速做出一個具備會員登錄嘅出海產品。

整理版摘要

呢篇文章係一位獨立開發者分享佢點樣用 Vibe Coding 方法，一個人加 AI 就砌出一個可以賺錢嘅產品。佢想解決嘅問題係：好多非技術背景嘅人想做出海產品，但覺得寫 code 好難，要請 programer 又要使好多錢。佢嘅結論係：只要用啱工具，例如 Claude Code、Supabase、Vercel/Cloudflare 同 GitHub，完全可以用自然語言同 AI 溝通，由 AI 負責寫 code，一個人就搞掂曬。

文章詳細介紹咗佢嘅核心工具箱，仲有實操步驟：由喺 Supabase 開 database 同認證、叫 Claude Code 寫登錄功能、本地測試，到推上 GitHub 再用 Vercel 或 Cloudflare 一鍵部署。佢強調呢個工作流可以喺幾十分鐘內打通會員登錄閉環，過去可能要幾星期同幾皮嘢先做到。作者特別提醒，一定要參考 Supabase 官方文檔，而唔係靠 AI 憑空想像，咁樣先至保證一步到位。

最後佢鼓勵讀者：唔好俾 code 限制想像力，用 Vibe Coding 快速試 idea，先找出用戶需求，再透過流量同會員收費變現。有想法就去做，由第一個產品開始。

結論：Vibe Coding 係一種「憑感覺編程」，只需向 AI 講需求，唔使自己寫 code，一個人就等於一個技術團隊。
方法：核心工作流係 Claude Code（AI 主程序員）+ Supabase（後端數據庫+認證）+ Vercel/Cloudflare（部署）+ GitHub（代碼倉庫）。
差異：傳統開發要識多種技術，Vibe Coding 將門檻降到零，新手都可以幾小時內做出 MVP。
啟發：代碼只係工具，想法同執行力先係護城河；AI 可以幫手處理技術細節，但要專注揾需求同搞流量。
可行動點：可以跟住步驟，用 Claude Code 配合 Supabase 實做一個 GitHub/Google 登錄功能，再部署上線，作為出海產品嘅第一步。

值得記低

Prompt supabase.com

用 Claude Code + Supabase 實現 GitHub/Google 登錄嘅完整 Prompt

參考官方文檔幫我用 Next.js 搭建一個項目，並使用 Supabase 實現 GitHub/Google 登錄功能。請嚴格參考以下 Supabase 官方文檔：社交登錄說明：特別注意，我需要使用服務器端認證方式（Server-Side Auth），請參考這裏：請幫我生成完整的登錄頁面、回調 API 路由同埋中間件配置。

整理重點

Vibe Coding 係咩？一個人加 AI 做產品嘅核心工具箱

Vibe Coding 即係「憑感覺編程」，你唔需要識寫 code，只要好似同同事傾偈咁，將需求講畀 AI 聽，AI 就會幫你寫 code、改 bug、甚至部署上線。呢個模式之下，一個人加 AI 就等於一個完整嘅技術團隊。

一個人 + AI = 一個完整的技術團隊

過去要做一個賺錢嘅互聯網產品，要識前端、後端、數據庫、伺服器運維，門檻極高。而家呢啲門檻都唔存在，你唔需要請 Programmer，自己都唔需要係 Programmer。作者分享咗佢嘅核心工具箱，包括 AI 大腦 Claude Code、全能後端 Supabase、代碼倉庫 GitHub、同埋一鍵部署平台 Vercel 或 Cloudflare。

整理重點

實戰：用 AI 快速打通會員登錄閉環

出海網站要變現，主要靠流量同會員訂閲。第一步就係打通用戶登錄功能，例如 GitHub 或 Google 登錄。以前處理 OAuth 係新手惡夢，但用 Vibe Coding 幾分鐘就搞得掂。

幾分鐘就能搞定登錄功能

首先喺 Supabase 開新 Project，記低數據庫密碼，然後喺 Authentication -> Providers 啟用 GitHub 或 Google 登錄，攞到 Client ID 同 Secret 填返入去。之後就召喚 Claude Code，畀佢一個清楚嘅指令。

核心技巧：一定要將官方文檔餵俾 AI！等佢唔好憑空想像，減少幻覺同報錯。以下係一個示例 Prompt：

畀 Claude Code 嘅 Prompt text

參考官方文檔幫我用 Next.js 搭建一個項目，並使用 Supabase 實現 GitHub/Google 登錄功能。請嚴格參考以下 Supabase 官方文檔：社交登錄說明：https://supabase.com/docs/guides/auth/social-login/auth-github
特別注意，我需要使用服務器端認證方式（Server-Side Auth），請參考這裏：https://supabase.com/docs/guides/auth/server-side/creating-a-client
請幫我生成完整的登錄頁面、回調 API 路由同埋中間件配置。

Claude Code 會自動創建文件、寫好鑑權邏輯，你只需要喺 .env.local 填返 Supabase 嘅 URL 同 Anon Key。然後 run `npm run dev` 本地測試，成功登錄後用戶數據就會出現喺 Supabase Auth 面板。

最後，將代碼 commit 推上 GitHub，再揀 Vercel 或 Cloudflare 一鍵部署。Vercel 就最簡單，Cloudflare 就出海更快更安全。幾十秒後你就會得到一個在線連結，正式有個具備會員體系嘅產品。

整理重點

AI 時代嘅獨立開發者思維：想法同執行力先係護城河

好多人糾結自己唔識寫 code，做唔到產品。但 Vibe Coding 話畀我哋知，code 只係實現目標嘅工具，真正嘅護城河係你嘅想法同執行力。藉助 Claude Code、Supabase、Vercel/Cloudflare 呢啲工具，你可以好似拼樂高咁組裝業務邏輯。

想法同執行力先係真正的護城河

過去要幾星期、幾皮嘢先做到嘅 MVP，而家一個週末甚至一個晚上就搞掂。起步係難，但只要開始，就會到達。出海網站嘅核心係揾需求、用 AI 編程實現、搞流量運營。今日打通嘅登錄閉環只係第一步，唔好俾 code 限制想像力，用 AI 賦能，快啲把你的產品推出市場。

副業嘅慾望越嚟越強，心入面嘅諗法越嚟越多，試下 Vibe Coding 啦！

咩係 Vibe Coding？翻譯過嚟就係「憑感覺編程」。你唔再需要一行一行咁敲代碼，亦都唔需要識咩高深嘅底層架構。你只需要好似同同事傾偈咁，將你嘅需求「講」俾 AI 聽，等 AI 幫你寫代碼、改 Bug、甚至係部署上線。

喺呢個模式下，一個人 + AI = 一個完整嘅技術團隊。

以前，如果你想做一個可以賺錢嘅互聯網產品，你要識前端、識後端、識數據庫、識伺服器運維……而家呢啲門檻都唔存在，你唔需要請一堆程序員，亦都唔需要係一個程序員。

今日，我就手把手帶大家跑通一條叫做「獨立開發者黃金起步路線」嘅完整工作流程：Claude Code + Supabase + Vercel/Cloudflare + GitHub。

只要掌握咗呢個工具箱，你一個人都可以從零做出一個商業化嘅出海產品。

我嘅 Vibe Coding 核心工具箱

喺開始實操之前，先介紹一下我嘅核心工具箱：

AI 大腦：Claude Code作為目前最強嘅前端同邏輯推理模型，Claude Code 就係你嘅「主程序員」。你只需要喺終端機俾佢指令，佢就會自動讀取文件、分析需求、編寫同修改代碼。
全能後端：Supabase一個以 PostgreSQL 為基礎嘅後端即服務（BaaS）平台。佢唔單止自帶開源數據庫，仲完美封裝咗身份認證（Auth）、物件儲存等功能。佢係你產品嘅「堅實底座」。
代碼倉庫：GitHub你嘅代碼大本營，亦都係連接開發同部署嘅橋樑。
一鍵部署：Vercel 或 Cloudflare前端項目最好嘅歸宿。只要代碼推送去 GitHub，佢哋就會全自動幫你部署上線，而且提供免費嘅 HTTPS 域名。Vercel 對 Next.js 支援極佳，而 Cloudflare (Pages/Workers) 憑住全球 CDN 節點，喺訪問速度同抗 D 方面獨步天下，係出海網站嘅不二之選。

實操演練：點樣用 AI 打通產品嘅「任督二脈」？

出海網站想要變現，主要靠流量收入同會員訂閲。而要接入會員體系，第一步就係打通用戶登錄功能（例如 GitHub 或 Google 登錄）。

以前，處理 OAuth 2.0 認證、管理各種 Token 同回調地址，係無數新手嘅惡夢。但而家，我哋用 Vibe Coding 嘅方式，幾分鐘就搞得掂。

第一步：喺 Supabase 搭建數據庫同認證中心

登錄 Supabase 官網，創建一個新 Project（項目），記低你嘅數據庫密碼，Region 揀默認推薦就得。
入去項目嘅 Authentication -> Providers，啟用你需要接入嘅登錄方式（好似 GitHub 或 Google）。
獲取密鑰：

如果係 GitHub： 去 GitHub 嘅 Developer settings -> OAuth Apps 創建應用程式，拎到 Client ID 和 Client Secret。
如果係 Google： 去 Google Cloud Console 創建 OAuth 客戶端，獲取憑證。

將拎到嘅密鑰填返落 Supabase，並將 Supabase 提供嘅 Callback URL 填入 GitHub/Google 嘅配置入面。

第二步：召喚 Claude Code 編寫核心邏輯

後端配置好咗，接下來就係寫代碼。呢個亦都係 Vibe Coding 最爽嘅環節。

打開終端機，喚醒 Claude Code，直接俾佢指令。

核心技巧：一定要將官方文檔餵俾 AI！ 唔好俾 AI 憑空想像，咁樣可以極大減少幻覺同報錯。

參考官方文檔幫我用 Next.js 搭建一個項目，同埋使用 Supabase 實現 GitHub/Google 登錄功能。
請嚴格參考以下 Supabase 官方文檔：
社交登錄說明：https://supabase.com/docs/guides/auth/social-login/auth-github
特別注意，我需要使用伺服器端認證方式（Server-Side Auth），請參考呢度：https://supabase.com/docs/guides/auth/server-side/creating-a-client
請幫我生成完整嘅登錄頁面、回調 API 路由同埋中間件配置。

收到指令之後，Claude Code 會自動創建文件、編寫鑑權邏輯、配置環境變量模板。

你只需要喺生成嘅 .env.local 文件入面，填入你嘅 NEXT_PUBLIC_SUPABASE_URL 和 NEXT_PUBLIC_SUPABASE_ANON_KEY（喺 Supabase 後台嘅 Project Settings -> API 入面可以揾到）。

第三步：本地測試同跑通閉環

代碼生成之後，喺終端機輸入：

npm run dev

都可以直接同 Claude Code 講幫我哋進行本地部署。

打開瀏覽器訪問 http://localhost:3000，撳頁面上嘅登錄按鈕。授權通過之後，頁面成功跳轉，打開 Supabase 嘅 Authentication 面板，你會發現用戶數據已經靜靜咁躺喺數據庫裏面喇。

成個過程行雲流水，你甚至連一行複雜嘅鑑權邏輯都冇手寫過！

第四步：推送去 GitHub，一鍵上線（Vercel/Cloudflare）

本地跑通只係第一步，等全世界見到你嘅產品先係關鍵。

喺終端機透過 git commit 將代碼提交。
將代碼推送去你嘅 GitHub 倉庫。
部署方案 A：Vercel（更省心）登錄 Vercel 官網，揀 Add New Project，導入頭先嘅 GitHub 倉庫，喺環境變量入面填入你嘅 Supabase URL 同 Key，撳 Deploy。
部署方案 B：Cloudflare Pages（出海必備、訪問更快更安全）登錄 Cloudflare，入去 Workers & Pages，揀連接到 GitHub 倉庫。同樣填入環境變量，撳部署。Cloudflare 嘅全球邊緣節點會令到你嘅出海應用訪問速度起飛，而且自帶強大嘅防護盾。

只需幾十秒，Vercel 或 Cloudflare 就會為你生成一個在線訪問連結。至此，一個具備完整數據庫同會員登錄體系嘅 Web 產品，就正式誕生咗！

咁樣，GitHub 登錄同 Google 登錄就搞掂，其他功能需求，只需要你描述清楚，Claude Code 都可以幫我哋快速實現，核心就係揾到用戶真實需求！保姆級教學可以睇：

出海獨立開發第一步：用 AI + Supabase 快速實現 GitHub 登錄，為你嘅網站打通會員體系

顛覆認知！我令 AI 幫我加咗 Google 登錄功能，過程簡單到離譜

寫喺最後：AI 時代嘅獨立開發者思維

好多人仲喺度糾結：「我唔識寫代碼，點樣做產品？」

Vibe Coding 話俾你知：代碼只係實現目標嘅工具，想法同執行力先係真正嘅護城河。

靠 Claude Code、Supabase、Vercel/Cloudflare 呢啲神仙工具鏈，你完全可以好似砌 Lego 咁，將複雜嘅業務邏輯組裝起嚟。以前需要幾星期甚至幾個月、請幾個程序員花費十萬幾十萬先至完成到嘅 MVP（最小可行性產品），而家只需要一個週末，甚至一個晚上。

起步好難，但只要我哋開始，就一定會到達。出海網站嘅核心就係揾需求、用 AI 編程實現、搞流量運營。今日我哋打通嘅登錄閉環，只係你出海征途嘅第一步。

唔好俾代碼綁住你嘅想像力，用 AI 賦能，等你嘅產品走出國門賺美金！

有諗法就去嘗試啦，從做出第一個屬於你自己嘅產品開始！

如果你都想系統學習點樣用 AI 從零做產品，掃描下面嘅二維碼，備註【6】，免費領取我參與整理嘅《10 萬字 AI 編程實操手冊》！

副業的慾望越來越強，心中的想法越來越多，試試 Vibe Coding！

什麼是 Vibe Coding？翻譯過來就是“憑感覺編程”。你不再需要一行一行去敲代碼，也不需要懂什麼高深的底層架構。你只需要像和同事聊天一樣，把你的需求“說”給 AI 聽，讓 AI 幫你寫代碼、改 Bug、甚至是部署上線。

在這個模式下，一個人 + AI = 一個完整的技術團隊。

過去，如果你想做一個能賺錢的互聯網產品，你得懂前端、懂後端、懂數據庫、懂服務器運維……現在，這些門檻都不存在，你不需要招一堆程序員、也不需要是一個程序員。

今天，我就手把手帶大家跑通一條被稱為“獨立開發者黃金起步路線”的完整工作流：Claude Code + Supabase + Vercel/Cloudflare + GitHub。

只要掌握了這個工具箱，你一個人也能從零做出一個商業化的出海產品。

我的 Vibe Coding 核心工具箱

在開始實操之前，先介紹一下我的核心工具箱：

AI 大腦：Claude Code作為目前最強的前端與邏輯推理模型，Claude Code 是你的“主程序員”。你只需要在終端給它發指令，它就能自動讀取文件、分析需求、編寫和修改代碼。
全能後端：Supabase一個以 PostgreSQL 為基礎的後端即服務（BaaS）平台。它不僅自帶開源數據庫，還完美封裝了身份驗證（Auth）、對象存儲等功能。它是你產品的“堅實底座”。
代碼倉庫：GitHub你的代碼大本營，也是連接開發與部署的橋樑。
一鍵部署：Vercel 或 Cloudflare前端項目最好的歸宿。只要代碼推送到 GitHub，它們就能全自動幫你部署上線，並且提供免費的 HTTPS 域名。Vercel 對 Next.js 支持極佳，而 Cloudflare (Pages/Workers) 憑藉全球 CDN 節點，在訪問速度和抗 D 方面獨步天下，是出海網站的不二之選。

實操演練：如何用 AI 打通產品的“任督二脈”？

出海網站想要變現，主要靠流量收入和會員訂閲。而要接入會員體系，第一步就是打通用戶登錄功能（如 GitHub 或 Google 登錄）。

過去，處理 OAuth 2.0 認證、管理各種 Token 和回調地址，是無數新手的噩夢。但現在，我們用 Vibe Coding 的方式，幾分鐘就能搞定。

第一步：在 Supabase 搭建數據庫與認證中心

登錄 Supabase 官網，創建一個新 Project（項目），記住你的數據庫密碼，Region 選默認推薦即可。
進入項目的 Authentication -> Providers，啓用你需要接入的登錄方式（比如 GitHub 或 Google）。
獲取密鑰：

如果是 GitHub： 去 GitHub 的 Developer settings -> OAuth Apps 創建應用，拿到 Client ID 和 Client Secret。
如果是 Google： 去 Google Cloud Console 創建 OAuth 客戶端，獲取憑證。

將拿到的密鑰填回 Supabase，並把 Supabase 提供的 Callback URL 填入 GitHub/Google 的配置中。

第二步：召喚 Claude Code 編寫核心邏輯

後端配置好了，接下來就是寫代碼。這也是 Vibe Coding 最爽的環節。

打開終端，喚醒 Claude Code，直接給它下發指令。

核心技巧：一定要把官方文檔餵給 AI！ 不要讓 AI 憑空想象，這樣能極大減少幻覺和報錯。

參考官方文檔幫我用 Next.js 搭建一個項目，並使用 Supabase 實現 GitHub/Google 登錄功能。
請嚴格參考以下 Supabase 官方文檔：
社交登錄說明：https://supabase.com/docs/guides/auth/social-login/auth-github
特別注意，我需要使用服務器端認證方式（Server-Side Auth），請參考這裏：https://supabase.com/docs/guides/auth/server-side/creating-a-client
請幫我生成完整的登錄頁面、回調 API 路由以及中間件配置。

收到指令後，Claude Code 會自動創建文件、編寫鑑權邏輯、配置環境變量模板。

你只需要在生成的 .env.local 文件中，填入你的 NEXT_PUBLIC_SUPABASE_URL 和 NEXT_PUBLIC_SUPABASE_ANON_KEY（在 Supabase 後台的 Project Settings -> API 中可以找到）。

第三步：本地測試與跑通閉環

代碼生成後，在終端輸入：

npm run dev

也可以直接和 Claude Code 說幫我們進行本地部署。

打開瀏覽器訪問 http://localhost:3000，點擊頁面上的登錄按鈕。授權通過後，頁面成功跳轉，打開 Supabase 的 Authentication 面板，你會發現用戶數據已經靜靜地躺在數據庫裏了。

整個過程行雲流水，你甚至連一行復雜的鑑權邏輯都沒手寫！

第四步：推送到 GitHub，一鍵上線（Vercel/Cloudflare）

本地跑通只是第一步，讓全世界看到你的產品才是關鍵。

在終端通過 git commit 將代碼提交。
將代碼推送到你的 GitHub 倉庫。
部署方案 A：Vercel（更省心）登錄 Vercel 官網，選擇 Add New Project，導入剛才的 GitHub 倉庫，在環境變量中填入你的 Supabase URL 和 Key，點擊 Deploy。
部署方案 B：Cloudflare Pages（出海必備、訪問更快更安全）登錄 Cloudflare，進入 Workers & Pages，選擇連接到 GitHub 倉庫。同樣填入環境變量，點擊部署。Cloudflare 的全球邊緣節點會讓你的出海應用訪問速度起飛，並且自帶強大的防護盾。

只需幾十秒，Vercel 或 Cloudflare 就會為你生成一個在線訪問連結。至此，一個具備完整數據庫和會員登錄體系的 Web 產品，就正式誕生了！

這樣，GitHub 登錄和 Google 登錄就好了，其他功能需求，只需要你描述清楚，Claude Code 都可以幫我們快速實現，核心就是找到用戶真實需求！保姆級教程可以查看：

出海獨立開發第一步：用 AI + Supabase 快速實現 GitHub 登錄，為你的網站打通會員體系

顛覆認知！我讓 AI 給我加上了 Google 登錄功能，過程簡單到離譜

寫在最後：AI 時代的獨立開發者思維

很多人還在糾結：“我不會寫代碼，怎麼做產品？”

Vibe Coding 告訴你：代碼只是實現目標的工具，想法和執行力才是真正的護城河。

藉助 Claude Code、Supabase、Vercel/Cloudflare 這樣的神仙工具鏈，你完全可以像拼樂高一樣，把複雜的業務邏輯組裝起來。過去需要數週甚至數月、找幾個程序員花費十萬數十萬才能完成的 MVP（最小可行性產品），現在只需要一個週末，甚至一個晚上。

起步很難，但只要我們開始，就一定會到達。出海網站的核心就是找需求、用 AI 編程實現、搞流量運營。今天我們打通的登錄閉環，只是你出海征途的第一步。

別讓代碼束縛你的想象力，用 AI 賦能，讓你的產品走出國門賺美金！

有想法就去嘗試吧，從做出第一自己自己的產品開始！

如果你也想系統學習如何用 AI 從零做產品，掃描下方二維碼，備註【6】，免費領取我參與整理的《10 萬字 AI 編程實操手冊》！