Songkeys

Songkeys

Hello. Songkeys here~ :D
twitter

GPT-4 & Copilot 帮助我编写了新项目 90% 的代码

注意,这篇文章需要加入等候名单才可阅读。

起因

有人说 2023 是 waitlist 元年,因为各种项目(主要是 AI)亮相在用户前的第一面都是要求用户干一件事情:加入等待名单(join the waitlist)。

Waitlist 是一种常见的策略,用于管理用户的访问和使用。它通常用于新产品或服务的推出,以便控制用户流量并确保系统的稳定性。这个概念更早见于大学申请中,指的是学生提交入学申请给大学,学校再在一众排队等候名单中挑选学生来录取。

Waitlist 的好处有:

gpt-waitlist-good-things.png

但我实在很受不了这么多产品在还没准备好的情况下就急于发布,并且都让大家加入 waitlist。这可以理解,但非常滑稽。

所以「我」随手做了一个嘲讽网站:JoinTheWaitlist

join-the-waitlist-website.png

没错,整个网站就一个按钮:JOIN THE WAITLIST。这是一个「等候名单」的网站,加入等候名单,你就可以排队等候以加入等候名单了。

然后「我」发了一条推文:

不难看出,推文内容本身(如哗众取宠的 emoji 和文风)也非常经典和嘲讽。这归功于 GPT-4:

gpt-write-a-tweet-prompt-join-the-waitlist.png

而写这条推文是 GPT-4 为我的这个项目做的最后一件事。在此之前,它只花了一个小时,就帮我完成了几乎整个项目的代码编写。

什么!?几乎全是 GPT-4 帮忙写的?是的。因为这个想法在我填了又一个 waitlist 后冲上了我的脑子,但我实在懒得花时间写代码。这时,我突然想起推特上大家总是说 GPT-4 强到直接给你写项目。我便疑惑真的有这么神奇吗?于是抱着实验性的目的,拿这个项目试试 GPT。

结果非常成功。

这就是为什么我刚刚说「我」的时候要加引号。

那这一切是怎么完成的呢?

第零步:创建项目

我使用了 Next.js (React) 来开发项目,直接用了一个脚手架。耗时十秒。此部分略过。

如果你是编程零基础,你可以问问 GPT 如何创建一个前端项目,相信也是小菜一碟。

第一步:打字口号(Typing Slogans)

想几个口号

面对空白项目,我大概在脑海中想了一下布局。最上面首先需要一个大大的 slogan 区域来不断打字,说「Waitlist can help you....」。

有哪些 slogans 呢?问问 GPT 吧:

gpt-ask-for-slogan.png

很好,十分讽刺。我只字未改,复制过来放在了我的项目中。

打字效果

接下来,询问如何在 React 中实现打字效果:

gpt-ask-for-typing-slogan.png

它甚至直接告诉了我可以用 typeit-react,还直接写出了使用代码。我不需要去查有什么库可以用,这个库该怎么用。

但中间的 instance 语句比较繁琐,我问了一下能不能简写:

gpt-ask-for-typing-slogan-improvement.png

我只轻描淡写地给了个指示,它不光写了,还解释了。它真的,我哭死。😭😭😭

停止感动。立马复制过来!

闪动光标

接下来,我还想要在末尾加一个一直闪动的打字光标。这种小任务,我选择直接让 Copilot 帮我写:

copilot-blinking-cursor

如图所示,我所做的事情:

  • 写了一句注释,告诉 Copilot 接下来的代码是做什么的(即一个有动画的闪动光标,和文字高度一样)。
  • 换行。Copilot 提示这一行可以这样写。
  • 回车确认。
  • 换行。Copilot 提示这一行可以这样写。
  • 回车确认。
  • 换行。Copilot 提示这一行可以这样写。
  • 回车确认。
  • 「写」完了……

我要认罪:这真的是大部分时候我的工作日常,我就负责写注释和疯狂换行回车,Copilot 写代码。另外记得最后别忘了删掉注释,不留痕迹,破坏作案现场。

