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
加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。