# 策展 · X (Twitter) 🔥🔥🔥🔥

> 📖 本站完整內容索引（documentation index）：[llms.txt](/llms.txt)

> 作者：Lovable (@Lovable) · 平台：X (Twitter) · 日期：2026-06-18

> 原始來源：https://x.com/Lovable/status/2067326328110494129

## 中文摘要

Lovable 透過原生 MCP 整合 Claude，實現從設計原型到終端部署的端到端開發流程。

**核心整合架構**
Lovable 宣布與 Claude 達成深度整合，透過原生的 MCP（Model Context Protocol）伺服器，讓使用者能直接在 Claude 對話介面中存取並管理 Lovable workspace。這項整合打破了設計與開發的界線，使用者現在可以直接在 Claude 中審核專案、查詢已上線應用的即時資料，或是啟動全新的開發建置。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1781755212646-0l73ymzh.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1b26b9608eecf767.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 透過 Lovable MCP 整合功能，AI 助理自動讀取並分析用戶的專案內容，並提出功能擴充建議。

**啟用與操作流程**
若要開始使用此整合功能，請依照下列步驟進行設定：
1. 開啟 Claude 網頁版或應用程式。
2. 點擊對話介面中的「+」號。
3. 選擇「Connectors」。
4. 點選「Browse Connectors」。
5. 搜尋並選擇「Lovable」進行連結。

**Claude Code 與終端機開發**
針對進階開發者，Lovable 支援透過 Claude Code 在終端機中進行開發，讓使用者能在背景執行 Agent，並以程式化方式管理 workspace。透過單一指令即可完成開發流程，無需中斷開發節奏：
- `/build`：啟動建置流程。
- `/deploy`：執行專案部署。
- `/db`：管理資料庫設定。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1781755198104-xzqscoos.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/2fdfaefb86f75718.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 影片展示了 Lovable 與 Claude Code 協作開發網頁應用程式的流程，包括需求分析、程式碼生成與設計介面匯入。

**AI 輔助開發與數據分析**
透過 MCP 整合，AI 助理能深入分析專案內容並提供具體建議。例如在「Fantasy League Hub」專案中，系統能自動分析並建議開發「互動式選秀室（Live Leaderboard & Draft Room）」、「球員卡系統（Builder Profile Cards）」以及「使用者註冊與候補名單流程（Sign-up & Waitlist Flow）」。此外，在開發「Onyx Audio」商店儀表板時，系統能自動分析各商店的營運數據，例如：
- Onyx Audio：轉換率 1.8%、1,620 筆訂單、營收 $221,500。
- Lumen & Co：轉換率 1.9%、720 筆訂單、營收 $64,100。
- Beacon Hardware：轉換率 1.9%、1,320 筆訂單、營收 $148,300。
- Wexford Watches：轉換率 1.9%、940 筆訂單、營收 $198,700。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1781755248777-0two2pz1.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/da7c2c4fe6922666.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 透過 Lovable MCP 工具，使用者輸入指令自動生成 Onyx Audio 的數據儀表板。

**從原型到產品的快速部署**
Lovable 強化了從設計到應用的轉換效率，使用者可透過「Claude Design」將設計介面一鍵匯出至 Lovable。在匯出過程中，系統支援無縫整合身分驗證（Auth）、資料庫、即時 URL 以及內建的 AI 功能。使用者亦可利用平台內的「Send to」功能，將專案直接傳送至 Claude Code 進行後續開發，並在 Lovable 編輯器中即時預覽與更新設計調整（如調整色調、顯示開關或數值設定），實現高效的開發循環。

<video src="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1781755231727-sfx3cauh.mp4" poster="https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/b75f8a029e0fa79b.jpg" controls playsinline preload="metadata" style="max-width:100%;height:auto;display:block;margin:1rem 0"></video>
> 影片展示了使用者如何透過 Lovable 平台將設計專案發送至 Claude Code 進行整合的操作流程。

## 媒體內容

**影片展示了 Lovable 與 Claude Code 協作開發網頁應用程式的流程，包括需求分析、程式碼生成與設計介面匯入。**

**影片中的 Prompt 與操作**

Prompt（00:01）：

```
查看我最近在 Lovable 上的專案，並提出三種擴充建議
```

原文：Look at my most recent project on Lovable and suggest three ways to extend it

Prompt（00:17）：

```
/lovable:build 為 Onyx 製作此儀表板
```

原文：/lovable:build dashboard of this for Onyx

操作步驟：

1. （00:04）點擊「Always allow」確認授權
2. （00:26）點擊「Share」按鈕開啟分享選單
3. （00:27）點擊「Send to...」選擇匯出目的地
4. （00:28）點擊「Claude Code」旁的「Send」按鈕
5. （00:32）點擊「Send to Lovable MCP」按鈕
6. （00:35）點擊「Open in Lovable」按鈕

**透過 Lovable MCP 整合功能，AI 助理自動讀取並分析用戶的專案內容，並提出功能擴充建議。**

**影片中的 Prompt 與操作**

Prompt（00:00）：

```
查看我在 Lovable 上最近的專案，並建議三種擴充它的方法
```

原文：Look at my most recent project on Lovable and suggest three ways to extend it

操作步驟：

1. （00:02）點擊 "Always allow" 按鈕授權工具存取權限

**影片展示了使用者如何透過 Lovable 平台將設計專案發送至 Claude Code 進行整合的操作流程。**

**影片中的 Prompt 與操作**

操作步驟：

1. （00:00）點擊「Share」按鈕
2. （00:01）點擊「Send to...」分頁
3. （00:02）點擊 Claude Code 的「Send」按鈕
4. （00:04）點擊「Tweaks」設定選單
5. （00:04）調整「accent」設定為「Gradient」
6. （00:04）開啟「showTicker」開關
7. （00:09）點擊「Open in Lovable」連結

**透過 Lovable MCP 工具，使用者輸入指令自動生成 Onyx Audio 的數據儀表板。**

**影片中的 Prompt 與操作**

Prompt（00:06）：

```
/lovable:build 為 Onyx 建立儀表板
```

原文：/lovable:build dashboard of this for Onyx

操作步驟：

1. （00:03）輸入指令 /build
2. （00:06）輸入指令 /lovable:build dashboard of this for Onyx
3. （00:09）系統完成建置並顯示預覽連結
4. （00:11）點擊連結開啟儀表板預覽頁面

## 標籤

MCP, 功能更新, AI-native, Lovable, Anthropic, Claude