AI‑Driven Development (AIDD) of a WeChat Mini‑Program Frontend

Many engineers, including the author, have begun using ChatGPT as a coding assistant; the author experimented with having ChatGPT generate an entire WeChat mini‑program front‑end for a community app.

The project, called "AI‑Driven Development" (AIDD) or "Prompt‑Driven Development" (PDD), follows a three‑step iterative cycle: describe the desired feature with a prompt, let ChatGPT generate the code, and optionally adjust the code.

In the first concrete example, the author built a login page. The initial prompt asked for a page with a logo, company name, a "WeChat One‑Click Login" button, and a checkbox with agreement links. ChatGPT returned WXML and WXSS code, which the author copied into the WeChat developer tool, producing a functional albeit rough UI.

我需要写一个微信小程序的页面，用来给用户登录。
这个页面的标题是登录。
页面从上到下的内容分别是：
公司logo，图片地址：/images/company_logo.png
公司名称：蜂巢科技
一个按钮，显示：微信一键登录
由复选框和文字组成的内容，文字是：我已阅读并同意《用户协议》、《隐私协议》，《用户协议》和 《隐私协议》分别链接到网络上文件
告诉我应该怎么做，尽量详细些。

After four iterations—refining layout distances, button colors, and checkbox styles—the login page matched the design, with the final code requiring only minor manual tweaks such as removing padding and adding rounded corners to the checkbox.

The second module was a post‑list page with title, content, author avatar, reply count, and a comment input area. Detailed prompts described the layout, and ChatGPT generated both WXML and WXSS snippets, for example:

<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>

.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;
}

Through six iterative rounds—adding mock data, adjusting avatar sizes, handling multiline comments, and creating a reusable comment component—the author achieved a complete, polished page with nested comments and component reuse, all generated primarily by ChatGPT.

The article concludes that AIDD dramatically speeds up development, especially for engineers new to a domain, and anticipates future multimodal AI that could turn high‑level requirements and designs directly into production‑ready code.