Mobile 还需要一个发布系统。
原型在浏览器中停止
Lovable vibe coding to mobile
Lovable can get the product idea on screen fast. The risk comes after the demo: native shells, signing, store builds, and post-launch fixes. Capgo gives that AI-built app a mobile release system that survives real users.
可爱的项目
使用 AI 助手提示和视觉编辑快速设计和迭代 Web 应用。
导出和包装
Capacitor 移动壳
导出到 GitHub,添加 Capacitor,并将 Web 应用保留为产品源。
构建和更新
Capgo 发布循环
构建本机二进制文件,发布安全的 Web 更新,并在发布后持续改进。
问题
原型在浏览器中停止
原生发布工作并不会被 vibe-coding 取消
商店构建后,迭代会减慢速度
第一个二进制文件只是开始。每次 onboard tweak,价格副本更改或 bug 修复都不应该等待另一个完整的应用程序审查。
在 Lovable 中原型化产品
GitHub 成为真实来源。 Capacitor 将 web 输出包装到具有应用标识、图标、启动屏幕和权限的原生 iOS 和 Android 项目中。
Capgo 构建签名二进制文件,然后通过商店批准后 UI 修复、复制更改、引导程序调整和资产移动来进行实时更新。
具体示例
当生成的 web 应用导出到 GitHub,并且通过 Capacitor 包装并且通过 Capgo 构建和更新时,一般 Lovable 项目变成移动应用。
# From the GitHub repo exported by Lovable
npm install @capacitor/core @capacitor/cli @capacitor/ios @capacitor/android
npx cap init "Your Lovable App" "com.company.app"
npx cap add ios
npx cap add android
# Build web output, sync native projects, and ship updates
npm run build
npx cap sync
npx @capgo/cli@latest init
npx @capgo/cli@latest bundle upload --channel production
# When you need a signed binary
npx @capgo/cli@latest build init --platform ios
npx @capgo/cli@latest build request --platform ios
Lovable AI 提示
将此内容粘贴到 Lovable 后,web 应用正常工作。它告诉代理准备 Capacitor 和 Capgo,并且使用 MCP 引导程序路径,而不是将移动视为一次性导出。
Lovable AI 提示
I want this Lovable project to become a Capacitor mobile app using Capgo from the start.
Set up the project so an AI agent can use Capgo's MCP release tools through install-mcp:
1. Install the Capgo CLI MCP server for the active AI client. For Codex, run:
- npx @capgo/cli@latest login
- npx install-mcp 'npx @capgo/cli@latest mcp' --client codex
Replace codex with cursor, claude-code, gemini-cli, or windsurf if that is the client this project uses.
2. Read Capgo's public MCP metadata when tool details are needed:
- https://capgo.app/.well-known/mcp/server-card.json
- https://capgo.app/.well-known/agent-skills/capgo-cli-mcp/SKILL.md
3. Add a short docs/agent-mobile-release.md file that tells the agent to use the Capgo CLI MCP server as a local stdio server, not a remote HTTP endpoint.
4. Add Capacitor for iOS and Android using the package manager already used by this project.
5. Configure capacitor.config.ts with:
- appName: the current Lovable app name
- appId: a production-style bundle ID I can edit later, such as com.company.app
- webDir: the production build output folder
- plugins.CapacitorUpdater.defaultChannel: production
6. Install and configure @capgo/capacitor-updater.
7. Add package scripts for:
- building the web app
- syncing Capacitor
- uploading a production Capgo bundle
- starting Capgo Builder setup for iOS
- requesting an iOS cloud build
8. Create a first production channel plan:
- production for users
- preview for stakeholder review
- staging for internal testing
9. Keep normal docs and README commands copy-pasteable with npm/npx unless this project already uses another package manager. Keep the Capgo MCP install command exactly as shown above.
10. Do not fake native signing credentials. Leave clear TODOs for the Capgo API key, Apple team details, and bundle ID.
11. After making changes, summarize exactly what changed and what command I should run next.
解决方案
买家不想要一个漂亮的演示。他们想要一个客户可以安装、更新和信任的应用。Capgo 提供了发布层。Lovable 不试图拥有。
从 Lovable 导出到 GitHub 以便应用有一个真实的源代码、可审查的更改和进入 CI 或 Builder 的路径。
配置静态输出、Capacitor webDir、应用 ID、图标、启动屏幕、权限和原生项目。
使用 Capgo Builder 创建签名的 iOS 和 Android 构建,无需将项目转换为原生工具链马拉松。
使用 Capgo 通道进行生产、阶段和预览更改,以便网页修复和资产移动到二进制文件安装后。
发布路径
目标不是另一个仅仅是教程的项目。它是一个你可以在发布后继续使用的移动发布循环。
连接Lovable到GitHub,克隆项目,并确保生产Web构建在本地工作。
添加Capacitor,配置应用身份,运行第一次同步,并在真实设备上验证核心屏幕。
使用Capgo Builder签名二进制文件,并将机密信息从随机笔记本电脑和截图中排除。
发布二进制文件一次,然后使用Capgo实时更新进行UI、复制、CSS、资产和安全JavaScript更改。
用户信号
重复客户点是简单的:Lovable使原型成为可能,但Capgo使它感觉像是一个产品。发布循环是保持应用在第一次商店构建后存活的关键。
常见的Lovable到移动反馈
使用Capacitor构建的应用
创建和学习应用展示了如何将web风格的流程转换为处理打包、签名和更新时清洁的商店准备的移动体验
活动
基于模板的设计流程,自然地映射到响应式Web到移动设备.
教育
专注的学习应用程序,通过小的课程和简化的引导改进来累积.
教育
在应用打包后,web产品迭代仍能继续进行。