2025-8-14 清陽
今天給大家分享一個強大的工作流程：Lovable — GitHub — Cursor。
雖然 Lovable 和 Cursor 都是流行的工具，但它們各有其優點和局限性。
但當一起使用時，它們可以很好地互補，您可以獲得兩全其美的效果。
此工作流程讓您可以利用 Lovable 的快速設計生成和 Cursor 的 AI 驅動編碼環境來精確構建更強大的應用程序。
我將向您展示如何逐步連接它們并創建無縫的工作流程。
在Lovable中，將您的項目與Github連接起來，這樣代碼就可以實時同步到GitHub。
在 Cursor 中，你可以將項目代碼克隆到本地并進行編輯。之后，你可以隨時同步到 GitHub。
一旦同步，更新將立即反映在 Lovable 中。
然后，您可以根據需要選擇使用 Lovable 或 Cursor 進行工作。兩者之間可無縫切換。
對于專注于前端的設計來說，Lovable 直觀且快速。但當需要改進或添加實際功能時，你很快就會遇到瓶頸。
它根本不適合開發可靠的應用程序。而且，Lovable 的免費計劃也很容易達到使用上限。
這就是 GitHub 和 Cursor 的用武之地。GitHub 充當了 Lovable 和 Cursor 之間的橋梁。從它的名字就可以看出“ GitHub = Git + Hub ”。Git 是管理代碼版本的工具。GitHub 是一個托管 Git 存儲庫并增強協作的平臺。
而 Cursor 就像一個帶有 AI 助手的代碼編輯器。它比 Lovable 強大得多。你可以更精確地調試、優化和構建代碼。
缺點是，如果你編程經驗有限，Cursor 可能會讓你感到不知所措，而且它不夠簡單，不適合前端探索。這就是為什么 Lovable 和 Cursor 相輔相成的原因。
但是如何讓 Lovable、Cursor 和 GitHub 協同工作呢？
接下來，我將逐步引導您完成工作流程！
首先，你需要有一個 GitHub 帳戶。
那就用 Lovable 來構建一些東西吧。我在一篇新聞通訊里提到過 Lovable 。它很容易上手。
為了這個演示，我創建了一個簡單的“像我 5 歲一樣解釋它”應用程序。
您可以隨時通過點擊右上角的 GitHub 圖標選擇連接到 GitHub。
如果單擊該圖標，將出現以下對話框：
連接到 Github 帳戶后，此對話框將顯示另一個選項，供您將此“項目”連接到您的 Github。請確保它也已連接。
打開 Cursor。第一步是選擇一個文件夾。這就是項目所在的位置。
接下來，您只需在 Cursor 中輸入以下內容：
克隆此 repo：[你的項目 Github 鏈接]此repo：[你的項目 Github 鏈接]
然后 Cursor 會告訴你該怎么做。設置起來非常簡單直接。
您實際上是在安裝“依賴項”，即下載并設置項目正常運行所需的所有包。
按照說明，我打開了本地服務器，它在 Lovable 中顯示了完全相同的設計。
假設現在我想在 Cursor 中進行一些修改。CTA 按鈕的懸停效果太過分了。
我在 Cursor 的提示窗口中輸入了以下內容：
刪除懸停時“解釋一下！”CTA 上的放大效果。懸停時對“解釋一下！ ” CTA產生影響。
然后就修復了：
您可以隨時選擇將代碼從 Cursor 同步到 GitHub。
但是，您會發現選項比您預期的要多得多，而只有一個選項 — — 同步。
Git 就是這樣運作的。它將版本控制分解成多個小的、具體的操作，以便你進行精確控制。
這在處理大型項目時尤其有用。想象一下，當多人協作時，所有本地模型都同步到一個中心模型，而且每個人都只能選擇同步，沒有其他選擇，那該有多混亂。
我在下面畫了一張圖表來幫助您更好地理解所有這些命令。
您不必親自輸入這些命令，但是當您在 Cursor 中看到這些術語并感到困惑時，該圖表可以作為有用的參考。
首先，點擊這個“分支”圖標切換到源代碼控制面板。然后點擊“+”圖標“暫存更改”，使其準備好提交。
然后根據您的需要，您可以在“提交”下拉菜單中選擇一個選項。
如果您只想直接同步，請使用“提交和同步”。
你看到“提交”頂部的消息框了嗎？它就像一個版本歷史記錄名稱，方便你更好地跟蹤更改。如果你將其留空，Cursor 會根據你所做的更改自動生成一條提交消息。
現在就是神奇的一步。因為你什么都不用做。
你應該會立即看到更新自動同步到 Lovable 中。太酷了！
如果您查看上面的快照，它會在聊天窗口中顯示來自 Cursor 的最新修訂。
然后，您可以根據需要選擇繼續在 Lovable 中構建或切換到 Cursor。
如果您想與某人合作，只需在 GitHub 上的項目倉庫中添加一位合作者即可。前往項目 → 設置 → 合作者 → 添加人員
一旦添加，他們也可以使用 Cursor 實時協作該項目。
感謝閱讀。特別感謝 Junaid，在我準備課程期間與我分享了工作流程。
下周見，
欣然
-
PS：幾天前我做了一個關于創建 AI 原型的演講，并演示了一些示例。如果你也對這個話題感興趣，可以去看看。你可能會喜歡我和觀眾現場演示的冰淇淋搭配應用。
