5步搞定Web App开发：从想法到上线，全程免费高效
你是否曾经有一个绝妙的App创意，却苦于不会编程而无法实现？今天我将分享一套完整的Web Coding开发流程，从最初的想法到真正上线的App，只需要5步就能搞定。全程使用的工具基本都是免费的，成本极低，效率极高。（AI博主：陶渊小明）
一、5步开发流程概览
-
第一步：使用Google Stitch为App设计整体UI界面，生成的设计稿可以直接导入Figma，用来展示、评审或做二次微调。
-
第二步：基于Stitch生成的设计稿，使用Google AI Studio自动生成对应的前端代码。
-
第三步：使用Anti Gravity在前端代码的基础上，自动生成后端接口、数据逻辑和数据库结构，将前后端整合成一个功能完整的App。
-
第四步：将项目代码托管到GitHub，方便版本管理以及后续的迭代开发。
-
第五步：使用Vercel把App一键部署到云端，让它能够被外网访问和使用。
使用这套Web Coding流程，我们可以把一个想法快速变成一个可以上线的产品。下面，我将以我自己开发的一个在线领养宠物的App为例，详细介绍这个开发流程的每一步。
二、第一步：用Google Stitch设计UI界面
首先，我们打开Google Stitch。这是一款专门用来为App设计UI界面的AI工具。
2.1 初始设置
在Stitch中，我们可以选择设计移动端的App，或者是设计PC端的Web应用。下面可以选择AI模型，包括Gemini 2.5和Gemini 3。还有一个“Redesign”功能，可以参考截图或网址来生成风格相似的UI设计（类似复刻网站的功能）。
在使用之前，我们先来设置一下隐私权限。点击右上角，选择“privacy notice”，然后点击“settings”。这里可以看到Stitch提供的免费额度：每天400个普通积分，可以用来根据文本生成UI设计；还有15个Redesign积分，可以用来参考截图或网址生成相似的UI设计。下面还有一个提示，说我们的数据可能会被用来训练谷歌的AI模型，如果不希望自己的数据被用于AI训练，可以取消勾选，然后点击保存修改。
2.2 生成UI设计
接下来，我们来设计一个在线领养宠物的App。模型选择Gemini 3，点击执行。执行结束后，可以看到生成了5个UI页面，分别对应：
-
欢迎/介绍页面
-
宠物列表页面
-
宠物详情页面
-
领养申请页面
-
个人信息中心
页面中已经填充了一些Mock数据，不过文字都是英文的。我们先全选所有页面，然后在AI对话中要求他把这些文字全部改成中文简体，并且字体使用无版权的思源黑体。执行结束后，它就重新生成了5个全中文的UI页面。我们把前面5个英文页面删掉，只保留中文的。
2.3 页面编辑与调整
如果想要编辑某个页面，可以先点击选中它，然后点击“Edit”。“Add to chat”功能可以将这个页面添加到AI对话中，通过自然语言进行编辑。如果想要更精准的编辑，可以使用“Annotate”功能。
例如，在宠物分类中，我们只想保留“猫”和“狗”两个分类，把其他的去除掉。可以先框选想要修改的位置，在评论里加上想要修改的内容，然后点击“应用”，Stitch就会自动进行编辑。执行完成后，可以看到只有猫和狗两个分类了。
删除旧版UI后，全选所有页面，使用“Edit Theme”功能可以编辑App的主题设计风格，包括白天/黑夜模式、主题颜色等。比如我们把主题色改成橙黄色，下面还可以选择圆角、字体等。点击应用，执行结束后，整个App的主题配色就变成了橙黄色。
在“Preview”这里可以选择不同的设备进行预览，包括手机、平板和PC。
2.4 生成UI变体与热度预测
在“Generate”下面有一个“Variations”，可以用来生成UI的变体，也就是根据现有的UI重新生成不同的设计。可以选择生成的数量、创意的程度（高中低三个等级），还可以输入自定义指令以及想要重新设计的部分（如页面布局、主题颜色、图片等）。点击生成，可以看到系统根据我们已有的欢迎页面，重新设计出了两个不同的欢迎页面。我们可以在三个页面中选一个效果最好的使用——这里我还是选择原来的版本。
“Regenerate”就是重新生成一个UI设计。
最后，“Predict Heatmap”功能可以生成一个热度预测图。图片中颜色越深代表热度越高，越有可能吸引用户点击和停留。在App开发中，这些位置需要重点关注，并优先优化其展示。
2.5 导出设计稿
Stitch生成的结果除了UI设计图，还包括对应的前端代码。点击“更多”然后“查看代码”，可以看到该UI页面对应的HTML代码。点击“Export”可以导出Stitch的设计稿，例如导出到Figma。
有两种方式可以导入Figma：
-
使用Stitch的“Code to Figma”插件：先复制代码，在Figma中选择插件，粘贴代码，点击生成。但有时图片可能无法显示，需要手动修复。
-
使用“HTML to Figma”插件：粘贴代码，点击导入，效果更好，图片和布局都能正常显示。
还有一种最简单的导入方式：直接在Stitch复制UI页面，回到Figma直接粘贴。但这种方式导入的设计稿是图片形式，无法直接编辑。
设计稿导入Figma后，就可以用来交付展示、审核或进行二次微调。点击“Download”也可以将设计稿下载到本地。
三、第二步：用Google AI Studio生成前端代码
现在Stitch给我们生成的设计稿是相互独立的页面，没有关联。下一步，我们使用Google AI Studio根据这些设计稿，生成一个能够交互响应的前端App，也就是把这些独立的页面组织起来，整合成一个整体。
先全选所有页面，点击“更多” → “Export”，在这里选择“AI Studio”，然后点击下面的“Build with AI Studio”。它会自动跳转到AI Studio并开始生成代码。可以看到，我们导入了5张UI设计图和它们分别对应的5个HTML。在这里我们可以选择模型，然后点击执行。
执行结束后，来看一下生成的App。点击按钮应该都有响应，包括领养申请页面。如果在测试中发现任何问题，可以让AI Studio继续修改。比如，申请领养这里没有“下一步”按钮，我们可以要求它修复这个问题。修改完成后再次测试：输入领养信息，勾选同意，点击提交申请——功能正常了。
再比如个人信息页面，点击消息没有反应。我们让AI Studio完善消息功能，要求在领养申请通过后，在这里发送消息通知。修改完成后，消息通知功能就添加上了。
除了通过对话修改，AI Studio也支持精准修改。点击“画笔”工具，可以添加评论框或箭头，指定要修改的内容。例如，我们想要删除“兔子”这个分类，就可以框选“兔子”，填写要修改的内容。还可以添加箭头指向“地图模式”，然后写文字要求删除这个模式。再框选“地理位置”，要求只显示城市，不显示国家。修改完成后，点击“Add to chat”，这些修改内容会同步到AI对话中，点击执行即可。
经过几轮测试和修改，确认没有问题后，我们的前端App就可以用于下一步操作了。
注意：AI Studio生成的并不是一个完整的应用，而只是一个前端的App。点击“Code”查看生成的代码，可以看到宠物数据都是直接写死在代码里的。但在真实应用中，这些数据需要存储到数据库中。AI Studio适合用来生成纯前端的Web应用，而我们的App需要后端服务和数据存储，所以接下来需要生成后端。
四、第三步：用Anti Gravity生成后端接口与数据库
我们先点击下载按钮，把前端代码下载到本地。然后使用Anti Gravity来生成对应的后端代码。
将前端代码导入Anti Gravity，然后让它分析前端代码，并为它生成对应的后端代码，实现一个前后端一体的完整App，并且要求数据存储使用在线的Supabase数据库。点击执行。
关于Anti Gravity的使用，我们在上一期视频中有详细介绍，不熟悉的朋友可以先去看一下。
执行结束后，Anti Gravity会先生成一个执行计划，包含技术选型、需要配置的数据库参数、技术架构、数据库表的设计等。确认无误后，点击“Proceed”让它按照计划生成代码。
执行结束后，它会生成一个README文件，汇总具体做了哪些工作，以及如何配置参数、如何启动服务。我们按照要求配置两个数据库参数。
4.1 配置Supabase数据库
打开Supabase，新建一个项目。在设置中找到“Data API”，复制URL，配置到env配置文件中。再点击“API Keys”，复制API Key，也添加到配置文件。
配置完参数后，需要新建数据库表。打开init.sql文件，复制其中的SQL语句。回到Supabase数据库，打开“SQL Editor”，粘贴SQL并执行。执行结束后，打开“Table Editor”，可以看到新建的5张数据表：
-
领养申请记录表
-
收藏记录表
-
消息通知数据表
-
宠物信息数据表
-
收容单位数据表
-
用户信息数据表
表中已经写入了一些测试数据。
4.2 启动服务并测试
执行 npm run dev 启动服务，打开生成的网址测试App的各项功能。如果遇到问题，可以让Anti Gravity继续修改。经过几轮测试和修改，在线领养宠物App的核心功能就基本完善了。
为方便演示，我们暂时只关注核心功能，包括用户注册/登录、查看宠物信息、申请领养等。其他功能暂不考虑。
4.3 测试效果
打开App页面，点击登录，先注册一个账号：输入用户名、邮箱、密码，点击注册。注册成功后自动登录（注意这里没有验证邮箱，后续可添加验证功能）。
登录后进入宠物信息列表，点击某个宠物可以查看详细信息（体重、年龄、健康状况等）。如果满意，点击“申请领养”，填写领养信息，勾选同意，提交申请。申请提交后，消息中心会收到一条消息通知。
打开Supabase数据库查看，可以看到刚才注册的用户数据、提交的领养申请记录（状态为pending）、以及发送的消息通知。个人中心显示有一条领养申请正在审核中。
五、第四步：将代码托管到GitHub
测试没问题后，下一步将项目代码托管到GitHub，方便版本管理和后续迭代开发。
熟悉Git的可以自己手动操作，不熟悉的也没关系，可以让AI来引导操作。执行以下命令：
git init git add . git commit -m "初始提交"
然后去GitHub新建一个项目：输入项目名、项目描述，可见性选择Public，点击创建。创建完成后，复制项目的SSH网址，回到Anti Gravity，把网址发送给AI，它就会自动帮我们把代码推送到GitHub。
回到GitHub查看，可以看到代码已经成功上传。
六、第五步：用Vercel部署到云端
接下来我们把App部署到云端，这里选择使用Vercel免费部署。Vercel提供了一定的免费额度，具体参数可以参考官网。
注意：我们的App不是静态Web应用，不能部署到GitHub Pages。我们需要使用Vercel。
点击“Add”，选择添加一个Project，然后点击“Install”给GitHub安装一个Vercel插件，点击“Install”，再点击“Continue”。系统会读取到我们的GitHub项目列表，导入“在线领养宠物”这个项目。
前面两项（框架和根目录）保持默认，然后填写服务构建命令：npm run build，部署路径使用dist，安装依赖的命令使用npm install。接着把前面两个数据库认证参数配置过来，然后点击“Deploy”即可。
如果不知道如何配置这些参数，可以让AI根据项目代码生成一份部署到Vercel的文档，然后照着操作。
服务部署成功后，点击跳转到控制台，Vercel会给我们分配一个服务网址。如果有自己的域名，也可以点击绑定自己的域名。打开这个网址，可以看到服务运行正常。现在这个App已经部署到云端，任何人都可以通过该网址访问我们的服务。
七、配套管理后台的实现
除了用户端App，我们还需要一个管理后台，用于录入宠物信息和审批用户的领养申请。操作流程与前面类似，我们不再重复演示，直接看生成的效果。
在本地启动管理后台服务，打开管理后台页面。如果只是个人使用，可以不部署到云端，直接运行在自己电脑上。
管理后台功能包括：
-
仪表盘：展示宠物总数、可领养宠物数、已领养宠物数等信息。
-
宠物列表：可编辑宠物信息。
-
录入宠物信息：添加新宠物。
-
领养申请记录：审批用户的领养申请。
我们在管理后台审批之前提交的领养申请，通过后，用户端会收到消息通知。
7.1 完整流程演示
在手机端使用Vercel网址打开服务页面，点击登录，使用之前注册的账号登录。目前只有两只可领养的宠物。我们在管理后台录入一条新宠物信息：输入名字、体重、年龄，品种选择“拉布拉多”，上传宠物图片，填写描述信息、特点标签、健康信息，点击保存。
录入完成后，在管理后台的宠物列表中可以看到新数据。宠物图片我们改为用Supabase的Storage存储，可以在Storage中看到上传的照片。
刷新手机端App页面，新添加的拉布拉多信息就显示出来了。点击打开，查看宠物详情，点击“申请领养”，填写信息并提交。消息中心会收到“领养通过后通知”的消息（目前尚未通过）。
回到管理后台，打开领养申请，批准拉布拉多的领养申请。批准后，该宠物不再允许别人申请领养。手机端App会收到领养通过的消息，并且宠物列表中的拉布拉多信息自动移除，避免二次申请。
至此，一个完整的宠物领养流程就闭环了。再完善一下其他功能，这个App就可以正式发布上线。
八、总结
以上就是这套Web Coding开发流程的全部内容。使用这套流程，我们可以把一个想法快速落地成一个真正可用的App，从设计、开发到上线，整个过程都非常高效，而且用到的工具都是可以免费使用的，成本极低。
如果你有好的创意，不妨动手试一试。感谢大家的观看和点赞支持，我们下期视频再见。
