像我一樣，許多工程師已經在用 ChatGPT 解決編程問題，有些人甚至把它當作 Code Copilot 式的編程助手。如果讓它編寫一個完整項目的代碼，效果會怎麼樣呢？

前段時間，我們開發了一個全新的用戶社區：蜂巢科技社區。我負責實現這個小程序的前端部分，涵蓋商品展示、購買跳轉、用戶登錄、認證、發帖以及評論互動等功能。

從下圖你能看出，頁面的交互設計花了不少功夫。

****我**從未接觸過微信小程序開發，而且已經大半年沒碰過前端了，更沒有 CSS 經驗。**在這種情況下，我原本只打算完成基礎功能，確保頁面不會顯得太粗糙，交互細節準備以後再迭代開發。

但**當我嘗試讓 ChatGPT 直接來寫代碼，整個開發過程卻出奇地順利。前端項目代碼超過 5000 行，其中大約 90% 是由 ChatGPT 自動生成的，整個過程從零開始僅用一個星期便基本完成了。**

在這裏，我稍微梳理下開發過程的經驗，並給它起了一個名字：“AI 驅動開發”（AI-Driven Development，簡稱 AIDD）。當然，你叫它 “提示詞驅動開發”（Prompt-Driven Development，簡稱 PDD）也可以。

核心流程

在 AIDD 的開發流程中，每次開發迭代分爲三步：先用 prompt 描述所需功能；接下來，ChatGPT 會依此生成代碼；如果有需要，再對代碼進行調整，這涵蓋糾錯或根據實際需求進行優化。

整個項目就是一輪輪這樣的迭代完成的。‍

這種模式與使用 AI Code Copilot 的方式有很大不同。在 Copilot 方式中，工程師是主導者，而 AI 作爲輔助工具，主要用來生成代碼片段，提供代碼優化建議，或生成測試代碼。但在 AIDD/PDD 的模式中，絕大多數代碼是由 AI 生成，工程師的主要工作就是描述需求並調整生成的代碼。

對於有編程經驗，但正涉足新領域的工程師來說，這種方式真的能顯著提高開發效率。

項目實踐

接下來，我以兩個具體的模塊爲例，來展示具體的開發流程。

用戶登錄

先來實現一個登錄模塊。你可以把這個看作是 AIDD 的 "Hello, World!" 示例。頁面的原型如下：

• 功能概述：

• • 用戶可以通過此頁面登錄社區小程序；

• • 頁面上有公司的 logo 、公司名稱、登錄按鈕以及協議鏈接；

• • 用戶勾選複選框後，登錄按鈕激活。

有了這些信息，便可以繼續開發。記住，**AIDD 的核心開發流程是：提出需求 -> 使用生成的代碼 -> 如果必要，對生成的代碼進行微調。**開發過程會有多次迭代，每次迭代都會按照這個流程進行。‍‍‍‍‍‍‍‍‍‍‍‍‍

第一次迭代

首先，按照設計原型來描述頁面的功能以及其結構。

提問

我需要寫一個微信小程序的頁面，用來給用戶登錄。
這個頁面的標題是登錄。
頁面從上到下的內容分別是：

公司logo，圖片地址：/images/company_logo.png

公司名稱：蜂巢科技

一個按鈕，顯示：微信一鍵登錄

由複選框和文字組成的內容，文字是：我已閱讀並同意《用戶協議》、《隱私協議》，《用戶協議》和 《隱私協議》分別鏈接到網絡上文件

告訴我應該怎麼做，儘量詳細些。

試一下

如下面三張圖所示，這是 ChatGPT 給出的回答。

下圖則是根據 ChatGPT 回答生成的實際頁面。可以看出，雖然尚顯粗糙，但頁面元素已經很完整。

微調

不做調整。

第二次迭代

接下來，從 Figma 中複製樣式代碼給 ChatGPT。爲了簡潔，我使用... 省略了具體的代碼部分。‍‍

提問

公司logo距離頁面頂部80px，樣式是：
...

公司名稱距離公司logo 20px，樣式是：
...

按鈕距離上一個元素的距離是104，樣式是：
...


我已同意這行距離上一個元素的距離是：20，樣式是：
...
字體顏色：4A4A4A
鏈接顏色：#55D8E4

試一下

以下兩張圖展示的是 ChatGPT 的響應內容。

