零基础的小白也能通过AI搭建自己的网页应用

搭建过程

一、用deepseek帮忙构思

先思考自己想要一个什么工具，再把自己的想法告诉ds，让他帮你生成一份UI提示词

二、用stitch生成UI

这一步其实用普通的AI工具也可以，只是我觉得stitch的UI确实很好看

1、输入提示词并等待生成

我这里想要部署一个网站，所以选择web，如果想做移动端，可以选择【应用】。

选择的模式是3.0 pro，实测下来stitch的UI生成确实还挺好的

生成的效果图如下

2、把分割的UI图转换成可交互的html

这个就是生成后的可交互的原型图

3、导出html格式

三、AI写代码

把上一步下载的html放到trae里面，然后告诉AI你要实现哪些内容

注意这边和AI沟通的时候要告诉他你要选择什么后端和什么数据库。

我这边用的是node.js作为后端，Neon 作为数据库 因此我后面的数据库配置环境变量也是通过Neon来的

说完你的诉求之后，AI会自动帮你写代码的。 我属于一点编程知识都没有，这里所有的代码都是AI帮你写的

1、选择模式

我这里选择的是bulder模式，cn版的是免费的（赶紧薅羊毛）

2、转换成前后端的应用

如果你的服务端安装的时候，没有按照默认安装的路径来，他可能会找不到，所以你需要人工介入告诉AI你的node.js安装的地址。

3、本地测试

前面的步骤昨晚，应用的框架就基本搭建完了，接下来你需要本地测试。（其实我觉得修BUG和排查问题才是最麻烦的） 比如我在这里遇到了进到AI给的本地URL后，没有加载对应的组件，所以我就直接告诉AI，他会帮你排查问题

后续就是遇到啥问题，和AI说，AI帮你修正。中途有他反复修了多次，但是还是改不了的，我就依靠了在线搜索+额外问deepseek等。反正就是十万个为什么的过程。

四、部署

1、上传项目文件到github

（1）选择添加新项目

（2）为你的项目命名

（3）直接将你的项目文件上传

直接将项目的文件拖拽到网页上传即可。

注意我标记绿框的文件，这个文件夹里面文件有很多，可能会超过github一次性上传文件的数量（100个），但是不是上传必要的，所以可以不上传这个文件夹。 上传后我们点击commit提交

2、用vercel部署项目

（1）用vercel关联github账号

如果你没有注册过，那你请用github去注册，这样后面部署可以直接选到github的项目 如果你已经有了vercel的账号，那么就和github的账号关联一下

（2）创建项目

选择你刚刚在github创建的项目，进行导入

（3）直接部署

（4） 预览地址

这个地址就是你的应用的地址，注意国内的用户记得使用魔法浏览，否则进不去嗷

【注意】如果你的只是一个静态页面，到这一步就结束了，但是如果要连接数据库，还没可以使用

3、链接数据库

（1）选择数据库并登录账号

后续就是按照数据库所在的网站进行登录注册

（2）将数据库连接项目

（3）获取数据库连接地址

（4）将链接地址配置到vercel的环境变量

将（3）中获取的数据库连接粘贴，并保存

（5）vercel重新部署

接下来可以在vercel提供的部署的网页地址进行操作了。 数据库连接会有一定的延时，需要耐心等待 如果一直链接不上就在vercel重新部署

大功告成

数据库成功链接