成果:

typing-slogon

第二步:酷炫按钮

既然是 Waitlist,那当然需要一个大大的按钮来点击加入。我希望这个按钮非常酷炫。让我问问 GPT:

现在请为我编写一个非常闪亮的按钮,具有终极动画效果,例如悬停、点击、发光、动画、过渡、渐变等。让每个人都想要点击它!展示给我 CSS 代码。

gpt-ask-for-button.png

我承认我不是一个好的 prompt engineer,但它还是帮我写出来了。

需要注意的是,网页端的 ChatGPT 回复如果过长会戛然而止。不要慌,输入「continue」或者「继续」就可以了。

gpt-ask-for-button-continue.png

经过两轮 continue 后,按钮到手,效果非常出色!

gpt-waitlist-button.gif

但我发现按钮没有点击效果。没关系,这点小事就让 Copilot 帮忙吧 ——

copilot-clicking-effect.gif

看看效果:

copilot-clicking-effect-preview.gif

行,差不多就这样吧!

第三步:用户评价卡片

接下来,我希望在页面上展示一组用户评价。

现在写一些推特用户的评价,夸「JoinTheWaitlist」很棒。

gpt-ask-for-waitlist-review.png

再生成一些有意思的假用户名。

gpt-ask-for-fake-twitter-username.png

这时候我突然意识到,我得自己把评论和名字一句句复制起来,并且写成代码里的数据结构,太麻烦了。于是我直接问:

用以下数据结构,帮我把这些数据混合起来。

gpt-ask-for-review-data-generation.png

好了,这下可以直接复制了。

哦对了,忘了直接伸手要 UI 组件的代码了:

帮我写一个 Tailwind React 组件叫 UserReviews,用推特的风格展示这些评论。

gpt-ask-for-user-review-react-component.png

复制过来,看看效果:

gpt-user-review-ui-preview.png

最终效果的形成另外还借助了一些 Copilot 的力量。以及头像使用了 Pravatar 的随机生成服务。

简直太完美了。

第四步:加上 Rick Roll

其他的一些实现这里就略过不讨论了,因为大相径庭 —— 问它,它给你,你复制粘贴。

gpt-copy-paste-keyboard.png

这里想提一个比较有意思是:我想实现的一个效果是,点击 JOIN THE WAITLIST 按钮后,会跳转到 YouTube 的 Rick Roll 视频。

rick-roll-video-cover.png

我抱着试一试的心态,打下了 https://yout,然后:

copilot-rick-roll-hint.png

Copilot 提示了一个视频链接。

我心想不会吧……

接着我把视频链接打开一看 —— https://youtu.be/dQw4w9WgXcQ

这个 moment 让我觉得非常欢乐。

第五步:部署上线

最后小手一点,代码推送到了 GitHub,并借助 Vercel 的自动部署服务。JoinTheWaitlist 花了一分钟部署上线了。

第六步:发条推特

如开头所示,我还让 GPT 帮我做了一下 marketing。

gpt-write-a-tweet-prompt-join-the-waitlist.png

收尾的话

除了中间我出去吃了个饭的时间,整个过程耗时不到一小时,没有超过目前 GPT-4 网页版的 25 条 / 3 小时限制。很多问题的回答基本是一击就中,不需要额外修改和追问!而且我并没有非常仔细地斟酌我的 prompt,而是简单随意地跟它对话。

做完之后,我回想了一下整件事情,我在其中的参与主要有以下部分

  • 提出想法
  • 写 prompts 给 GPT
  • 复制粘贴
  • 让 Copilot 帮润色修改,帮写一些小功能 / 模板代码
  • 保存代码,推送代码,部署代码

我在其中原创了任何东西吗?🤔

我这么多年代码经验给我带来的除了经验还有什么?🤔

以后的产品开发又会是怎样的?🤔

……

合上电脑,我思绪万千,愁断了肠。

正在感叹之时,我突然猛然一惊 ——

gpt-please-meme.png

Oh shit!

to-be-continued.png
Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.