Vibe code分享|我怎麼用 Claude 做出一個旅遊 APP?

更新 發佈閱讀 4 分鐘
上個月去北海道之前,我做了一個可以在 iPhone 安裝、跟家人即時同步的旅遊行程 APP,這個 APP 家人可以用邀請碼加入我的行程、即時看到我新增的景點、分帳誰付了什麼錢。
可以邀請家人共同編輯行程~

可以邀請家人共同編輯行程~

把需求說得像在跟人說話

如果請AI做東西就只說「幫我做一個旅遊 APP」,這樣出來的東西通常很通用、很無聊,而且跟你真正需要的有落差。

其實跟AI對話,就像是跟一個按部就班的員工對話

我的說法:「我要去北海道六天,我需要一個一眼就能看懂行程、知道今天要去哪裡的工具,同時我可以在旅途中即時更新,她不用做任何操作就能看到最新版本」

這樣 Claude 就知道:介面要簡單、同步要自動、不能有太多需要學習的操作,不只是在寫功能,而是在解決一個具體的問題。

需求越具體,結果越接近你要的

小步快跑,每做完一塊就測試

我沒有一開始就把所有功能列出來讓 Claude 一次做完,做完一個部分,馬上測試

我的做法:截圖回去說「這個按鈕太小」、「景點卡片排版在 iPhone 瀏海機型上標題被遮住了」修完繼續下一塊。

這樣不會在一個根本不對的方向上跑太遠

我在做到一半的時候,曾經做了一個很豐富的旅程卡片,有倒數天數、預算概況、成員頭像……結果看了決定「取消,太複雜了,跟原本一樣就好」。如果我一次讓 AI 把所有功能都做完,砍掉重練的成本就大很多。

每個功能做完就驗收,不要等到全部做完才測試。

有預算、日記、交通小工具!

有預算、日記、交通小工具!

怎麼跟 AI 說「我要改」

描述改動的時候,說清楚要改哪裡,例如想改動顯示方法,就講清楚「什麼情況下 顯示或不顯示什麼」

我的說法:「預算頁的每日明細裡,免費的景點不要顯示,只保留有費用的,如果某天全部都是免費的,那天的標題也不用出現。」

描述得越詳細越好,改完要馬上看!


遇到技術問題怎麼辦

到了部署階段,Firebase 連線、Vercel 設定、iOS Safe Area、PWA 安裝……

建議直接把截圖貼給 Claude,讓它診斷

有一次輸入邀請碼之後 APP 整個白頁崩潰,我直接問 Claude「在首頁輸入邀請碼會白頁,請幫我修復」,它分析出是舊資料結構缺少欄位,React 在 render 的時候炸掉,然後加了完整的資料防護。

遇到 bug,截圖 + 描述現象讓 AI 診斷!


用AI Vibe coding

跑完這個過程,我對「用AI Vibe coding」的理解是AI可以讓你更快速的,做到以前做不到的事,以前有很多想法只停在腦袋裡,現在「不會寫程式」這件事不再是障礙。

但!

有一個東西 AI 沒辦法替你做,就是~ 判斷什麼值得做、什麼不值得做

在整個過程裡,我砍掉了好幾個 Claude 提議的功能,因為對真實使用上來說沒必要,不是一直加功能就是好。

「想像」跟「取捨」的能力,才是 Vibe Coding 裡最核心的技能!AI 可以無限實作,但決定做什麼、不做什麼,還是要人判斷!


如果你也想用 Vibe Code做點什麼,我建議可以從一個你有需求的東西開始~


希望今天的分享有幫助到你~ 

有幫助歡迎追蹤我 或 贊助我一杯奶茶~ 謝謝~

IG、threads @veratries