下圖是根據 ChatGPT 生成代碼所渲染的頁面效果，可以看到，已經快達到預期效果了。

微調

不進行調整。

第三次迭代

按鈕的樣式與設計不一致，同時 “我已同意” 文本的也略有出入。因此，需要將這些問題反饋給 ChatGPT。

提問

複選框、我已閱讀並同意、兩個文件鏈接需要在同一行

button的顏色是#55D8E4，長寬和樣式沒有生效，樣式是
...

checkbox 來個圓角的

試一下

下圖展示了 ChatGPT 根據反饋進行修正後的頁面樣式。

微調

注意到按鈕的高度與預期不符，checkbox 也需要改成圓角。

經過簡單的調整，去掉 padding，按鈕高度就一致了。對於圓角 checkbox，ChatGPT 建議我查詢相關資料。通過 Google，我很快找到了相應的解決辦法。下圖展示了調整後的頁面效果，已經和目標設計完全一致了。

第四次迭代

最後，爲了實現 checkbox 被選中時改變樣式並變得可點擊，再次向 ChatGPT 尋求幫助。

提問

如果checkbox被選中，login-btn的顏色需要是#55D8E4，100%。同時這個按鈕可以被點擊，checkbox 默認不選中，不選中之前按鈕是不能點擊的

試一下

左圖展示了選中 checkbox 後的頁面，右邊的圖是 ChatGPT 給的部分代碼，從圖中可以看到，頁面效果和設計完全吻合，而且生成的代碼也寫的十分規範。

總體來說，通過四輪與 ChatGPT 的互動和一次簡單的微調，這個有交互效果登錄頁面就順利完成了。

帖子和評論列表

接下來，來嘗試一個更爲複雜的頁面。頁面設計需求如下：

第一次迭代

提問

關於帖子區域的描述如下（詳細部分省略）：

其中帖子內容區：

標題：
樣式
........

作者頭像圖片、姓名（樣式....）、徽章圖片

帖子正文，樣式
........


日期時間 回覆數
格式：
........
其中，日期時間靠左，回覆數靠右，回覆數格式是 999 回覆這種

關於評論區域的描述如下（詳細部分省略）：

評論區從上到下分別是：

最新評論（評論數）
樣式
........

評論列表每一項由一條細線分隔

每個評論包括：

第一行：評論者頭像、姓名和徽章，樣式和帖子的作者、姓名和徽章一致
...

評論列表區域和評論輸入框之間也有16rpx間隔

評論輸入框可以輸入多行評論，當評論多於一行時，評論輸入框會自動增高
評論輸入框裏的placeholder是：我也來說~
輸入框背景顏色是：#EEEDF1
評論輸入框高度80rpx，需要吸底顯示

通過這個例子你可以看出，寫提示詞其實就是詳細地描述你想要的頁面效果。

我並不熟悉前端開發，所以我像聊天那樣說出需求，像是 “評論列表中的每一項都被一條細線隔開”，“評論輸入框能夠支持輸入多行評論，當評論超過一行時，輸入框會自動增高” 這些。這裏並不需要使用專業的前端詞彙。

ChatGPT 的回答：

如你所見，需求越詳細，ChatGPT 的答案就更具體，現在，來看看帖子內容區域的代碼。‍

雖然我的需求描述很口語化，但生成的代碼仍然非常規範。下面是部分 wxml 代碼：

<view class="post-section">
    <view class="post-title">帖子標題</view>
    <view class="post-info">
        <image class="post-author-avatar" src="path/to/avatar/image" />
        <text class="post-author-name">作者名字</text>
        <image class="post-author-badge" src="path/to/badge/image" />
    </view>
    <view class="post-content">帖子正文</view>
    <view class="post-meta">
        <text class="post-date">日期時間</text>
        <text class="post-reply-count">999回覆</text>
    </view>
</view>

這是部分 wxss 代碼：

.post-section {
    background-color: #FFFFFF;
    padding: 16px;
}

.post-title {
    width: 343px;
    height: 62px;
    color: #1A1A1A;
    font-family: PingFang SC;
    font-size: 18px;
    font-weight: 600;
    line-height: 62px;
    margin-bottom: 10px;
}

