[實戰分享] 我用 Vibe Coding 做了一個資源策展網站！10 款私藏 AI 開發工具大公開

TL;DR：身為非工程師，我用 Vibe Coding 方式實際做出一個資源策展網站，同時公開 Lovable、Cursor 等 10 款私藏 AI 開發工具。

用 Vibe Coding「策展」我的 AI 開發旅程

這一年多來，我深度投入在 Vibe Coding（AI 輔助編程） 的領域，累積了不少實戰經驗與專案。最近，我決定用 Vibe Coding 的方式，為自己這段時間的學習做一個總整理。

我使用 Manus 快速搭建了一個Vibe Coding 資源分享網站，裡面收錄了我認為不錯的工具、我追蹤的開發者，以及我自己撰寫的相關文章與專案案例。

這篇文章，我將從網站中精選出 10 個我最常使用、也最推薦的 Vibe Coding 相關資源，分享給想踏入這個領域的朋友們。

🛠️ 核心開發與 IDE 工具

1. Lovable：快速全端架設神器

適合對象： 想快速做出完整產品的開發者

這是我用了一整年的主力工具。它是一個非常好上手的全端架設平台，讓我能透過對話（Vibe Coding）直接把前後端架設出來。它內建資料庫、支援 API 串接、可自訂網域，甚至連數據分析和安全性掃描都包辦了。

實戰案例： 我的個人品牌網站「創作邦」就是全權使用 Lovable 架設，至今已穩定運行一年。

2. Cursor：AI 程式碼編輯器

適合對象： 習慣使用 IDE 或想開發電腦本地工具的人

Cursor 是我第一個接觸的 AI IDE 工具。雖然新手剛開始看不到所見即所得的畫面可能會有點阻力，但只要稍微研究一下部署流程，就會發現它的強大。

實戰案例： 我用 Cursor 開發最多的項目是 Figma Plugin。目前我已成功製作並發佈了 5 個外掛，都能在 Figma 官方商店中找到（我的資源網站上有列出詳細清單）。

3. Google AI Studio：免費測試想法的遊樂場

適合對象： 第一次嘗試 Vibe Coding 或需要串接 Google 服務的人

這是一個能免費測試各種想法的好工具，非常推薦給初學者。特別是現在 Gemini 3 模型 生成的 UI 介面美感大幅提升。 最大優勢： 串接 Google 自家 API（如 Nano Banana、Google Maps API）超級方便，通常只要一句話就能搞定。

4. Apps Script：自動化的入門磚

適合對象： 依賴 Google Workspace 工作的人

如果你是 Vibe Coding 新手，從 Google Sheet 搭配 Apps Script 入門是非常好的選擇。

實戰案例： 我曾用它來做群發信件系統、將資料自動傳輸到自架網站，以及抓取關鍵字搜尋排名的自動化腳本。

🎨 UI 設計與素材資源

5. 21st：複製貼上就能用的 UI 庫

想要好看的 UI，絕對不能錯過這個網站。上面有各種 Hero Section、Button、Footer 等精美組件。 最大特色： 除了複製程式碼，它還提供專屬於 Lovable、Cursor、Claude Code、V0、Replit、Bolt.new 的 Prompt（提示詞），讓你直接複製貼上到 AI 工具中即可使用。

6. Figma：設計與溝通的橋樑

做網站難免需要做圖或設計 UI 組件，Figma 免費又強大，且官方社群有海量資源，搭配 Vibe Coding 使用簡直如虎添翼。

Figma Slides： 製作簡報（可用 Plugin 輔助）。
Figma Make： 真正的 Vibe Coding 功能，能直接生成網站。
FigJam： 白板工具，適合梳理流程圖。

☁️ 部署、圖床與資料處理

7. Zeabur：台灣團隊開發的 AI 架站首選

用 AI 生成的服務通常初期流量不大，自己租伺服器往往不划算。Zeabur 提供了超方便且便宜的部署方案。 推薦理由： 除了價格親民，他們是 台灣公司，客服體驗超級棒！有時候在 Threads 上發文提到他們，官方人員甚至會直接出現回覆，支援度滿分。

8. ImageKit：高品質圖床

在 Vibe Coding 的過程中，為了方便維護，我們常需要一個穩定的圖片連結。我試過很多圖床都會嚴重壓縮畫質，但 ImageKit 在少量使用的情況下不僅免費，還能維持圖片的高畫質。

9. Firecrawl：網站內容爬取神器

這是一個設計非常好看的服務。只要貼上連結，它就能快速把網站內容抓下來並輸出成 Markdown 或 Json 格式。這對於想把網頁內容轉化為 Vibe Coding 的 Context（上下文資料）來說，超級方便。

⚡ 自動化串接

10. n8n / Make / Apple Shortcuts（捷徑）

Vibe Coding 做出來的網站，如果能再串接這些自動化工具，威力會倍增。

實戰案例：網站 x n8n： 我曾把網站做成一個「操控介面」來控制 n8n 的自動化流程。網站 x Apple Shortcuts： 「創作邦」的 AI 新知分享區塊串接了蘋果捷徑，讓我可以一鍵把 X（Twitter）上的文章自動發布到我的網站上。

🔥 特別推薦：本次網站的幕後功臣 —— Manus

這次介紹的「Vibe Coding 資源網站」，其實是用 Manus 做的。

Manus 原本不是定位在 Vibe Coding 工具，而是擅長用 AI Agent（代理人） 去爬資料、處理複雜任務。但自從它推出 Vibe Coding 功能後，我發現它意外地適合製作「資料整理類」的網站。

為什麼選 Manus？ 它可以直接幫我爬取內容、自動抓圖，然後搭建網站。我之所以能在 兩天內 就把這個網站做起來，是因為大部份時間我只需要給它方向和資源連結，它就能搞定剩下的工程，甚至連網站上的介紹文案都是它讀取內容後自動撰寫的。

📚 想學習 Vibe Coding？

如果你看完這些工具覺得手癢想嘗試，或是想更有系統地學習，我非常推薦 Mosky 老師 的課程。

Mosky 擁有豐富的教學經驗，非常擅長引導非工程師背景的人掌握技術。他的課程不只教工具操作，更核心的是傳授**「程式思維」與「1% 關鍵知識」**，這能幫你擺脫跟 AI 鬼打牆的困境，大幅提升成功率。

【Mosky 從零開始 AI 寫程式】

課程內容： 涵蓋 ChatGPT、Cursor 等工具，從需求分析、除錯心法到 10+ 個實戰案例。
適合對象： 零基礎小白、想優化工作流程的設計師或 PM。

👉點擊這裡查看課程詳情(結帳輸入專屬折扣碼 KEVIN 可再折 $250)

結語與資源連結

未來 Vibe Coding 只會越來越方便，我也會繼續嘗試製作更多好玩的網站和工具，並整理在我的「創作邦」以及這次的新網站中。希望這些內容能對大家有幫助！

如果你喜歡這篇文章，歡迎分享給更多對 AI 和設計有興趣的朋友。

🔗 相關連結整理

Vibe Coding 資源網站（本站）：https://vibecoding.manus.space (收錄 50+ 相關資源、我的案例與經驗文章)
Manus 註冊連結： https://manus.im/invitation/ZNJ5UOJWHLMWEIJ (透過連結加入可免費獲得 500 點，我也能獲得點數來維護網站，感謝支持！)
我的社群帳號： https://kevinlearn.com (追蹤我獲取更多 AI、設計與工具應用的分享)

本文由 Kevin 撰寫，分享請註明出處。