# Lovable IDE自动化部署插件

`Claude Code` `Lovable` `IDE插件` `自动化部署` `GitHub同步`

# 🚀 Lovable + Claude Code = 超级能力

## **在 IDE 中以 10 倍速度编辑 Lovable 项目**

不再需要在 Lovable 和 Claude 之间来回复制粘贴。不再需要处理双向同步的麻烦。不再为简单改动消耗大量 API 额度。

**Lovable Claude Code 插件将 IDE 的强大能力直接带到你的 Lovable 项目中。** 借助 AI 辅助编辑代码，自动部署，让 Claude Code 处理与 Lovable Cloud 同步的所有复杂事务。

### **你将获得：**

✨ 在 IDE 中直接编辑 Lovable 项目，充分发挥 Claude Code 的全部能力
🗺️ **项目结构地图** - 让 Claude 更快速地浏览你的代码库（v1.7.0 新功能！）
⚡ **自动推送到 GitHub** - 每次任务完成后自动提交并推送
🚀 **自动部署到 Lovable** - 无需手动执行命令
🤖 **完整工作流自动化** - 从代码变更到上线
💰 **节省额度** - 用你的 Claude 订阅处理繁重工作
🔄 **零摩擦同步** - 代码、GitHub 与 Lovable Cloud 三方无缝衔接
🛡️ **自动密钥检测** - 永远不会遗漏所需的 API Key
⚡ **即时配置** - 自动生成项目上下文
✅ **内置验证** - 每次部署后自动运行测试

---

## **你正在解决的问题**

使用 Lovable 体验很好……直到它不再那么好：

- 😤 **上下文切换之痛** - 后端用 Lovable UI，前端用 IDE，来回切换没完没了
- 💸 **额度消耗** - Lovable 要收费的事，Claude Code 通过你的订阅能更便宜地搞定
- 🤷 **同步困惑** - "什么会自动同步？什么需要手动部署？"永远搞不清楚
- ⏱️ **手动工作流** - 复制提示词 → 粘贴到 Lovable → 等待响应 → 重复
- 🔑 **密钥管理混乱** - 追踪每个函数需要哪些密钥、哪些已配置、哪些还缺失
- 🐛 **部署盲区** - 部署后没有自动化测试，只能祈祷没出问题

**这个插件消除了以上所有摩擦点。**

---

## **工作原理（90 秒了解）**

### **1️⃣ 一次性配置**
```bash
/lovable:init
```
Claude Code 扫描你的项目，提问几个问题，然后生成包含所需上下文的 `CLAUDE.md`。

### **2️⃣ 进行你的修改**
像平常一样在 IDE 中编辑代码，Claude Code 配合 AI 处理复杂部分。

### **3️⃣ 一切自动完成**
```bash
/lovable:deploy-edge    # 部署到 Lovable
/lovable:sync           # 保持密钥/配置同步
```

就这些。无需手动提示词。无需切换上下文。无需担心遗忘步骤。

---

## **真实工作流**

### **🎯 手动模式（完全掌控）**
```
你："给 send-email 函数添加邮件通知"
     ↓
Claude Code：创建代码
             ↓
展示给你："用这个提示词部署：'部署 send-email edge 函数'"
          以及："⚠️ 需要 RESEND_API_KEY"
           ↓
你：将提示词复制粘贴到 Lovable（只需 10 秒）
结果：✅ 函数已部署，测试通过，你已收到通知
```

### **🚀 全自动模式（Yolo Mode）**
```
你："添加邮件通知"
     ↓
Claude Code：创建代码，检测所需密钥
        ✅ 自动提交变更
        ✅ 推送到 GitHub
             ↓
Claude：🤖 自动检测后端变更
        🤖 导航到 Lovable
        ✅ 提交部署请求
        ✅ 运行验证测试
        ✅ 确认成功

完成。零手动操作。无需 git 命令。无需部署命令！
```

**v1.5.0 改进：** 基于 Hook 的自动推送，100% 可靠地自动提交和推送！
**v1.3.0 新功能：** 启用自动部署后，Claude 在 git push 后自动部署到 Lovable！

---

## **为你节省大量时间的核心功能**

### ⚡ **自动同步与自动推送**（v1.5.0 基于 Hook！）
使用 Claude Code Hook 实现无缝 GitHub 集成——始终同步，始终最新，100% 可靠！

