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