開始我的vibe coding之旅(1)

更新 發佈閱讀 4 分鐘

前言:

vocus|新世代的創作平台

我決定以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?

vocus|新世代的創作平台

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

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

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

一開始只知道VS CODE & Cursor.

vocus|新世代的創作平台

功能比較

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

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

所以基本上都是互通的!

使用2年費用預估

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

vocus|新世代的創作平台


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

  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 裡面了

vocus|新世代的創作平台

登入您的google帳號

vocus|新世代的創作平台

工作畫面...大功完成

vocus|新世代的創作平台
vocus|新世代的創作平台

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


留言
avatar-img
James. Pro
0會員
6內容數
每個人都有獨特的經驗,分享而已,望有助益!
你可能也想看
Thumbnail
Vibe Coding 是一種結合 AI 與開發者即時協作的開發方式,能大幅加快專案產出速度。這篇文章整理了我在開發過程中實測有效的三個技巧,從釐清需求、撰寫 PRD,到與 AI 的互動方式,並分享我如何從亂試 prompt 到建立結構清晰的開發流程。
Thumbnail
Vibe Coding 是一種結合 AI 與開發者即時協作的開發方式,能大幅加快專案產出速度。這篇文章整理了我在開發過程中實測有效的三個技巧,從釐清需求、撰寫 PRD,到與 AI 的互動方式,並分享我如何從亂試 prompt 到建立結構清晰的開發流程。
Thumbnail
vibe coding 初期很驚艷,讓人快速建立系統、提高開發效率,但當功能愈來愈複雜,就容易遇到瓶頸。不是 AI 不行,而是缺乏系統思維與基礎架構能力,造成結果偏離預期。我們如何從撞牆期中反思,透過結構化思考重新駕馭 AI。
Thumbnail
vibe coding 初期很驚艷,讓人快速建立系統、提高開發效率,但當功能愈來愈複雜,就容易遇到瓶頸。不是 AI 不行,而是缺乏系統思維與基礎架構能力,造成結果偏離預期。我們如何從撞牆期中反思,透過結構化思考重新駕馭 AI。
Thumbnail
最近學到一個新的名詞Vibe Coding。 一開始我還以為是新的AI 寫程式的方式。 新聞上偶而也會穿插出這個名詞,有個小女孩用Vibe Coding做出什麼東西,然後為之世人驚豔。 昨天想說我也要來用用看,看有多好用。 便上網GOOGLE查詢一下,才知道這是現下流行的Coding方式
Thumbnail
最近學到一個新的名詞Vibe Coding。 一開始我還以為是新的AI 寫程式的方式。 新聞上偶而也會穿插出這個名詞,有個小女孩用Vibe Coding做出什麼東西,然後為之世人驚豔。 昨天想說我也要來用用看,看有多好用。 便上網GOOGLE查詢一下,才知道這是現下流行的Coding方式
Thumbnail
寫給腦中還有火花、卻仍在觀望的你,現在這個年代,有任何商業想法的人,都該會一點 vibe coding。不管你是不是本科、是不是工程師,只要你有商業構想、有一點點行動力,都該動手試。
Thumbnail
寫給腦中還有火花、卻仍在觀望的你,現在這個年代,有任何商業想法的人,都該會一點 vibe coding。不管你是不是本科、是不是工程師,只要你有商業構想、有一點點行動力,都該動手試。
Thumbnail
如果用AI取得成就或是賺到錢,算不算自己努力掙得的結果? 它跟以往我的工作模式不同,能夠大幅拉近我跟全端工程師那遙遠的差距到某一個程度。 如果站在公司的角度上來看我能做的事情一口氣大幅的變多也變快了,這是好事,也能大幅推進專案進度和刪減原本所需要的人力資源。 可是在我看來假如完整資歷全端開發經
Thumbnail
如果用AI取得成就或是賺到錢,算不算自己努力掙得的結果? 它跟以往我的工作模式不同,能夠大幅拉近我跟全端工程師那遙遠的差距到某一個程度。 如果站在公司的角度上來看我能做的事情一口氣大幅的變多也變快了,這是好事,也能大幅推進專案進度和刪減原本所需要的人力資源。 可是在我看來假如完整資歷全端開發經
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
一位工程師爸爸的任務管理革命 大家好,我是一位平凡的軟體工程師,白天專注於 C++ 和 C# 桌面應用程式的開發,晚上則化身為兩個孩子的爸爸。 身為工程師,我解決程式 Bug 得心應手,但面對孩子不肯主動完成任務,卻束手無策。每天回家,總是陷入一場「催促大作戰」...
Thumbnail
一位工程師爸爸的任務管理革命 大家好,我是一位平凡的軟體工程師,白天專注於 C++ 和 C# 桌面應用程式的開發,晚上則化身為兩個孩子的爸爸。 身為工程師,我解決程式 Bug 得心應手,但面對孩子不肯主動完成任務,卻束手無策。每天回家,總是陷入一場「催促大作戰」...
Thumbnail
vibe coding的討論很火熱,我們可以使用瀏覽器的書籤功能,來練習以及製作我們自己的小工具唷。
Thumbnail
vibe coding的討論很火熱,我們可以使用瀏覽器的書籤功能,來練習以及製作我們自己的小工具唷。
Thumbnail
當你用 AI 協助開發專案時,初期像請了位神速的高階工程師,但隨著需求深入,AI 輸出開始「跑偏」,這就是 vibe coding 的甜蜜期盡頭。 想延長這段高效率時光,關鍵在於學會把需求拆成 AI 懂的模組、以業務邏輯驗收結果、建立「確認 → 修正 → 再確認」的回合制流程。
Thumbnail
當你用 AI 協助開發專案時,初期像請了位神速的高階工程師,但隨著需求深入,AI 輸出開始「跑偏」,這就是 vibe coding 的甜蜜期盡頭。 想延長這段高效率時光,關鍵在於學會把需求拆成 AI 懂的模組、以業務邏輯驗收結果、建立「確認 → 修正 → 再確認」的回合制流程。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News