注意，這篇文章需要加入等候名單才可閱讀。
起因#
有人說 2023 是 waitlist 元年，因為各種項目（主要是 AI）亮相在用戶前的第一面都是要求用戶幹一件事情：加入等待名單（join the waitlist）。
Waitlist 是一種常見的策略，用於管理用戶的訪問和使用。它通常用於新產品或服務的推出，以便控制用戶流量並確保系統的穩定性。這個概念更早見於大學申請中，指的是學生提交入學申請給大學，學校再在一眾排隊等候名單中挑選學生來錄取。
Waitlist 的好處有：
但我實在很受不了這麼多產品在還沒準備好的情況下就急於發布，並且都讓大家加入 waitlist。這可以理解，但非常滑稽。
所以「我」隨手做了一個嘲諷網站：JoinTheWaitlist。
沒錯，整個網站就一個按鈕：JOIN THE WAITLIST。這是一個「等候名單」的網站，加入等候名單，你就可以排隊等候以加入等候名單了。
然後「我」發了一條推文：
不難看出，推文內容本身（如哗眾取寵的 emoji 和文風）也非常經典和嘲諷。這歸功於 GPT-4：
而寫這條推文是 GPT-4 為我的這個項目做的最後一件事。在此之前，它只花了一個小時，就幫我完成了幾乎整個項目的代碼編寫。
什麼！？幾乎全是 GPT-4 幫忙寫的？是的。因為這個想法在我填了又一個 waitlist 後衝上了我的腦子，但我實在懶得花時間寫代碼。這時，我突然想起推特上大家總是說 GPT-4 強到直接給你寫項目。我便疑惑真的有這麼神奇嗎？於是抱著實驗性的目的，拿這個項目試試 GPT。
結果非常成功。
這就是為什麼我剛剛說「我」的時候要加引號。
那這一切是怎麼完成的呢？
第零步：創建項目#
我使用了 Next.js (React) 來開發項目，直接用了個腳手架。耗時十秒。此部分略過。
如果你是編程零基礎，你可以問問 GPT 如何創建一個前端項目，相信也是小菜一碟。
第一步：打字口號（Typing Slogans）#
想幾個口號#
面對空白項目，我大概在腦海中想了一下佈局。最上面首先需要一個大大的 slogan 區域來不斷打字，說「Waitlist can help you....」。
有哪些 slogans 呢？問問 GPT 吧：
很好，十分諷刺。我只字未改，複製過來放在了我的項目中。
打字效果#
接下來，詢問如何在 React 中實現打字效果：
它甚至直接告訴了我可以用 typeit-react，還直接寫出了使用代碼。我不需要去查有什麼庫可以用，這個庫該怎麼用。
但中間的 instance 語句比較繁瑣，我問了一下能不能簡寫：
我只輕描淡寫地給了個指示，它不光寫了，還解釋了。它真的，我哭死。😭😭😭
停止感動。立馬複製過來！
閃動光標#
接下來，我還想要在末尾加一個一直閃動的打字光標。這種小任務，我選擇直接讓 Copilot 幫我寫：
如圖所示，我所做的事情：
- 寫了一句註釋，告訴 Copilot 接下來的代碼是做什麼的（即一個有動畫的閃動光標，和文字高度一樣）。
- 換行。Copilot 提示這一行可以這樣寫。
- 回車確認。
- 換行。Copilot 提示這一行可以這樣寫。
- 回車確認。
- 換行。Copilot 提示這一行可以這樣寫。
- 回車確認。
- 「寫」完了……
我要認罪：這真的是大部分時候我的工作日常，我就負責寫註釋和瘋狂換行回車，Copilot 寫代碼。另外記得最後別忘了刪掉註釋，不留痕跡，破壞作案現場。
成果：
第二步：酷炫按鈕#
既然是 Waitlist，那當然需要一個大大的按鈕來點擊加入。我希望這個按鈕非常酷炫。讓我問問 GPT：
現在請為我編寫一個非常閃亮的按鈕，具有終極動畫效果，例如懸停、點擊、發光、動畫、過渡、漸變等。讓每個人都想要點擊它！展示給我 CSS 代碼。
我承認我不是一個好的 prompt engineer，但它還是幫我寫出來了。
需要注意的是，網頁端的 ChatGPT 回覆如果過長會戛然而止。不要慌，輸入「continue」或者「繼續」就可以了。
經過兩輪 continue 後，按鈕到手，效果非常出色！
但我發現按鈕沒有點擊效果。沒關係，這點小事就讓 Copilot 幫忙吧 ——
看看效果：
行，差不多就這樣吧！
第三步：用戶評價卡片#
接下來，我希望在頁面上展示一組用戶評價。
現在寫一些推特用戶的評價，誇「JoinTheWaitlist」很棒。
再生成一些有意思的假用戶名。
這時我突然意識到，我得自己把評論和名字一句句複製起來，並且寫成代碼裡的數據結構，太麻煩了。於是我直接問：
用以下數據結構，幫我把這些數據混合起來。
好了，這下可以直接複製了。
哦對了，忘了直接伸手要 UI 組件的代碼了：
幫我寫一個 Tailwind React 組件叫 UserReviews，用推特的風格展示這些評論。
複製過來，看看效果：
最終效果的形成另外還借助了一些 Copilot 的力量。以及頭像使用了 Pravatar 的隨機生成服務。
簡直太完美了。
第四步：加上 Rick Roll#
其他的一些實現這裡就略過不討論了，因為大相徑庭 —— 問它，它給你，你複製粘貼。
這裡想提一個比較有意思是：我想實現的一個效果是，點擊 JOIN THE WAITLIST 按鈕後，會跳轉到 YouTube 的 Rick Roll 視頻。
我抱著試一試的心態，打下了 https://yout，然後：
Copilot 提示了一個視頻鏈接。
我心想不會吧……
接著我把視頻鏈接打開一看 —— https://youtu.be/dQw4w9WgXcQ。
這個 moment 讓我覺得非常歡樂。
第五步：部署上線#
最後小手一點，代碼推送到了 GitHub，並借助 Vercel 的自動部署服務。JoinTheWaitlist 花了一分鐘部署上線了。
第六步：發條推特#
如開頭所示，我還讓 GPT 幫我做了一下 marketing。
收尾的話#
除了中間我出去吃了個飯的時間，整個過程耗時不到一小時，沒有超過目前 GPT-4 網頁版的 25 條 / 3 小時限制。很多問題的回答基本是一擊就中，不需要額外修改和追問！而且我並沒有非常仔細地斟酌我的 prompt，而是簡單隨意地跟它對話。
做完之後，我回想了一下整件事情，我在其中的參與主要有以下部分
- 提出想法
- 寫 prompts 給 GPT
- 複製粘貼
- 讓 Copilot 幫潤色修改，幫寫一些小功能 / 模板代碼
- 保存代碼，推送代碼，部署代碼
我在其中原創了任何東西嗎？🤔
我這麼多年代碼經驗給我帶來的除了經驗還有什麼？🤔
以後的產品開發又會是怎樣的？🤔
……
合上電腦，我思緒萬千，愁斷了腸。
正在感嘆之時，我突然猛然一驚 ——
Oh shit！