**自动同步（启动 Hook）：**
```
Claude 启动 → Hook 拉取最新代码 → 你在最新代码上工作 → 无冲突！
```
Claude 开始工作时，自动从 GitHub 拉取最新变更。仅在主分支且无未提交变更时运行。

**自动推送（停止 Hook）：**
```
做出变更 → 任务完成 → Hook 触发 → 自动提交 → 自动推送 → 变更进入 GitHub！
```
Claude 完成任何任务后，自动提交并推送。无需手动 git 命令！

**为什么用 Hook？** Hook 保证每次都能执行，让同步操作比基于技能的方案更可靠。自动同步保持你的代码最新，自动推送保持 GitHub 最新！

### 🚀 **自动部署到 Lovable**（v1.3.0）
将后端变更推送到主分支，Claude 自动部署到 Lovable。无需命令，无需复制粘贴，无需切换上下文。

```
自动推送到 GitHub → Claude 检测变更 → 自动部署 → 测试通过 → 完成！
```

**完整自动化：** 两项功能都启用后，Claude 处理从代码变更到上线的一切！

### 🔐 **智能密钥检测**
Claude Code 通过扫描代码自动找出每个函数所需的所有密钥。不再出现"为什么这个函数会失败？"——我们提前告知你："你需要 STRIPE_WEBHOOK_SECRET。"

### 🔄 **自动同步命令**
团队成员在 Lovable Cloud 中添加了密钥？运行 `/lovable:sync`，项目配置立即更新。不再出现配置不同步的情况。

### ⚡ **自动运行测试**
启用后，每次部署后自动运行测试。几秒内发现问题，而不是等用户反馈 bug。

### 📊 **密钥状态仪表板**
`CLAUDE.md` 清晰显示哪些密钥已配置（✅）、哪些需要设置（⚠️）。一眼就知道是否可以部署。

### 🎯 **上下文全知晓**
Claude Code 了解你的生产 URL、数据库表、Edge 函数、密钥和规范。问它任何关于项目的问题——它已经知晓。

---

## **安装（2 分钟）**

### **方式一：通过应用市场安装（推荐）**

```bash
# 在 Claude Code 中运行：
/plugin marketplace add 10K-Digital/lovable-claude-code

# 安装插件：
/plugin install lovable@10k-digital
```

💡 **提示：** 在 Claude Code 设置中启用自动更新，始终自动获取最新版本。

### **方式二：本地安装**

克隆或下载此仓库，然后：
```bash
cp -r lovable-plugin/.claude-plugin your-project/.claude-plugin
cp -r lovable-plugin/commands your-project/.claude/commands
cp -r lovable-plugin/skills your-project/.claude/skills
```

### **方式三：检查前置条件** ✓

