不写一行代码，用AI从零打造Replit替代品Jerry

为什么要替代Replit？

作者花了整个周末测试Replit的移动端体验，结论只有一个：太难用了。界面拥挤、主屏幕让人摸不着头脑、整体交互缺乏乐趣。于是他决定做一件听起来有点疯狂的事——不写一行代码，从零打造一个Replit替代品。

这个替代品叫做Jerry，一个运行在iPhone上的智能编程助手。核心理念很简单：像发iMessage一样和AI聊天，告诉它你想要什么应用，它就帮你生成、托管，并直接在App内预览。整个零代码开发过程用到了三个关键工具：

• OpenAI Codex：桌面端AI编程工具，负责生成Swift代码
• Claude Code SDK：嵌入到App中的AI代理，驱动聊天和应用生成
• Vibe Code CI：负责在沙盒环境中创建和托管生成的应用

开发流程：零代码的全栈构建

项目初始化与多线程协作

作者先在Xcode中手动创建了一个空的Swift项目，然后在Codex中打开该项目目录，建立对应的工作线程。

关于OpenAI Codex： OpenAI Codex是基于GPT系列模型专门针对代码生成任务微调的AI系统，其训练数据包含数十亿行来自GitHub等平台的公开代码。2025年推出的新版Codex以云端代理形式运行，能够在沙盒环境中自主执行多步骤编程任务。Codex的一大优势是支持多线程并行处理——研究、设计和代码构建可以同时推进，互不干扰，这与传统IDE中单线程、顺序执行的工作方式形成了根本性区别。

他将预先写好的产品需求（包括功能描述和流程图）直接粘贴到Codex中，用Shift+Enter启动计划模式，让AI先制定完整的开发计划再动手执行。

设计先行：用Paper.design快速出图

在Codex制定计划的同时，作者并没有闲着。他打开了Paper.design（一个专为AI设计的类Figma工具），通过MCP工具让AI自动设计出四个核心界面：

• Jerry收件箱：项目列表页
• Jerry对话：聊天交互页
• Jerry预览：应用预览页
• 构建结果：生成结果展示页

关于MCP协议： MCP（Model Context Protocol）是Anthropic于2024年底开源的标准化协议，旨在解决AI模型与外部工具、数据源之间的集成碎片化问题。通过MCP，AI助手可以像调用标准接口一样访问设计工具、数据库、文件系统等外部资源。Paper.design通过实现MCP服务端，使AI能够直接操控设计画布——这正是文中"AI自动设计界面"得以实现的底层机制，而非简单的截图生成。

设计过程中可以随时输入引导指令调整方向，比如"把主要精力集中在聊天和预览页面上，保持简洁"。这种实时引导式设计效率非常高，几分钟就能拿到可用的UI方案。

API集成：连接Claude和Vibe Code CI

要让Jerry真正具备AI应用生成能力，需要集成两个关键API：

1. Claude API：从platform.anthropic.com获取密钥，作为聊天代理的大脑
2. Vibe Code CI API：从vibecode.dev获取密钥，负责实际的应用构建和托管

关于Claude Code SDK： Claude Code SDK是Anthropic推出的面向开发者的编程代理工具包，允许将Claude的代码理解与生成能力直接嵌入到应用程序中。与普通API调用不同，SDK提供了工具调用（Tool Use）、上下文管理和多轮对话等能力，使AI能够在应用运行时动态响应用户需求，充当真正的"运行时代理"而非单次问答系统。这也是Jerry能够持续理解用户修改意图、跨轮次保持上下文的核心原因。

关于Vibe Code CI与Vibe Coding范式： Vibe Coding（氛围编程）这一概念由AI研究员Andrej Karpathy于2025年初提出，描述一种完全依赖AI生成代码、开发者只需用自然语言描述意图的编程范式。Vibe Code CI作为这一范式的基础设施工具，专门提供应用的自动构建、沙盒隔离运行和即时托管能力，是让"描述即部署"成为现实的关键一环。

第一次初始化耗时较长（作者甚至出去散了30分钟的步），但完成后整个链路就打通了：用户发消息 → Claude理解需求 → 调用Vibe Code CI生成应用 → 返回预览链接 → App内自动打开。

调试与迭代：真实的AI开发体验

从崩溃到可用

第一次在iPhone上运行时，App直接崩溃了——数据读取失败。作者的处理方式很典型：复制Xcode底部的错误日志，粘贴到Codex中说"我收到这条消息，帮忙修一下"。几分钟后问题解决。

接下来又遇到了一连串问题：

• 聊天消息格式混乱 → 要求"像iMessage那样显示，加上三个点的输入动画"
• 代理无法访问Vibe Code CI → 手动添加技能文件
• 链接跳出App打开 → 改为内置浏览器预览

每个问题的解决方式都一样：描述现象，交给AI修复。这就是用提示词编程的日常——你负责发现问题和描述问题，AI负责定位和修复。

体验优化：借鉴Twitter的交互设计

最有意思的迭代来自一个灵感：作者注意到Twitter（X）打开链接时，底部会保留一个小聊天区域。他截了一张Twitter的截图发给Codex，要求：

"你看这个截图，Twitter打开链接时底下有个输入区域。你能把聊天框做成那样吗？就像在底部放一个小聊天泡泡，让我能在预览打开的同时继续输入。"

这个设计让用户可以一边预览生成的应用，一边继续和Jerry对话来修改它，体验流畅了很多。截图驱动开发，在AI编程时代变成了一种高效的沟通方式——视觉参考往往比文字描述更能精准传达交互意图，大幅减少了需求理解的歧义。

语音控制：最后的点睛之笔

作者还加入了语音输入功能，集成了Whisper模型。

关于Whisper： Whisper是OpenAI于2022年开源的自动语音识别（ASR）模型，采用Transformer架构，在68万小时多语言音频数据上训练而成。其核心优势在于对口音、噪音和专业术语的强鲁棒性，以及对多种语言的原生支持。在移动端集成Whisper，开发者通常使用其量化压缩版本（如whisper.cpp）以平衡识别精度与设备性能，使实时语音转文字成为可能，而无需将音频数据上传至云端处理。

这意味着你可以在预览应用的同时，直接用语音告诉Jerry："把这个应用调成浅色模式，颜色要非常浅的灰，接近白色但带一点颗粒感，再把字体全换了。