用低代码工具和 GPT-4 给自己的产品做一个落地页

GPT-4 出来以后，不少人想做一些相关产品，或者用它来完善已有的产品。
第一步，要给自己的产品做一个落地页，告诉别人，你做了什么，有什么功能，解决什么问题。宣传你的落地页，让用户加入 waitlist。
制作落地页，最快的方式是在 Carrd、Webflow 等第三方建站工具上购买模板，直接在平台部署。
我这里会分享，有一些动手基础的，如何自己通过低代码工具，搭配 GPT 做一个产品落地页，让大家在一两个小时以内快速启动。
做这个落地页，90%的工作都会由 GPT 指导我来操作的，也算是分享一下我的实践。
看到即刻用户哥飞说自己做了一个落地页，代码基本上都是 GPT 写的。我想，我也可以试一下。
下面分享一下我用 GPT-4 写落地页的全过程，图片有点多，争取能让按照这个步骤操作的人，也能自己在 1 小时内也能做出一个落地页，并且收集到目标用户的邮箱。
先说一下主要需要用到的网站或者服务：
NameCheap： 域名购买平台Vercel：网站部署服务平台GitHub： 代码仓库GPT-4：AI编程MailChimp：邮箱收集其余几步基本上只需要注册账号，填写一些信息就好。重点分享一下看看 GPT-4 是如何帮我写代码的。下面开始。1、购买域名

在 NameCheap 上注册一个帐号，搜索并购买你的域名。

2、Vercel 部署网站
第一步，注册 Vercel 帐号
第二步，创建新项目



这里我选择的是模板中的 vue 模板，你也可以选择其他的模板。

选择自己的仓库，我选的是 github， 授权之后，会在 github 创建一个代码仓库，提交到这个仓库的代码会实时直接部署到 xxxxxxxx.vercel.app 这个地址下，这里的 xxxxxxxx 是每个项目的一个编号。
我们也可以绑定自己的域名到 Vercel。绑定域名自己的域名


它会给出类似下面的域名解析的设置，我们把这个设置复制到自己的域名解析设置里面。

以 namecheap 来举例，就是复制添加到下面这里：
NameCheap — Account — Dashboard
找到自己的域名，点击右边的 mange，输入自己的 DNS 解析配置：

完成了这些设置，正常的话，你在浏览器打开你的域名，应该可以看到页面显示大概是这样的：

这说明你的部署、域名解析已经成功。
下面就是写代码，你需要从 GitHub 代码仓库把代码拉到你的电脑，然后按照 GPT-4 说的，在这份代码的基础上进行修改和添加。下面开始写代码。
3、用 ChatGPT 写代码的示例MailChimp 电子邮箱服务
在这个落地页中，有一个核心的代码，就是用户填写邮箱，然后我得到邮箱列表。我不知道这个用什么好，是不是有类似的第三方服务，所以我也是问了它，在它的回答里，我看到了 MailChimp。

GPT-4 写代码
于是，我告诉他我的需求， 他给出了操作步骤和代码：

剩余的代码我就不贴了，文章最后我会放上完整的代码，我按照它说的创建对应的文件和代码，实现的效果是这样的：

我之前没有用过 MailChimp，不懂就问，按照它说的，我继续完善整个页面最重要的部分，用户输入邮箱，我得到邮箱。由于没有注册，我暂时先跳到 MailChimp 上注册了账号，并按照步骤找到了 API Key 和 需要的受众 id。

这样主要的代码就完成了。现在的 UI 还很丑，于是我让它参考别的网页效果修改 UI 。

我发现，其实它应该并没有去参考我给的链接的页面，因为 UI 并不一样，但确实比之前要好一些了。后面我又让它修改了 UI ，并且把语言全部改为了英文。


最后效果是这样的：

我自己测试了一下，邮箱成功记录到了 MailChimp 后台。到时候就可以给这些邮箱发兑换码了。

4、查看受众邮箱

5、源码以及如何使用源码
以上落地页最后的代码我都放在 GitHub 上，有需要的可以自取。
源码地址：https://github.com/KyleWen33/PromptXYZ.git
如何使用：
第一步：修改你的 MailChimp 的 API Key

第二步：本地测试的话，打开 Card.vue 修改页面文案为你自己的。
第三步：本地修改和测试的话，在终端分别执行以下指令：npm install
npm run serve
如果已经创建了 Vercel + Github 仓库关联，可以把代码拖到自己的仓库，然后提交到 github 仓库即可。
如果觉得对你有帮助，可以给我点个赞，时间比较仓促，如果有说的不清楚的，可以评论交流。