2024年2月15日,OpenAI发布了Sora,AI圈又沸腾了,大家都惊艳于Sora的效果。Sora的热度一度超过了GPT,有流量的地方就有机会,比如对于独立开发者来说最好的方式就是制作网站来承载这泼天的财富
虽然之前没有做过落地页,但没关系我有GPT4,所以这次打算通过GPT4来制作个Sora落地页。先展示下最后的成品先:Sora Application
可能有人会问什么是落地页呢?下面是GPT4的回答,简单来说就是:将你想提供的产品或服务通过静态网页展示给用户,吸引潜在的客户,这也是快速验证自己产品想法的方式,避免你开发完产品发现别人并不感兴趣的尴尬情况
对于程序员来说,要避免重复造轮子,能借鉴的就不会自己写,所以第一步就是在github上搜索有没有现成可以直接拿过来用的。最后找到的是这个:nextjs-waitlist-page,很符合我的预期的样子。画面简洁清晰,并可以让目标用户可以留下联系方式,方便后续宣传推广
接下来就是此页面的基础上进行修改调整即可
给GPT4指定角色,让其吐出的答案更专业,用到的提示词如下:
从github扒拉下代码后,直接安装相应的包之后即可启动
首先我们调整下右侧的文字信息,通过搜索框找到对应的位置🔍,换上我们想要展示的信息即可
调整好文字内容后的效果如下:
接着我们来调整下页面的左,先将图片换成Sora的演示视频,吸引用户的注意力。页面左侧的代码如下:
我们先将图片替换成视频,询问GPT4如何替换成这个视频:https://cdn.openai.com/sora/videos/big-sur.mp4
我只轻描淡写地给了个指示,它不光写了,还解释了。它真的,我哭死。😭😭😭
停止感动。立马复制过来!效果还行:
不过我还想增加多一些视频,同时视频会自动来回进行播放,首先询问下GPT4是否有类似的组件可以进行支持
好好好,它给我提示可以通过Swiper 框架来实现,Google搜索了下🔍,确实可以用得上,它里面有很多丰富现成组件可以参考借鉴
GPT4提供的代码如下:
将此代码封装为函数,并修改page.tsx代码引入次函数即可,page.tsx代码如下:
效果如下:
接下来,我还想要在末尾加一个一直闪动的打字光标。这种小任务,我选择直接让 GPT4 帮我写,
提示词如下:
GPT4返回的答案
GPT4提供的具体代码如下:
虽然是实现了打字效果,但就是太丑了,不够炫酷,而且字体不够醒目,于是让它继续帮我优化下CSS
这下终于满意,效果还不错:
最后再给页面添加个FAQ,即用户常见的问题,这里也是直接在github进行搜索,至于为什么不用GPT4来帮忙写是因为我知道它生成的虽然能用,但需要不断进行调整优化样式,不如直接用现成的,遇到有问题的地方再来问GPT4更快,这里参考的是这个:nextjs-faq-page,样式也深得我心
最后将代码提交到 ,并借助的自动部署服务就可以将页面进行部署了,来看看成品吧,Sora Application
恭喜你看到这里,貌似你会发现我的工作就是提出想法💡,写Prompt给GPT4,然后再ctrl+c,ctrl+v。其实不然,GPT4不是每次都准确地返回准确的回答,有时候也会报错,你需要不断进行询问调试才能最终获得你想要的结果,当然也有可能是我的Prompt写得还不够具体准确。但不管怎样,瑕不掩瑜,相比于以前只能通过搜索引擎或者寻找其他大佬寻找解决方法,GPT4的出现极大地提升工作效率,只需要几个小时即可以快速开发完一个网站。相信不久的将来它将完全的取代我🐶