跳过主要内容

让可爱的编码体验来到移动设备

将可爱的编码体验转化为真正的移动应用

可爱可以快速将产品想法呈现在屏幕上。然而,风险出现在演示之后:原生壳、签名、商店构建和发布后修复。Capgo为AI构建的应用程序提供了一个能够应对真正用户的移动发布系统

人工智能支持

1 个 Git 仓库
来自可爱的 Web 应用源代码
iOS + Android
原生目标与 Capacitor
OTA 通道
发布后更新路径

可爱项目

使用 AI 助手提示和视觉编辑快速设计和迭代 Web 应用

导出和包装

Capacitor 移动壳

GitHub 导出,添加 Capacitor,并将 Web 应用作为产品源

构建和更新

Capgo 发布循环

构建原生二进制文件,发布安全的 Web 更新,并在发布后持续改进

问题

Vibe 编码构建了想法。移动设备仍然需要一个发布系统

原型在浏览器中停止

可爱项目仍然是一个 Web 应用。用户需要一个可安装的应用程序,具有图标、权限、离线行为、深度链接和原生壳

原生发布工作不再是编码的噩梦

AI 可以快速生成屏幕,但 iOS 签名、Android 密钥库、App Store Connect、原生项目和商店上传仍需要正确的管道。

发布后迭代速度会减慢

第一个二进制文件只是开始。每次 onboard tweak、价格副本更改或 bug 修复都不应该等待另一个完整的 app 审核。

示例堆栈

Lovable 导出应用后发生了什么

在 Lovable 中快速原型化产品

Lovable 最擅长快速创建 web 体验:流程、屏幕、副本、Supabase 配置和产品迭代,直到原生工作开始。

将 web 应用转换为原生壳

GitHub 成为真实来源。Capacitor 将 web 输出包装在原生 iOS 和 Android 项目中,包括应用标识、图标、启动屏幕和权限。

发布一次,持续迭代

Capgo 构建签名二进制文件,然后 live 更新保持 UI 修复、副本更改、onboard tweak 和资产移动,直到商店批准。

实例示例

实用命令路径

将 AI 生成的 Web 应用转换为移动应用时的典型流程是:将生成的 Web 应用导出到 GitHub,使其静态构建友好,包装在 Capacitor 中,然后通过 Capgo 构建和更新。

# 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 中启动移动发布设置

将此内容粘贴到 Lovable 中,等待 Web 应用正常工作。它告诉 agent 准备 Capacitor 和 Capgo,并使用 MCP 进行 onboarding 路径,而不是将移动视为一次性导出。

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.

解决方案

The Capgo path from AI web app to mobile release

The buyer does not want a pretty demo. They want an app customers can install, update, and trust. Capgo supplies the release layer Lovable does not try to own.

将 AI 生成的 Web 应用转换为移动应用的解决方案

将 Lovable 的输出导出到 GitHub 中,使应用程序具有真实的源代码、可审查的更改和进入 CI 或 Builder 的路径。

让其成为移动设备兼容的

配置静态输出、Capacitor webDir、应用程序 ID、图标、启动屏幕、权限和本机项目。

使用 Capgo 构建它

使用 Capgo Builder 创建签名的 iOS 和 Android 构建,无需将项目转换为本机工具链马拉松。

持续发布

使用 Capgo 的渠道进行生产、预发布和预览更改,使 Web 修复和资产在二进制安装后移动。

发布路径

AI 构建的应用程序的实用发布路径

目标不是另一个仅限教程的项目。它是一个您可以在发布后继续使用的移动发布循环。

1

导出应用程序

将 Lovable 连接到 GitHub、克隆项目并确保生产 Web 构建在本地工作。

2

创建原生壳

添加 Capacitor,配置应用身份,运行第一次同步,验证核心屏幕在真实设备上

3

构建和签名

使用 Capgo Builder 签名二进制文件,并将秘密信息从随机笔记本和截图中移除

4

发布和迭代

发布二进制文件一次,然后使用 Capgo 实时更新 UI、复制、CSS、资产和安全 JavaScript 变更

用户信号

可爱的用户反馈是简单的:可爱的使原型成为可能,但 Capgo 使它感觉像是一个产品。发布循环是保持应用程序存活在第一次商店构建之后的关键

可爱的用户反馈

使用 Capacitor 构建的应用

模板和学习产品是自然的移动候选者

创建和学习应用程序展示了如何将 web 风格流程转换为处理打包、签名和更新的清洁方式的商店准备移动体验

应用类型
移动端
商店分类
活动、教育、教育
来源
公共商店数据集
邀请制作卡片设计应用图标

活动

邀请制作卡片设计

响应式网页到移动端的模板驱动设计流程,自然地映射到移动端。

2000万安装 4.6星级评分
查看Google Play列表
无限日本应用图标

教育

无限日本

专注学习应用,通过小幅改进课程和引导体验来累积效果。

180万安装 4.6分
查看Google Play列表
StudySmarter - 学校 & 大学应用图标

教育

StudySmarter - 学校 & 大学

可以在应用打包后继续迭代Web产品的学习流程。

6.5万个安装 4.8星级
查看Google Play列表

将原型转化为可安装的应用

使用 Lovable 进行加速,Capacitor 进行原生 shell,Capgo 进行构建、实时更新和发布控制

来自 Martin 的人性化支持