開始我的vibe coding之旅(1)

更新 發佈閱讀 4 分鐘

前言:

raw-image

我決定以firebase studio當作我的vibe coding之旅~以下引用維基百科的介紹。

至於為什麼我會想要開始使用,主要是我聽了這篇訪談~覺得超棒的!!
VK科技閱讀 apple podcastEP136. 要當 AI 的老闆!
所以起心動念了vibe coding的想法

Firebase Studio(原名Project IDX)是由Google開發的線上整合開發環境(IDE) 。[ 1 [ 2 ]它是基於Visual Studio Code,其基礎架構運行在Google Cloud上。除了包含VS Code支援的功能、語言和外掛程式外,它還擁有 Google 建置的獨特功能。這些功能包括由Gemini支援的內建生成式人工智慧助理、Nix整合和Android模擬器[ 3 [ 4 [ 5 [ 6 ] Google 也提供JavaScriptPythonGo專案模板,以及NodeAngularFlutterNext.jsReactFirebaseGoogle MapsFlask等眾多Web跨平台框​​架的模板。[ 7 ]
該應用程式最初只能透過註冊候補名單才能存取。它於 2024 年 5 月 14 日發布了公開測試版。[ 8 ] 2025 年 4 月 15 日,它從 Project IDX 更名為 Firebase Studio。[ 1 ]

甚麼是vibe coding?

raw-image

這是我查了gemini 的回答。至於為何選擇google體系的firebase studio呢?

因為我本來就有付費gemini pro的版本,所以想說同體系使用,未來也比較好擴展。

但是我還是有請AI幫忙查詢成本~可以看一下!

一開始只知道VS CODE & Cursor.

raw-image

功能比較

後來問了一下,Google也有類似程式,所以又比較了一下功能

raw-image
  • 如果您用 Project IDX 做了一個網站,您可以隨時把程式碼下載下來,改用 VS Code 繼續寫。
  • 如果您用 VS Code 寫了一半,覺得太累,也可以把檔案丟進 Cursor 開始用 Vibe Coding 的方式讓 AI 接手。

所以基本上都是互通的!

使用2年費用預估

最後我考慮]未來兩年要持續使用vibe coding情形下去比較

raw-image


推薦使用策略:階段性轉移

  1. 第一階段 (第 1~3 個月):使用 Project IDX (成本 $0)\
    原因: 完全免費,不用安裝環境,隨開隨用。您可以利用這段時間驗證您的產品點子是否可行。如果不做了一毛錢都不虧。
    結合優勢: 熟悉 Gemini,IDX 內建的就是 Gemini,這對您來說學習曲線最低。
  2. 第二階段 (若產品驗證成功,需加速開發):轉向 Cursor (月付 $20)
    原因: 當您的 PoC 變成正式產品,程式碼變複雜,或者您急著要上線功能時,Cursor 的強大 AI 編輯能力(Vibe Coding)才會展現出它 $20 美金的價值。這時候再付費,是用產品的潛在獲利來養工具。
  3. 備案 (長期維護):VS Code + Continue (成本 $0)
    原因: 如果產品進入穩定期,不需要每天大量寫 Code,只是偶爾修修 Bug,那就退回到免費的 VS Code,搭配免費的 Gemini API 即可。

開始使用與登入第一個畫面

google 搜尋project idx -->顯示目前已經被整併到firebase 裡面了

raw-image

登入您的google帳號

raw-image

工作畫面...大功完成

raw-image
raw-image

目前要做那些專案app還在思考,有新的app再發上來讓大家試用囉!!
如果試用上有甚麼有趣想法,歡迎討論!


留言
avatar-img
留言分享你的想法!
avatar-img
James. Pro
0會員
6內容數
每個人都有獨特的經驗,分享而已,望有助益!
你可能也想看
Thumbnail
不是每個人都適合自己操盤,懂得利用「專業」,才是績效拉開差距的開始
Thumbnail
不是每個人都適合自己操盤,懂得利用「專業」,才是績效拉開差距的開始
Thumbnail
如果用AI取得成就或是賺到錢,算不算自己努力掙得的結果? 它跟以往我的工作模式不同,能夠大幅拉近我跟全端工程師那遙遠的差距到某一個程度。 如果站在公司的角度上來看我能做的事情一口氣大幅的變多也變快了,這是好事,也能大幅推進專案進度和刪減原本所需要的人力資源。 可是在我看來假如完整資歷全端開發經
Thumbnail
如果用AI取得成就或是賺到錢,算不算自己努力掙得的結果? 它跟以往我的工作模式不同,能夠大幅拉近我跟全端工程師那遙遠的差距到某一個程度。 如果站在公司的角度上來看我能做的事情一口氣大幅的變多也變快了,這是好事,也能大幅推進專案進度和刪減原本所需要的人力資源。 可是在我看來假如完整資歷全端開發經
Thumbnail
vibe coding的討論很火熱,我們可以使用瀏覽器的書籤功能,來練習以及製作我們自己的小工具唷。
Thumbnail
vibe coding的討論很火熱,我們可以使用瀏覽器的書籤功能,來練習以及製作我們自己的小工具唷。
Thumbnail
一位工程師爸爸的任務管理革命 大家好,我是一位平凡的軟體工程師,白天專注於 C++ 和 C# 桌面應用程式的開發,晚上則化身為兩個孩子的爸爸。 身為工程師,我解決程式 Bug 得心應手,但面對孩子不肯主動完成任務,卻束手無策。每天回家,總是陷入一場「催促大作戰」...
Thumbnail
一位工程師爸爸的任務管理革命 大家好,我是一位平凡的軟體工程師,白天專注於 C++ 和 C# 桌面應用程式的開發,晚上則化身為兩個孩子的爸爸。 身為工程師,我解決程式 Bug 得心應手,但面對孩子不肯主動完成任務,卻束手無策。每天回家,總是陷入一場「催促大作戰」...
Thumbnail
寫給腦中還有火花、卻仍在觀望的你,現在這個年代,有任何商業想法的人,都該會一點 vibe coding。不管你是不是本科、是不是工程師,只要你有商業構想、有一點點行動力,都該動手試。
Thumbnail
寫給腦中還有火花、卻仍在觀望的你,現在這個年代,有任何商業想法的人,都該會一點 vibe coding。不管你是不是本科、是不是工程師,只要你有商業構想、有一點點行動力,都該動手試。
Thumbnail
Vibe Coding 是一種結合 AI 與開發者即時協作的開發方式,能大幅加快專案產出速度。這篇文章整理了我在開發過程中實測有效的三個技巧,從釐清需求、撰寫 PRD,到與 AI 的互動方式,並分享我如何從亂試 prompt 到建立結構清晰的開發流程。
Thumbnail
Vibe Coding 是一種結合 AI 與開發者即時協作的開發方式,能大幅加快專案產出速度。這篇文章整理了我在開發過程中實測有效的三個技巧,從釐清需求、撰寫 PRD,到與 AI 的互動方式,並分享我如何從亂試 prompt 到建立結構清晰的開發流程。
Thumbnail
最近學到一個新的名詞Vibe Coding。 一開始我還以為是新的AI 寫程式的方式。 新聞上偶而也會穿插出這個名詞,有個小女孩用Vibe Coding做出什麼東西,然後為之世人驚豔。 昨天想說我也要來用用看,看有多好用。 便上網GOOGLE查詢一下,才知道這是現下流行的Coding方式
Thumbnail
最近學到一個新的名詞Vibe Coding。 一開始我還以為是新的AI 寫程式的方式。 新聞上偶而也會穿插出這個名詞,有個小女孩用Vibe Coding做出什麼東西,然後為之世人驚豔。 昨天想說我也要來用用看,看有多好用。 便上網GOOGLE查詢一下,才知道這是現下流行的Coding方式
Thumbnail
當你用 AI 協助開發專案時,初期像請了位神速的高階工程師,但隨著需求深入,AI 輸出開始「跑偏」,這就是 vibe coding 的甜蜜期盡頭。 想延長這段高效率時光,關鍵在於學會把需求拆成 AI 懂的模組、以業務邏輯驗收結果、建立「確認 → 修正 → 再確認」的回合制流程。
Thumbnail
當你用 AI 協助開發專案時,初期像請了位神速的高階工程師,但隨著需求深入,AI 輸出開始「跑偏」,這就是 vibe coding 的甜蜜期盡頭。 想延長這段高效率時光,關鍵在於學會把需求拆成 AI 懂的模組、以業務邏輯驗收結果、建立「確認 → 修正 → 再確認」的回合制流程。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News