APP 从 0 → 上线发布!免费 Vibe Coding 流程:Stitch + AI Studio + Antigravity!

这是一套完整的web coding开发流程，从一个想法开始到真正上线一个app只需要五步就能搞定。

第一步使用Google speech为app设计整体的UI界面，生成后的设计稿可以直接导入FGAB用来展示评审或者做二次微调。

第二步，基于speech生成的设计稿使用AS studio自动生成对应的前端代码。

第三步，使用NT gravity在前端代码的基础上自动生成后端接口、数据逻辑和数据库结构，把前后端整合起来，生成一个功能完整的app。

第四步，把项目代码托管到Githa，用来版本管理以及后续的迭代开发。

第五步，使用word SLLA app 1键部署到云端，让它可以被外网访问和使用。

使用这样一套web coding流程，我们就可以把一个想法快速变成一个可以上线的产品。而且在这个流程中用的工具基本都是免费的，成本非常的低。

这是我使用这个web code流程开发的一个在线领养宠物的app下面我们就以这个app为例来详细介绍这个开发流程。

我们先打开Google stitch，这是一款专门用来为app设计UI界面的这样一个UI工具。

在这里我们可以选择设计移动端的app或者是设计PC端的web应用。

那下面可以选择AI模型，这里面包括Java 2.5和Java三这个redesign。

这个功能呢可以参考截图或者是网址来生成风格相似的UI设计，也就是类似复刻网站的这样一个功能。

那在使用setti之前呢，我们先来设置一下隐私权限，点右上角选择这个privacy notice，然后点击这个settings，那可以看到这里显示的呢就是这个stitch提供的免费额度。

每天400个普通积分，可以用来根据文本去生成UI设计。还有下面是15个redesign积分，可以用来参考截图或者是网址来生成一个相似的UI设计。

那在下面这里提示我们的数据呢会被用来训练谷歌AI模型。

如果不想自己的数据并用UI训练，我们可以点击这里取消这个勾选，然后点击保存修改。

那下面我们来设计一个在线领养宠物的app这个模型选择Java 3，点击执行。

那执行结束以后，那可以看到这里给我们生成了5个UI页面，分别对应的是欢迎介绍页面、宠物列表页面、宠物详情页面、领养申请页面，还有个人信息中心，而且在里面还填充了一些默认数据。

那现在这些app页面呢它的文字呢都是英文的。

我们先全选所有的页面，然后呢在这个AI对话这里要求他把这些文字全部改成中文简体，而且这个字体使用无版权的资源黑体。

好了，执行结束以后，它就给我们重新生成了五个全中文的UI页面。

我们把前面这五个英文的页面给它删掉，只保留这个中文的那如果我们想要编辑一个页面，可以先点击选中它，然后点击这个editor。

那

这个add to chat这个功能呢，就是把这个页面添加到这个AI对话中，通过自然语言去进行编辑。

那如果想要进行更精准的编辑呢，可以使用这个annotate这个功能。

比如这个宠物分类，我们想要只保留这个猫和狗这两个分类，把其他的去除掉。

那你就可以先框选你想要修改的位置，然后在这个评论里面加上想要修改的内容就可以了。

点击应用这个stitch就会去自动进行编辑。

那执行完成以后可以看到现在就只有猫和狗这两个分类了。我们先删除这个旧版的这个UI，然后全选所有的页面。那这个edit theme这个功能，它可以用来编辑我们这个app的主题设计风格。

这里面包括白天黑夜模式，还有主题的颜色。

比如我们给它改成橙黄色，那下面还可以选择圆角字体，点击应用执行结束以后，可以看到这个app的主题配色就改为成黄色了。

那在preview这里呢可以选择不同的设备去预览，这里面包括手机、平板还有PC。

那在这个generate这个下面有一个variations，那它可以用来生成这个UI的变体，也就是根据现有的这个UI重新生成不同的设计。

那这里可以选择生成的数量，还有创意的程度，包括高中低这样三个等级。

那下面还可以输入一些自定义的指令，以及想要重新设计的部分。

比如像页面布局、主体颜色，然后app中的图片等等。

我们点击生成。

大家可以看到执行结束以后呢，这里就根据我们已有的这个欢迎页面，重新给我们设计了两个不同的欢迎页面。