开始前，请确保：
- ✅ 你的 Lovable 项目已启用 GitHub 同步（[文档](https://docs.lovable.dev/integrations/github#about-github)）
- ✅ Claude Code 已配置你的 GitHub 仓库
- ✅ （可选）安装 [Chrome 版 Claude 扩展](https://chrome.google.com/webstore/detail/claude/pebppomjfocnoigkeepgbmcifnnlndla)以使用全自动模式

---

## **前 5 分钟上手指南**

```bash
# 1. 初始化你的项目
/lovable:init

# 2. 回答问题（1 分钟）
#    - 你的生产 URL 是什么？
#    - 启用全自动模式吗？（推荐！）
#    - 等等...

# 3. 开始编码！
# Claude Code 现在已了解你的项目一切情况

# 4. 推送你的变更：
git push origin main
# 启用全自动模式后：自动部署后端变更！
# 无需 /deploy-edge 命令

# 5. 保持同步：
/lovable:sync
# 用最新密钥/配置更新 CLAUDE.md
```

---

## **命令速览**

| 命令 | 功能 | 使用时机 |
|------|------|----------|
| `/lovable:init` | 配置你的项目 | 首次设置 |
| `/lovable:map` | 生成项目结构地图 | 帮助 Claude 更快导航（新功能！） |
| `/lovable:sync` | 从 Lovable Cloud 刷新配置 | 团队添加密钥/函数后 |
| `/lovable:deploy-edge` | 部署 Edge 函数 | 代码变更后（或全自动模式自动执行） |
| `/lovable:apply-migration` | 应用数据库迁移 | 数据库变更后（或全自动模式自动执行） |
| `/lovable:yolo on/off` | 切换自动化+自动部署 | 配置工作方式 |

**专业提示：** 启用全自动模式后，无需 `/deploy-edge`——只需 `git push`，自动部署！

---

## **前后对比：真实省时效果**

### **没有这个插件：**
```
1. 在 Claude Code 中做出变更（5 分钟）
2. 将提示词复制到剪贴板（1 分钟）
3. 切换到浏览器，打开 Lovable（1 分钟）
4. 将提示词粘贴到聊天框（1 分钟）
5. 等待响应（2 分钟）
6. 手动验证（2 分钟）
7. 切换回 IDE（1 分钟）
总计：13 分钟
```

### **有此插件（手动模式）：**
```
1. 在 Claude Code 中做出变更（5 分钟）
2. 复制一行提示词（30 秒）
3. 粘贴到 Lovable（30 秒）
总计：6 分钟
= **节省 54% 时间**
```

### **有此插件（全自动模式 + 自动推送 + 自动部署）：**
```
1. 在 Claude Code 中做出变更（5 分钟）
   → 自动提交变更
   → 自动推送到 GitHub
   → 自动检测后端变更
   → 自动部署到 Lovable
   → 自动运行测试
总计：5 分钟
= **节省 62% 时间** + **零手动命令**
```

---

## **高级功能**

### **全自动模式（完整自动化）**
```bash
/lovable:yolo on                    # 启用一切：自动推送、自动部署、测试（推荐）
/lovable:yolo on --no-auto-push     # 需要手动执行 git 命令
/lovable:yolo on --no-auto-deploy   # 需要手动执行 /deploy-edge 命令
/lovable:yolo on --no-testing       # 跳过测试以加快速度
/lovable:yolo on --debug            # 查看自动化日志
/lovable:yolo off                   # 禁用自动化
```

**自动推送（v1.5.0 基于 Hook）：**
使用 Claude Code Hook，完成每个任务后插件自动：
- 检查文件变更
- 用描述性消息提交
- 推送到 GitHub 主分支
- **更可靠：** Hook 保证执行，而不是依靠 Claude 记得检查

**自动部署（v1.3.0）：**
启用自动部署后，git push 后 Claude 自动：
- 检测后端文件变更（Edge 函数、迁移）
- 导航到你的 Lovable 项目
- 提交部署提示词
- 运行验证测试（3 个级别）
- 即时报告成功/失败

**完整自动化：** 两者都启用，实现从代码变更到上线的全自动工作流！

使用 `--no-auto-push` 或 `--no-auto-deploy` 可选择手动控制。

### **同步命令（保持同步）**
```bash
/lovable:sync                       # 交互式（显示变更，询问确认）
/lovable:sync --apply              # 自动应用变更
/lovable:sync --dry-run            # 预览变更
/lovable:sync --manual             # 手动输入模式
/lovable:sync --debug              # 显示详细日志
```

以下情况使用此命令：
- 团队成员在 Lovable Cloud 中添加了密钥
- 创建了新函数
- 想要验证一切是否对齐

---

## **算笔账：为什么这个插件值回票价**

- **每次部署节省时间：** 约 7 分钟
- **每周部署次数（普通项目）：** 5-10 次
- **每周节省时间：** 0.6-1.2 小时
- **每年节省时间：** 30-60 小时

**每年为你省回整整一周的工作时间。**

此外：不再有复制粘贴错误。不再遗漏密钥。不再有"等等，我部署了吗？"的困惑。

---

## **故障排除**

**插件没有更新？**
- 确保在 Claude Code 中启用了应用市场自动更新
- 或手动操作：`/plugin marketplace remove 10K-Digital/lovable-claude-code` 然后重新添加

**自动化超时？**
- 使用手动模式：`/lovable:sync --manual`
- 或稍后重试（可能是网络/浏览器问题）

**未检测到密钥？**
- 运行 `/lovable:sync` 强制重新扫描
- 确认密钥使用 `Deno.env.get("SECRET_NAME")` 模式

---

## **自动同步内容说明**

| 内容 | 是否自动同步 | 后续步骤 |
|------|------------|----------|
| React 组件 | ✅ 是 | 直接推送到 GitHub |
| 样式/CSS | ✅ 是 | 直接推送到 GitHub |
| Edge 函数代码 | ⚠️ 部分 | 还需运行 `/lovable:deploy-edge` |
| 数据库迁移 | ⚠️ 部分 | 还需运行 `/lovable:apply-migration` |
| 新建表 | ❌ 否 | 使用 Lovable Cloud UI |
| RLS 策略 | ❌ 否 | 使用 Lovable Cloud UI |
| 密钥 | ❌ 否 | 使用 Lovable Cloud UI |

---

## **技术细节（给好奇的你）**

### **底层工作原理**

本插件提供：

**🎯 命令**（`/lovable:*`）
- 扫描代码库的交互式配置
- Edge 函数和迁移的部署辅助工具
- 与 Lovable Cloud 保持配置同步的工具

**🧠 技能**
- Lovable 集成模式（哪些同步，哪些不同步）
- 密钥检测算法（扫描代码中的环境变量）
- 全自动模式自动化（浏览器自动化工作流）

**📋 配置生成**
- 创建包含项目上下文的 `CLAUDE.md`
- 追踪密钥及其状态
- 存储全自动模式偏好设置

### **架构**

```
你的 IDE（Claude Code）
    ↓
lovable-claude-code 插件
    ├─ 扫描你的代码库
    ├─ 检测密钥和函数
    ├─ 生成精确的 Lovable 提示词
    └─ 可选择通过浏览器自动执行
    ↓
GitHub（双向同步）
    ↓
Lovable Cloud（部署）
```

### **安全与隐私**

- ✅ 插件中不存储任何凭证
- ✅ 所有自动化操作透明可见（你看得到发生了什么）
- ✅ 始终提供手动回退方案
- ✅ 开源（[github.com/10K-Digital/lovable-claude-code](https://github.com/10K-Digital/lovable-claude-code)）

### **浏览器自动化详情**

全自动模式使用 [Chrome 版 Claude 扩展](https://chrome.google.com/webstore/detail/claude/pebppomjfocnoigkeepgbmcifnnlndla)来：
- 导航到你的 Lovable 项目
- 与聊天界面交互
- 提交部署提示词
- 监控是否成功

**注意：** 出现任何问题时始终有手动回退方案。

---

## **生成的文件**

运行 `/lovable:init` 后，你的项目会新增：

```
your-project/
├── CLAUDE.md              # 项目配置（可编辑！）
│   ├── 生产 URL
│   ├── 密钥表（含状态）
│   ├── Edge 函数列表
│   ├── 数据库表
│   ├── 项目规范
│   └── 全自动模式设置
└── ... 你的常规代码
```

编辑 `CLAUDE.md` 可自定义任何内容——Claude Code 会读取并遵循你的配置。

---

## **版本历史**

**v1.7.0**（最新）⭐
- **项目结构地图** - 让 Claude 更快速地浏览你的代码库！
  - 新增 `/lovable:map` 命令用于生成/更新地图
  - 集成到 `/lovable:init`（可选问题）
  - 使用 `/lovable:sync --refresh-map` 更新
  - 约 60 行地图，包含目录树、关键文件、模式
- **多插件架构** - 为未来插件重构了仓库结构
  - 插件文件现在位于 `plugins/lovable/`
  - 应用市场可托管多个插件
  - 现有用户无需任何改动

**v1.4.1**
- **自动推送独立性** - 可独立于全自动模式工作！
- 自动推送可在全自动模式关闭时单独开启（手动部署）
- 全自动模式要求自动推送（启用时强制）
- 更清晰的配置和心智模型

**v1.4.0**
- **自动推送到 GitHub** - 任务完成后自动提交和推送！
- 与全自动模式结合实现完整工作流自动化
- 遵循项目风格的智能提交消息

**v1.3.0**
- **git push 后自动部署** - 无需手动命令！
- 新增 `--auto-deploy` / `--no-auto-deploy` 标志
- 改进了优雅回退
- 有序部署（迁移先于函数）

**v1.2.0**
- 增强了浏览器自动化的密钥检测
- 新增 `/lovable:sync` 命令
- 支持自动运行测试
- 改进了初始化流程

**v1.1.0**
- 全自动模式（自动化部署）
- 初始命令和技能

完整详情见 [CHANGELOG.md](CHANGELOG.md)。

---

## **许可证**

MIT——随心所欲地使用。

## **贡献**

发现 bug？有功能建议？
👉 [提交 Issue](https://github.com/10K-Digital/lovable-claude-code/issues)

---

## **由 10K Digital 用 ❤️ 打造**

有问题？[GitHub Issues](https://github.com/10K-Digital/lovable-claude-code/issues)