AI-Driven Development ：尝试一种全新的软件开发模式
The following article is from 谢龙的研发笔记 Author 谢龙
像我一样，许多工程师已经在用 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 的互动和一次简单的微调，这个有交互效果登录页面就顺利完成了。
帖子和评论列表
接下来，来尝试一个更为复杂的页面。页面设计需求如下：
这个页面的内容包括了帖子标题、内容、评论列表和输入框。其中，很多细节需要处理得当。比如：如果帖子标题过长，它会自动换行，页面需要显示帖子和评论的作者是否是认证用户，评论列表可能包含子评论，而评论输入框则固定在页面底部等等。
第一次迭代
提问
为了减少与 ChatGPT “沟通”的次数，我一口气写了一段很长的 prompt，详细描述了页面的样子。看下图，你可以感受下这个 prompt 的细致程度。
整个 prompt 相当长，其中的 CSS 样式直接复制自 Figma。为了便于理解，我提炼了 prompt 的关键信息列在下面。
关于帖子区域的描述如下（详细部分省略）：
其中帖子内容区：
标题：
样式
........
作者头像图片、姓名（样式....）、徽章图片
帖子正文，样式
........
日期时间 回复数
格式：
........
其中，日期时间靠左，回复数靠右，回复数格式是 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. 提供给 ChatGPT 需求和规范，它就能生成服务端的表结构和 API 接口；
2. 根据服务端 API 接口文档，ChatGPT 直接为你编写小程序的 TypeScript 代码。
希望这些对你也有帮助。
4. 展望
展望未来，随着多模态技术的进步，或许我们只需提交需求和设计，AI 就能为我们编写整个项目的代码，而无需工程师再繁琐地一一构思具体的 prompt，正如我们在 ChatGPT 发布会上所见的那样。
注：本文提到的 ChatGPT 是 4.0 版本。
参考阅读：
本文由高可用架构转载。技术原创及架构实践文章，欢迎通过公众号菜单「联系我们」进行投稿