我们可以在这三个页面中选择一个效果最好的去使用。

那这里我们还是选择原来的这个版本，这个页面设计的更好一些。

那下面这个regenerate就是重新生成一个UI设计。

最后这个predict hit map，那这个功能呢可以用来生成一个热度预测图。

那在这个图片中颜色越深代表热度越高，也就越有可能去吸引用户点击和停留。

那在app开发中这些位置呢需要重点关注，并且去优先优化它的展示。

Stitch生成的结果。除了这个UI设计图，还包括它对应的前端代码。

我们点击这个更多，然后点击查看代码，可以看到这个就是这个UI页面对应的这个HTML代码。

点击这个export可以导出stitch的设计稿。

比如导出到西格玛，我们可以选择这个导出代码，然后复制在西格玛这里。

我们点击下面这个插件，然后我们选择使用这个stitch code to figma这个插件来导入这个设计稿。

先选择设备，然后粘贴上复制的代码，点击生成。

那可以看到这个设计稿就已经导入了。

但是这里面这个图片没有显示出来，需要再手动修复一下。

那除了这个stitch插件，我们还可以使用这个HTML to西格玛这个插件。

点击这里，然后粘贴上复制的代码，然后点击导入，选择设备，然后执行导入。

然后可以看到这个插件的导入效果呢要好很多，图片显示还有这个页面布局都没有问题。

那除了这两种，还有一种最简单的导入方式。

我们可以直接在stitch复制这个UI页面，然后回到西格玛直接粘贴。

但是这种方式导入的设计稿它是图片形式的，无法直接编辑。

好了，那设计稿导入FIMA之后呢，我们就可以用来交互展示审核或者进行二次微调都是可以的。

下面这个download可以把设计稿下载的稳定。

那现在stitch给我们生成的设计稿，它是一个一个相互独立的页面，也就是它们互相之间是没有关联的那下一步我们使用谷歌AS studio，根据这些设计稿去生成一个能够交互响应的前端app也就是把这些独立的页面给它相互组织起来，然后整合成一个整体。

我

们先全选所有的页面，然后点击更多，再点击export。

在这里选择AS studio，然后点击下面这个build VS studio，这样它会自动跳转到AS studio，然后去生成代码。

那可以看到我们在这里导入的是五张UI设计图，还有它们分别对应的5个HTML。那在这里我们可以选择模型，然后点击执行。

执行结束以后我们来看一下这个胜出的app那这些可以看到点击都是有响应的，还有这个领养申请的页面。那在测试中如果发现问题，可以让艾斯studio继续修改。

比如申请领养，这里没有下一步的按钮，我们让它来修复这个问题。

修改完成以后再来测试一下，输入这个领养信息。

然后勾选同意，点击提交申请好了，这个功能就没问题了。

那这个是个人消息页面，点击这个消息没有反应，我们让IS studio完善这个消息功能，在领养申请通过以后，在这里发送消息通知好了。

修改完成以后，这个消息通知功能就添加上了。

那除了通过对话去修改，AS99也支持精准修改。点击这个画笔，比如我们想要删除兔子这个分类，我们就可以添加一个评论。

框选上这个兔子，然后填写上要修改的内容。那除了评论，这里还可以添加箭头。比如我们让这个箭头指向这个地图模式，然后再添加一个文字告诉S99删除这个地图模式。

然后我们再添加一个框选选中上面这个地理位置，接着我们添加一个文字告诉IS studio在这个位置显示只显示城市，不需要显示国家。

还有这个画笔这个功能也是类似的。那修改完成以后，我们点击这个end to chat，这个对应的修改内容就会同步到这个AI对话中，点击执行。

执行结束以后可以看到我们指定要修改的删除内容都按照要求完成了。

删除了这个兔子分类，还有这个地图模式，而且这个地理位置现在只显示城市。那在经过几轮测试和修改确认没问题以后，我们这个前端app就可以用来进行下一步操作了。

那这里有一点需要注意，就是这个AS studio它生成的呢并不是一个完整的应用，而只是一个前端的app我们可以点击这个code看一下生成的代码。

那可以看到这些宠物的数据呢都是直接写入到这个代码里面的。

但是在真正的应用中呢，这些数据是需要存储到数据库中的。

