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