.post-info {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

生成的頁面結構真的很清晰，其中 post-section、post-title、post-meta 這些命名都很標準。

試一下

將 ChatGPT 的答案複製到微信開發者工具，整個頁面就呈現出來了，非常好，結構也整整齊齊的。

微調

不進行調整。

第二次迭代

填充一下數據吧。

提問

幫我把mock數據也提供一下

ChatGPT 的回答：

試一下

頁面的樣子如下圖所示：

微調

微調階段，替換了 mock 數據中的用戶頭像地址和徽章圖標地址，僅此而已。頁面看起來已經相當不錯了，對吧？到目前爲止，除了用戶頭像和徽章圖標的地址，沒有寫一行代碼，只是和 ChatGPT 進行了兩次簡單交互：一次是聊天式的語氣描述了頁面佈局，另一次則是填充好模擬數據。顯然這種開發模式的效率非常高。

第三次至五次迭代‍

再進行一些細節的調整：頭像和徽章大小、內容間的間距、評論輸入框的樣式等等。這些調整需要和 ChatGPT 進行幾次溝通，都是小改動，就合併在一起展示了。‍‍‍‍‍

提問

我們來調一些細節：

標題如果一行顯示不下，就分多行顯示

所有頭像的樣式都是：
width: 22px
height: 22px
border-radius: 12px

輸入框裏的文字沒有居中

...(省略其他prompt)

試一下

調整完成後的頁面如下：

微調‍‍

在這個過程中，手動解決了頁面元素對齊的一些小問題。

第六次迭代

這樣，頁面的樣子基本完成了。但需求裏還有個子評論功能。繼續和 ChatGPT 聊。

提問

 可以有評論的評論。評論的評論顯示在被評論的評論下面，頁面上只顯示第一條，樣式和單挑評論一致，只是整體上相對於被評論的評論有個縮進，給我生成mock數據，並排版。

你可以看到，描述子評論時，我的描述相當隨意，甚至出現了錯別字，其中，我對於子評論的描述是 “評論的評論”，“單條” 寫成了 “單挑”，而 “整體上相對於評論的評論有個縮進” 看起也不是那麼好懂。但 ChatGPT 還是理解了我的意思。它的回覆是 ：

試一下

來看看效果：

子評論功能一下就完成了。

微調

剛纔的 prompt 中忘了提到 "所有回覆" 這行文字，在微調階段加上。

第七次迭代

作爲工程師，我們知道代碼複用的重要性，希望評論功能在其他頁面也能方便的使用。

提問

評論列表區和評論輸入區兩部分我希望在其他頁面複用，應該怎麼做？

ChatGPT 的回覆如下：

試一下

它建議我們創建一個評論組件，改完後，帖子頁面的評論部分就變成這樣的組件引用。‍

  <comment-section comments="{{comments}}"></comment-section>

微調

微調‍‍‍‍‍

不需要改動。

這個複雜的頁面搞定了。代碼基本上都由 ChatGPT 生成，僅做了三次微調而已。後面我們發現了可以複用的邏輯，直接把評論部分變成了一個組件。這不僅讓代碼更清晰，未來開發也快。

總結

從上面兩個示例可以看出，僅經過幾次迭代兩個模塊就實現了，整體效率非常高，而且代碼質量也不錯。

回顧一下 AIDD 的開發流程：首先描述好需求向 ChatGPT 提問，接着驗證運行效果，如有必要再進行調整。通過多輪迭代，ChatGPT 就能完成大部分代碼工作。

你可能擔心給 ChatGPT 提供那種充滿專業詞彙或者字斟句酌的提示詞會很難。但從前文示例看，直白的描述就行了。ChatGPT 可以準確捕捉你的意圖，並生成清晰、易讀的代碼。

除了以上內容，我還想和你分享一些沒有在文章裏提及，但很有用的使用技巧：

1. 1. 提供給 ChatGPT 需求和規範，它就能生成服務端的表結構和 API 接口；
2. 2. 根據服務端 API 接口文檔，ChatGPT 直接爲你編寫小程序的 TypeScript 代碼。

   ‍

3. 希望這些對你也有幫助。

4. 展望

展望未來，隨着多模態技術的進步，或許我們只需提交需求和設計，AI 就能爲我們編寫整個項目的代碼，而無需工程師再繁瑣地一一構思具體的 prompt，正如我們在 ChatGPT 發佈會上所見的那樣。

注：本文提到的 ChatGPT 是 4.0 版本。 

歡迎關注我的公衆號 “謝龍的研發筆記”，原創技術文章第一時間推送。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/VkiIRVuyjA_9_aTnvIuX3g