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