也就是说这个AS studio它是个用来生成纯前端的web应用。

而我们这个app呢它是需要一个后端服务的，并且呢需要一个数据存储。

这是因为s studio是无法完成的，所以下一步我们来为这个前端app生成后端接口，还有后端数据逻辑以及对应的数据库结构。

我们先点击这里，把这个前端代码下载下来。那下面我们使用any gravity来生成对应的后端代码。

我们先把这个前端代码导入进去，然后我们让IT gravity分析这个前端代码，并为它生成对应的后端代码，实现一个前后端一体的这样一个完整的app而且这个数据存储要求使用在线的super base数据库点击执行。

执行结束以后，这个antigravity它会先给我们生成一个执行计划。

在这里面包含技术选型，需要配置的数据库参数、技术架构，还有这个数据库表的设计等等。

如果确认没有问题，我们就点击这个proceed，让他按照这个计划去生成代码。

那执行结束以后，它会给我们生成一个work输入文件，帮我们汇总具体做了哪些工作，以及如何配置参数，如何启动服务。我们按照要求配置上这两个数据库的参数。

我们先打开super base，然后新建一个项目，点击这个设置，然后选择这个DTPI复制这个UL。

然后呢，我们把这个参数配置到这个ENV配置文件中，然后再点击这个API kiss复制这个APIT，把它也添加到配置文件。

好了，配置完参数以后，我们来新建这个数据库表。打开这个Internet点，circle这个文件，复制这些circle。

然后我们回到super base，打开这个circle editor，然后粘贴上我们复制的circle，然后点击这里执行。

好了，执行结束以后，我们打开这个table editor，在这里就可以看到我们新建的这五张数据表。

分别是领养申请记录表、收藏记录表、消息通知数据表、宠物信息数据表、收容单位数据表，还有用户信息数据表。

而且在里面已经写入了一些测试数据。那接下来我们执行这个NPM run DV启动服务，然后打开这个网址来测试一下这个app的各项功能。如果遇到问题可以让antigravity再继续修改。

那这里我们就不展示具体调试过程了。

经过几轮测试和修改以后，这个在线连养宠物的app核心功能就基本没有问题了。

那注意这里我们为了方便演示呢，我们暂时只关注这个app的核心功能。

也就是包括比如像用户注册、用户登录，比如查看宠物信息，申请领养等等这几项功能。那其他功能呢暂时先不考虑。那下面我们来看一下这个生成的效果。

在这个app页面我们点击登录，然后先来注册一个账号，输入用户名、邮箱密码，点击注册。

那注册成功以后，它会自动登录进去。注意这里没有验证邮箱，后续可以添加一个验证功能。

那登录进来以后，这里就是这个宠物信息列表，点击这个宠物可以查看这个宠物的详细信息，这里面包括它的体重、年龄、健康状况。

如果感到满意呢，我们可以点击下面这个申请领养，然后填写领奖信息。勾选上同意，点击提交申请。

好了，申请已经提交了。

来看一下这个消息通知。

那在这里他会给我们发送一个消息通知，等后续这个申请通过以后，也会在这里发消息来通知我们我们打开super base数据库看一下，那这个就是刚才注册的这个用户的数据。

然后这个是刚才提交的这个领养申请的记录。

那申请的这个状态目前是pending，也就是等待审核。那这个message就是发送的这个消息通知，在个人中心这里显示，我们现在有一个领养申请正在审核中。

好了，测试没问题以后，那下一步我们把这个项目代码托管到GitHub，这样方便版本管理和后续迭代开发。

如果熟悉get可以自己手动操作，不熟悉get也没关系。我们可以让AI来操作，把要求告诉AI它会引导我们如何操作。

我们先来执行这套命令，初始化这个gate仓库，然后执行get add，接着执行get it met，提交修改。

接下来按照这个说明去GitHub。新建一个项目，输入这个项目名，然后添加一个项目，描述这个可见性，选择public，然后点击创建，创建完成以后，复制这个项目的SSH网址，回到IT gravity，把这个网址发送给AI，它就会帮我们自动把这个代码push到GitHub。

我们再回到GitHub看一下，那可以看到这个代码已经push上来了。

那下一步呢我们来把这个app部署到云端。这里我们选择使用vers l来免费的部署。