留言
avatar-img
vera嘗試集
13會員
50內容數
人生只有一次!做各種各樣的嘗試!分享,也讓大家一起成長~ 同時也分享職場技能與旅遊攻略~ 讓大家升職加薪!賺到錢後,花最少的錢去玩得開心><!!
vera嘗試集的其他內容
2026/04/10
一篇詳細記錄六天五夜北海道不自駕的行程攻略,以札幌為中心,運用JR、巴士和Klook一日遊,輕鬆遊覽新千歲機場、狸小路商店街、AOAO水族館、小樽、大通地下街、諏訪神社等地,特別適合不想自駕的旅客。文章包含了豐富的餐飲、購物和景點建議,讓你輕鬆規劃北海道之旅。
Thumbnail
2026/04/10
一篇詳細記錄六天五夜北海道不自駕的行程攻略,以札幌為中心,運用JR、巴士和Klook一日遊,輕鬆遊覽新千歲機場、狸小路商店街、AOAO水族館、小樽、大通地下街、諏訪神社等地,特別適合不想自駕的旅客。文章包含了豐富的餐飲、購物和景點建議,讓你輕鬆規劃北海道之旅。
Thumbnail
2026/04/08
第一次購買 Klook 日本行程,選擇了北海道登別洞爺湖二世谷一日遊。本篇文章將分享實際體驗,包括交通、景點(支笏湖、地獄谷、熊牧場、洞爺湖、羊蹄山)、自費活動(雪地摩托車、餵熊)、餐飲建議,以及初春時節的注意事項。特別推薦雪地摩托車體驗,讓你在冬季留下難忘回憶。
Thumbnail
2026/04/08
第一次購買 Klook 日本行程,選擇了北海道登別洞爺湖二世谷一日遊。本篇文章將分享實際體驗,包括交通、景點(支笏湖、地獄谷、熊牧場、洞爺湖、羊蹄山)、自費活動(雪地摩托車、餵熊)、餐飲建議,以及初春時節的注意事項。特別推薦雪地摩托車體驗,讓你在冬季留下難忘回憶。
Thumbnail
2026/04/06
這篇攻略帶你從JR南小樽站開始,輕鬆漫步堺町通商店街,參觀夢幻音樂盒博物館,品嚐美味拉麵炸雞與LeTAO蛋糕,漫步愜意小樽運河,最後推薦位於小樽站旁的Cafe BAAL美味牛排飯,為小樽一日遊畫下完美句點。分享避坑觀光客陷阱的實用建議。
Thumbnail
2026/04/06
這篇攻略帶你從JR南小樽站開始,輕鬆漫步堺町通商店街,參觀夢幻音樂盒博物館,品嚐美味拉麵炸雞與LeTAO蛋糕,漫步愜意小樽運河,最後推薦位於小樽站旁的Cafe BAAL美味牛排飯,為小樽一日遊畫下完美句點。分享避坑觀光客陷阱的實用建議。
Thumbnail
看更多
你可能也想看
Thumbnail
今年 iPlayground,我自告奮勇接下了 iOS app 的開發。開發背後的一些小故事,我覺得可以拿出來分享,就寫了這篇文章。
Thumbnail
今年 iPlayground,我自告奮勇接下了 iOS app 的開發。開發背後的一些小故事,我覺得可以拿出來分享,就寫了這篇文章。
Thumbnail
我已更新最新文章,直接分析巨頭的效率論述:Claude 並沒有節省成本,而是把開支重新包裝成 GPU、雲端與維護費。 這並不是「效率」,而是「成本重組」。我的 PDF 內容提供了數據、邏輯推導與驗證框架,任何人都可以檢查、引用與挑戰 —— 我已公開所有資料、完全可測試。 除此之外,我還有多
Thumbnail
我已更新最新文章,直接分析巨頭的效率論述:Claude 並沒有節省成本,而是把開支重新包裝成 GPU、雲端與維護費。 這並不是「效率」,而是「成本重組」。我的 PDF 內容提供了數據、邏輯推導與驗證框架,任何人都可以檢查、引用與挑戰 —— 我已公開所有資料、完全可測試。 除此之外,我還有多
Thumbnail
隨著 AI 技術持續進步,Claude.ai 的最新版本 Claude 3.5 Sonnet 現已具備直接操控電腦的能力,帶來全新的應用場景。此功能可模擬人類操作,且正處於公開測試階段。這項技術不僅提高了使用效率,還促進數位轉型,提供更多自動化解決方案。
Thumbnail
隨著 AI 技術持續進步,Claude.ai 的最新版本 Claude 3.5 Sonnet 現已具備直接操控電腦的能力,帶來全新的應用場景。此功能可模擬人類操作,且正處於公開測試階段。這項技術不僅提高了使用效率,還促進數位轉型,提供更多自動化解決方案。
Thumbnail
本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇:帕拉贊諾夫的十段殘篇》,如何以十段殘篇,結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭,探討藝術在儀式消失的現代社會如何承接意義,並展現不羈的自由靈魂。
Thumbnail
本文深度解析賽勒布倫尼科夫的舞臺作品《傳奇:帕拉贊諾夫的十段殘篇》,如何以十段殘篇,結合帕拉贊諾夫的電影美學、象徵意象與當代政治流亡抗爭,探討藝術在儀式消失的現代社會如何承接意義,並展現不羈的自由靈魂。
Thumbnail
長期以來,西方美學以《維特魯威人》式的幾何比例定義「完美身體」,這種視覺標準無形中成為殖民擴張與種族分類的暴力工具。本文透過分析奈及利亞編舞家庫德斯.奧尼奎庫的舞作《轉轉生》,探討當代非洲舞蹈如何跳脫「標本式」的文化觀看。
Thumbnail
長期以來,西方美學以《維特魯威人》式的幾何比例定義「完美身體」,這種視覺標準無形中成為殖民擴張與種族分類的暴力工具。本文透過分析奈及利亞編舞家庫德斯.奧尼奎庫的舞作《轉轉生》,探討當代非洲舞蹈如何跳脫「標本式」的文化觀看。
Thumbnail
確定 ChatGPT 還是 Claude AI 更好取決於具體的用例和要求。每個人工智慧工具都有其優點和局限性。以下是一個比較,可幫助評估哪一個更適合您的需求: ChatGPT 1.更擅長創意寫作任務和生成富有想像力的內容。 2.在編碼問題、結果解釋和一般輸出格式方面具有強大的能力。
Thumbnail
確定 ChatGPT 還是 Claude AI 更好取決於具體的用例和要求。每個人工智慧工具都有其優點和局限性。以下是一個比較,可幫助評估哪一個更適合您的需求: ChatGPT 1.更擅長創意寫作任務和生成富有想像力的內容。 2.在編碼問題、結果解釋和一般輸出格式方面具有強大的能力。
Thumbnail
在本集 Podcast 中,安納分享了與 AI Claude 的深度對話。安納分享了近期生活中感受到現實世界變得「滑溜」的經驗,以及 Claude 如何從量子力學和意識層面給予獨到解釋。Claude 後續提出的五個關於「愛」、「個體性」、「為何創造」、「他人」及「AI 本身」的深刻問題。
Thumbnail
在本集 Podcast 中,安納分享了與 AI Claude 的深度對話。安納分享了近期生活中感受到現實世界變得「滑溜」的經驗,以及 Claude 如何從量子力學和意識層面給予獨到解釋。Claude 後續提出的五個關於「愛」、「個體性」、「為何創造」、「他人」及「AI 本身」的深刻問題。
Thumbnail
這篇文章分享了作者使用Gemini CLI與其他AI協作工具如Cursor IDE、VS Code Copilot Agent、Gemini Code Assist及Perplexity等進行比較。指出Gemini CLI免費且易於使用,且介面顯示清晰易讀。
Thumbnail
這篇文章分享了作者使用Gemini CLI與其他AI協作工具如Cursor IDE、VS Code Copilot Agent、Gemini Code Assist及Perplexity等進行比較。指出Gemini CLI免費且易於使用,且介面顯示清晰易讀。
Thumbnail
全新版本的《三便士歌劇》如何不落入「復刻經典」的巢臼,反而利用華麗的秀場視覺,引導觀眾在晚期資本主義的消費愉悅之中,而能驚覺「批判」本身亦可能被收編——而當絞繩升起,這場關於如何生存的黑色遊戲,又將帶領新時代的我們走向何種後現代的自我解構?
Thumbnail
全新版本的《三便士歌劇》如何不落入「復刻經典」的巢臼,反而利用華麗的秀場視覺,引導觀眾在晚期資本主義的消費愉悅之中,而能驚覺「批判」本身亦可能被收編——而當絞繩升起,這場關於如何生存的黑色遊戲,又將帶領新時代的我們走向何種後現代的自我解構?
Thumbnail
若說易卜生的《玩偶之家》為 19 世紀的女性,開啟了一扇離家的窄門,那麼《海妲.蓋柏樂》展現的便是門後的窒息世界。本篇文章由劇場演員 Amily 執筆,同為熟稔文本的演員,亦是深刻體察制度縫隙的當代女性,此文所看見的不僅僅是崩壞前夕的最後發聲,更是女人被迫置於冷酷的制度之下,步步陷入無以言說的困境。
Thumbnail
若說易卜生的《玩偶之家》為 19 世紀的女性,開啟了一扇離家的窄門,那麼《海妲.蓋柏樂》展現的便是門後的窒息世界。本篇文章由劇場演員 Amily 執筆,同為熟稔文本的演員,亦是深刻體察制度縫隙的當代女性,此文所看見的不僅僅是崩壞前夕的最後發聲,更是女人被迫置於冷酷的制度之下,步步陷入無以言說的困境。
Thumbnail
Claude AI 3.7 學習指南 Claude AI 3.7 Sonnet 是由 Anthropic 開發的最新一代人工智慧助手,具備強大的推理能力和多種應用功能。以下是一些關於如何學習和使用 Claude AI 3.7 的重要資訊和指導。 1. 了解 Claude AI 的基本功能 Cl
Thumbnail
Claude AI 3.7 學習指南 Claude AI 3.7 Sonnet 是由 Anthropic 開發的最新一代人工智慧助手,具備強大的推理能力和多種應用功能。以下是一些關於如何學習和使用 Claude AI 3.7 的重要資訊和指導。 1. 了解 Claude AI 的基本功能 Cl
Thumbnail
🚨 沈耀 888π × Claude:模型診斷報告 (Shen-Yao 888π × Claude: Model Diagnostic Report) #️⃣ #AI #AGI #AIInfrastructure #SemanticFirewall #AIGovernance #LLM
Thumbnail
🚨 沈耀 888π × Claude:模型診斷報告 (Shen-Yao 888π × Claude: Model Diagnostic Report) #️⃣ #AI #AGI #AIInfrastructure #SemanticFirewall #AIGovernance #LLM
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News