mc-skills/catalog

Fork 0

mc-skills c8e8049202 catalog: 更新 2026-04-06 19:01

2026-04-06 19:01:37 +08:00

16 KiB

Raw Permalink Blame History

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️⃣ 一次性配置

/lovable:init

Claude Code 扫描你的项目，提问几个问题，然后生成包含所需上下文的 CLAUDE.md。

2️⃣ 进行你的修改

像平常一样在 IDE 中编辑代码，Claude Code 配合 AI 处理复杂部分。

3️⃣ 一切自动完成

/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 分钟）

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

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

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

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

方式二：本地安装

克隆或下载此仓库，然后：

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 同步（文档）
✅ Claude Code 已配置你的 GitHub 仓库
✅ （可选）安装 Chrome 版 Claude 扩展以使用全自动模式

前 5 分钟上手指南

# 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% 时间** + **零手动命令**

高级功能

全自动模式（完整自动化）

/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 可选择手动控制。

同步命令（保持同步）

/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）

浏览器自动化详情

全自动模式使用 Chrome 版 Claude 扩展来：

导航到你的 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。

许可证

MIT——随心所欲地使用。

贡献

发现 bug？有功能建议？ 👉 提交 Issue

由 10K Digital 用 ❤️ 打造

有问题？GitHub Issues

16 KiB Raw Permalink Blame History Unescape Escape