{
"title": "GPT-4 & Copilot 帮助我编写了新项目 90% 的代码",
"tags": [
"post"
],
"summary": "非标题党。剩下 10% 的工作是复制粘贴。",
"sources": [
"xlog"
],
"external_urls": [
"https://song.xlog.app/gpt-project"
],
"date_published": "2023-03-24T07:00:00.000Z",
"content": "> 注意，这篇文章需要加入等候名单才可阅读。\n\n## 起因\n\n有人说 2023 是 waitlist 元年，因为各种项目（主要是 AI）亮相在用户前的第一面都是要求用户干一件事情：**加入等待名单**（join the waitlist）。\n\nWaitlist 是一种常见的策略，用于管理用户的访问和使用。它通常用于新产品或服务的推出，以便控制用户流量并确保系统的稳定性。这个概念更早见于大学申请中，指的是学生提交入学申请给大学，学校再在一众排队等候名单中挑选学生来录取。\n\nWaitlist 的好处有：\n\n<img src=\"ipfs://bafybeicqq37hgism7nbxxydftqbkz4nknpcyvftkgppkqddjordybw6jmq\" alt=\"gpt-waitlist-good-things.png\" width=\"100%\" />\n\n但我实在很受不了这么多产品在还没准备好的情况下就急于发布，并且都让大家加入 waitlist。这可以理解，但非常滑稽。\n\n所以「我」随手做了一个嘲讽网站：[JoinTheWaitlist](https://join-waitlist.vercel.app/)。\n\n<img src=\"ipfs://bafybeiewqzgezfp6drxzshou334ticwopooy7ufpye53tjedp4eq6ty4ue\" alt=\"join-the-waitlist-website.png\" width=\"100%\" />\n\n没错，整个网站就一个按钮：**JOIN THE WAITLIST**。这是一个「等候名单」的网站，加入等候名单，你就可以排队等候以加入等候名单了。\n\n然后「我」发了一条推文：\n\n<iframe src=\"https://platform.twitter.com/embed/Tweet.html?id=1638885155971674113&theme=dark\" height=\"850\" width=\"100%\"></iframe>\n\n不难看出，推文内容本身（如哗众取宠的 emoji 和文风）也非常经典和嘲讽。这归功于 GPT-4：\n\n<img src=\"ipfs://bafkreicbzpt45zun5f6amwt3gkxhejdowpj2hwuvzqlpzfnr7hvrzlhitu\" alt=\"gpt-write-a-tweet-prompt-join-the-waitlist.png\" width=\"100%\" />\n\n而写这条推文是 GPT-4 为我的这个项目做的最后一件事。在此之前，它只花了一个小时，就帮我完成了几乎整个项目的代码编写。\n\n什么！？几乎全是 GPT-4 帮忙写的？是的。因为这个想法在我填了又一个 waitlist 后冲上了我的脑子，但我实在懒得花时间写代码。这时，我突然想起推特上大家总是说 GPT-4 强到直接给你写项目。我便疑惑真的有这么神奇吗？于是抱着实验性的目的，拿这个项目试试 GPT。\n\n结果非常成功。\n\n这就是为什么我刚刚说「我」的时候要加引号。\n\n那这一切是怎么完成的呢？\n\n## 第零步：创建项目\n\n我使用了 Next.js (React) 来开发项目，直接用了一个脚手架。耗时十秒。此部分略过。\n\n如果你是编程零基础，你可以问问 GPT 如何创建一个前端项目，相信也是小菜一碟。\n\n## 第一步：打字口号（Typing Slogans）\n\n### 想几个口号\n\n面对空白项目，我大概在脑海中想了一下布局。最上面首先需要一个大大的 slogan 区域来不断打字，说「Waitlist can help you....」。\n\n有哪些 slogans 呢？问问 GPT 吧：\n\n<img src=\"ipfs://bafybeig26wevqmbmu4gna3w4qzkxtzd6sisqh4vzjwf72zbqmdxmec3rrq\" alt=\"gpt-ask-for-slogan.png\" width=\"100%\" />\n\n很好，十分讽刺。我只字未改，复制过来放在了我的项目中。\n\n### 打字效果\n\n接下来，询问如何在 React 中实现打字效果：\n\n<img src=\"ipfs://bafybeifktes7uh4owifikxl7agrarjhoccfkbnwnnxqdpkeow4evlq6wpa\" alt=\"gpt-ask-for-typing-slogan.png\" width=\"100%\" />\n\n它甚至直接告诉了我可以用 [typeit-react](https://www.npmjs.com/package/typeit-react)，还直接写出了使用代码。我不需要去查有什么库可以用，这个库该怎么用。\n\n但中间的 `instance` 语句比较繁琐，我问了一下能不能简写：\n\n<img src=\"ipfs://bafybeidpnqp4yh2qjpzxeaqgm4uigwq6aina6ibvxusxkirifdbem2bu3i\" alt=\"gpt-ask-for-typing-slogan-improvement.png\" width=\"100%\" />\n\n我只轻描淡写地给了个指示，它不光写了，还解释了。它真的，我哭死。😭😭😭\n\n停止感动。立马复制过来！\n\n### 闪动光标\n\n接下来，我还想要在末尾加一个一直闪动的打字光标。这种小任务，我选择直接让 Copilot 帮我写：\n\n<img src=\"ipfs://bafybeib5xaq3qdz6ksfg4cjt25nghjatfx4ak36msk2b2ndu5hgili37oq\" alt=\"copilot-blinking-cursor\" width=\"100%\" />\n\n如图所示，我所做的事情：\n\n- 写了一句注释，告诉 Copilot 接下来的代码是做什么的（即一个有动画的闪动光标，和文字高度一样）。\n- 换行。Copilot 提示这一行可以这样写。\n- 回车确认。\n- 换行。Copilot 提示这一行可以这样写。\n- 回车确认。\n- 换行。Copilot 提示这一行可以这样写。\n- 回车确认。\n- 「写」完了……\n\n我要认罪：这真的是大部分时候我的工作日常，我就负责写注释和疯狂换行回车，Copilot 写代码。另外记得最后别忘了删掉注释，不留痕迹，破坏作案现场。\n\n成果：\n\n<img src=\"ipfs://bafkreibpndc53hu4cm7o4ns46ajg6bu2hpigr6pfynbbi2bkzrsz4nsprm\" alt=\"typing-slogon\" width=\"100%\" />\n\n## 第二步：酷炫按钮\n\n既然是 Waitlist，那当然需要一个大大的按钮来点击加入。我希望这个按钮非常酷炫。让我问问 GPT：\n\n> 现在请为我编写一个非常闪亮的按钮，具有终极动画效果，例如悬停、点击、发光、动画、过渡、渐变等。让每个人都想要点击它！展示给我 CSS 代码。\n\n<img src=\"ipfs://bafybeifpviwuoa77pjuthv7d2sknjxteggzhxn5llfplaihjux2tfc7igq\" alt=\"gpt-ask-for-button.png\" width=\"100%\" />\n\n我承认我不是一个好的 prompt engineer，但它还是帮我写出来了。\n\n需要注意的是，网页端的 ChatGPT 回复如果过长会戛然而止。不要慌，输入「continue」或者「继续」就可以了。\n\n<img src=\"ipfs://bafybeic6tosm7yvbxk2zof7nc4gf6zp6bowzz2c2xd5aeunsegfvzz2sgu\" alt=\"gpt-ask-for-button-continue.png\" width=\"100%\" />\n\n经过两轮 continue 后，按钮到手，效果非常出色！\n\n<img src=\"ipfs://bafybeidcegufqq4ytcoe5vh24bn2tnwhjdk4csethgylcmnq6ssvarwdvi\" alt=\"gpt-waitlist-button.gif\" width=\"100%\" />\n\n但我发现按钮没有点击效果。没关系，这点小事就让 Copilot 帮忙吧——\n\n<img src=\"ipfs://bafybeichfxtodrnpqnh3ffkubam6zswcrsxuobl3hmroydq6hzmjrqklaa\" alt=\"copilot-clicking-effect.gif\" width=\"100%\" />\n\n看看效果：\n\n<img src=\"ipfs://bafybeibextxfqw4kfunrxetrjyknzdoeu7gnjueb6b5kwzstgyhlyvte3u\" alt=\"copilot-clicking-effect-preview.gif\" width=\"100%\" />\n\n行，差不多就这样吧！\n\n## 第三步：用户评价卡片\n\n接下来，我希望在页面上展示一组用户评价。\n\n> 现在写一些推特用户的评价，夸「JoinTheWaitlist」很棒。\n\n<img src=\"ipfs://bafybeifodbtenwneefte26ih4ozrwzbq7x5yftr42yjvpplfpav7ye73ru\" alt=\"gpt-ask-for-waitlist-review.png\" width=\"100%\" />\n\n> 再生成一些有意思的假用户名。\n\n<img src=\"ipfs://bafkreicdvkblo5532xndc7qiak7vt2l7xxnlafkn4fobsafmfxrxe2myma\" alt=\"gpt-ask-for-fake-twitter-username.png\" width=\"100%\" />\n\n这时候我突然意识到，我得自己把评论和名字一句句复制起来，并且写成代码里的数据结构，太麻烦了。于是我直接问：\n\n> 用以下数据结构，帮我把这些数据混合起来。\n\n<img src=\"ipfs://bafkreihundiljemfvsy57wf2vbq25j3em6hbmffajhp6pnvl3xo2nvm6ka\" alt=\"gpt-ask-for-review-data-generation.png\" width=\"100%\" />\n\n好了，这下可以直接复制了。\n\n哦对了，忘了直接伸手要 UI 组件的代码了：\n\n> 帮我写一个 Tailwind React 组件叫 UserReviews，用推特的风格展示这些评论。\n\n<img src=\"ipfs://bafybeifm54hexzxwpkgggoennowmsh3onizomedky3y7yfiysjnqswqpcq\" alt=\"gpt-ask-for-user-review-react-component.png\" width=\"100%\" />\n\n复制过来，看看效果：\n\n<img src=\"ipfs://bafybeifnw3gwqrbbgdf5guhs75ov4z64dfxbp3xlmm7kimdhgglulttwuq\" alt=\"gpt-user-review-ui-preview.png\" width=\"100%\" />\n\n> 最终效果的形成另外还借助了一些 Copilot 的力量。以及头像使用了 [Pravatar](https://pravatar.cc/) 的随机生成服务。\n\n简直太完美了。\n\n## 第四步：加上 Rick Roll\n\n其他的一些实现这里就略过不讨论了，因为大相径庭——问它，它给你，你复制粘贴。\n\n<img src=\"ipfs://bafybeigejgvs52t4ugs6rurr35jz6nq5vixa3gx7zsks6jpovchto3du6a\" alt=\"gpt-copy-paste-keyboard.png\" width=\"100%\" />\n\n这里想提一个比较有意思是：我想实现的一个效果是，点击 JOIN THE WAITLIST 按钮后，会跳转到 YouTube 的 Rick Roll 视频。\n\n<img src=\"ipfs://bafybeihxdxzubcy35y4re5i4jbszr2u5x34hyxjahwmf5uwyf5t5mtnyzi\" alt=\"rick-roll-video-cover.png\" width=\"100%\" />\n\n我抱着试一试的心态，打下了 `https://yout`，然后：\n\n<img src=\"ipfs://bafkreign7ttn7ynwpeptzozb4kceoh4ogndzn5cmkhauf4qwfyp3zapxwu\" alt=\"copilot-rick-roll-hint.png\" width=\"100%\" />\n\nCopilot 提示了一个视频链接。\n\n我心想不会吧……\n\n接着我把视频链接打开一看—— [https://youtu.be/dQw4w9WgXcQ](https://youtu.be/dQw4w9WgXcQ)。\n\n这个 moment 让我觉得非常欢乐。\n\n## 第五步：部署上线\n\n最后小手一点，代码推送到了 [GitHub](https://github.com/Songkeys/waitlist)，并借助 [Vercel](https://vercel.com) 的自动部署服务。[JoinTheWaitlist](https://join-waitlist.vercel.app/) 花了一分钟部署上线了。\n\n## 第六步：发条推特\n\n如开头所示，我还让 GPT 帮我做了一下 marketing。\n\n<img src=\"ipfs://bafkreicbzpt45zun5f6amwt3gkxhejdowpj2hwuvzqlpzfnr7hvrzlhitu\" alt=\"gpt-write-a-tweet-prompt-join-the-waitlist.png\" width=\"100%\" />\n\n## 收尾的话\n\n除了中间我出去吃了个饭的时间，整个过程耗时不到一小时，没有超过目前 GPT-4 网页版的 25 条/3 小时限制。很多问题的回答基本是一击就中，不需要额外修改和追问！而且我并没有非常仔细地斟酌我的 prompt，而是简单随意地跟它对话。\n\n做完之后，我回想了一下整件事情，我在其中的参与主要有以下部分\n\n- 提出想法\n- 写 prompts 给 GPT\n- 复制粘贴\n- 让 Copilot 帮润色修改，帮写一些小功能/模板代码\n- 保存代码，推送代码，部署代码\n\n我在其中原创了任何东西吗？🤔\n\n我这么多年代码经验给我带来的除了经验还有什么？🤔\n\n以后的产品开发又会是怎样的？🤔\n\n……\n\n合上电脑，我思绪万千，愁断了肠。\n\n正在感叹之时，我突然猛然一惊——\n\n<img src=\"ipfs://bafybeia3h66wbrlvst6f4fpl6vgppsltponq5fqsw5we7ohkkey55mr6am\" alt=\"gpt-please-meme.png\" width=\"100%\" />\n\nOh shit！\n\n<img src=\"ipfs://bafkreif47hlmg2mbai5a3ucgwmlcnekpbfiydlsxkkzkxpdskfwdqrmmti\" alt=\"to-be-continued.png\" width=\"100%\" />\n",
"attributes": [
{
"value": "gpt-project",
"trait_type": "xlog_slug"
}
]
}