Vers l呢给我们提供了一些免费的额度，具体的参数呢可以参考这里。

那注意我们这个app呢是不能部署到gip up pages的，因为它不是一个静态的外部应用。

我们点击这个add，然后选择添加一个project。

然后点击这个install给GitHub安装一个vers l插件。点击这个install，接着再点击这个continue。

好了，可以看到这些就是我们的GitHub项目了，它已经读取到worth l了。我们导入这个在线领养宠物的这个项目，但前面这两项框架和根目录都保持默认。

然后填写上这个服务构建命令NPM run build输出路径使用DST，然后安装依赖的命令，我们使用NPME store，接着把前面那两个数据库认证参数配置过来，然后点击这个deep log也就可以了。

那这些参数呢如果不知道如何配置，我们可以让AI根据我们的项目代码去生成一份部署worth l的文档，然后照着操作就可以了。

好了，服务部署成功以后，我们点击跳转到这个控制台，这个就是vers l给我们分配的服务网址。

如果自己有域名，也可以点击这里去绑定自己的域名。

打开这个网址，那可以看到这个服务没有问题。

那现在这个app呢就已经部署到云端了，任何人都可以通过这个网址来访问我们的服务。

那接着我们再来实现一个管理后台服务。

那这个管理后台呢它的主要作用包括录入宠物的信息，还有审批用户的立案申请。

这个操作流程和前面基本是类似的，我们就不再演示了，直接来看生成的效果。我们在本地启动服务，然后打开这个管理后台的页面。

注意这个管理后台呢如果只是个人使用的话，我们可以不把它部署到云端，直接运行在自己的电脑上也是可以的这是一个仪表盘，包括宠物总数K领养的宠物，已经领养的宠物等等这些信息。

然后是宠物列表，点击这里可以编辑这个宠物的信息。

那接着下面是录入一个宠物信息，最后是领养申请记录，在这里可以审批用户的领养申请。

我们前面那个立案申请可以看到，在这里已经审批通过了。

好了，那通过搭配这个app还有这个管理后台，我们就可以实现一个完整的宠物领养流程。那下面我们来演示一下效果。

首先我们在手机端使用word sell的网址，打开这个服务页面，点击登录，然后使用我们前面注册的那个账号登录进去。

那可以看到现在一共只有两只可以领养的宠物。我们在管理后台来录入一条新的宠物信息，输入宠物的名字、体重、年龄等等这些信息。

这个品种选择拉布拉多，然后上传这个宠物的图片，接着填写这个宠物的描述信息、特点标签，还有健康信息，然后点击保存。

好了，录入完成以后，我们打开这个管理后台的这个宠物列表，那可以看到这个就是刚才录入的这个拉布拉多的数据。

这个宠物图片我们在后面改为了使用super base来存储。

我们点击这个storage，然后在这个PaaS里面那可以看到这个就是刚才上传的宠物的照片。那接着我们在app端刷新一下，那可以看到新添加的这条拉布拉多的信息就显示出来了。

我们点击打开它，在这里可以查看宠物的具体信息。

然后我们点击下面这个领养申请，填写这个领养的信息，然后勾选这个同意，点击提交领养申请。但在消息中心这里领养通过以后，会在这里给我们发消息通知。

我们回到管理后台，打开这个理想申请，然后点击这里批准这个拉布拉多它的这个领养申请。

好了，批准以后这个拉布拉多就不再允许被别人去申请领养了。

而且这个app端我们也收到了这个领养通过的消息，然后跳转到这个宠物列表页面。那可以看到这条拉布拉多的这个信息也自动从APP中除了了，这样可以避免其他人二次申请领养，整个流程基本是没有问题的那这样一个完整的宠物领养流程就算完成了，再完善一下其他功能，这个app就可以正式发布上线了。

好了，那关于这套web coding流程我们就介绍完了。

使用这套流程呢，我们可以把一个想法快速落地成一个真正可用的app从设计开发到上线，整个过程都非常高效，而且用到的工具都是可以免费使用的，成本非常低。大家感兴趣的话可以动手试一试。

你的想象力，由AI助力，这就是今天的分享，希望对你有收获。我是小艺，热衷分享AI干货的创作者，觉得我的文章有用，记得点赞、关注、收藏、转 发，点个在看，祝大家好运连连！