AI开发实战:1、手摸手教你一行代码不写,全程AI写个小程序——前端布局

经常用 AI 搓前端页面的朋友，一定对那抹“深邃蓝”和“基佬紫”不陌生。

只要你不给 Prompt 设限，AI 仿佛全员深爱“赛博朋克渐变风”。第一眼惊艳，看多了想吐——满屏都是溢出来的“AI 味儿”。更别提当你让它写第二个页面时，那代码逻辑就像是换了个祖宗，风格南辕北辙。

那么，如何打破这种“开盲盒”式的开发体验？如何让 AI 像正经大厂程序员一样，守规矩、懂审美、还出活？

今天我带你玩点不一样的：从 0 到 1 演示如何通过“反向思维”，让 AI 乖乖吐出一整套风格统一、逻辑闭环的代码。

那么，如何操作才能摆脱这种千篇一律的色彩风格呢？当然是有办法的，听我慢慢娓娓道来……

有很多朋友想要从零开发某个应用，但是总是会发现：要么无从下手，要么好不容易写好了一个页面，然而让 AI 去写另外的一个页面时，发现和之前的页面风格完全不同！那么，到底有没有办法让 AI “懂得代码规范” 写出一样风格的代码呢？

今天，我就从 0 到 1 一步一步讲解如何让 AI 帮你写出一套完整的项目代码。

放弃传统思想，现在借助 AI 开发应用，思路得发生转变

以前，我们如果想要从 0 开发一个 APP，我们大致会经历过如下阶段：

1. 产品同学构思业务逻辑并画好产品原型图
2. 产品同学召集UI、前端、后端一起开会讲明需求
3. UI 同学对照原型图设计出 UI
4. 前端同学根据 UI 去设计前端页面
5. 后端同学结合原型图、UI图设计数据库、后端架构、制定 API 接口
6. 前后端同学进行接口联调
7. 测试同学进行前后端产品成果测试
8. 产品同学验收

然而，当我们借助 AI 来开发应用时，我们的开发流程就会有所转变，以下是我的开发流程：

1. 构想清楚这个产品的功能、定位客户人群、交互方式并写好功能文档
2. 让 AI 帮我确定清楚适合的色彩风格并直接写好前端代码并写好 mock 数据
3. 自己根据页面和 mock 数据去调试功能
4. 功能调试没问题之后，让 AI 根据 mock 数据写出后端所需要的 API 接口文档
5. 让 AI 根据接口文档去创建数据库建表语句（自己略微调整）
6. 让 AI 根据接口文档去写接口
7. 将前端的 mock 数据换成真实的 API 接口，自己测试功能
8. 有问题的地方直接截图给到 AI 让 AI 帮忙解决，直到没有问题即可

你会发现操作流程上也没有少几个步骤，但是当你仔细一琢磨之后，你会发现：

1. 以前至少需要产品、UI、前端、后端、测试等岗位的同学相互合作才能做的事情，现在只需要一个人就能干完
2. 如果你想一个人干整套项目，最好的方式是先从页面开始，再反向去写接口可以事半功倍

展示效果

说再多，都没有直接展示成果来得干脆，下面是我最近用 AI 写的一个微信小程序，前端代码 100% 用 AI 写的，后端接口 80% 用的 AI

现在我已将代码都开源了，感兴趣的朋友可以去观摩观摩，也请帮忙点个 Star 支持一下，谢谢！ 小程序端： https://github.com/pudongping/momento-miniapp API 接口： https://github.com/pudongping/momento-api

罗列需求

首先，我们不要着急写代码，先把自己想要实现的功能罗列清楚，我自己写了一个 markdown 直接发给了 AI

下面是我写的内容：

## 1、首页看板最顶部可下拉切换账本功能点：1、温馨背景墙：背景区域，支持上传自定义图片（如夫妻合照、全家福）。交互逻辑说明：默认： 温馨插画。自定义： 点击可从相册上传。---在背景图顶部显示顶部背景区域，展示倒计时信息。纪念日提醒：距离结婚纪念日、生日等重要纪念日还有多少天的倒计时提醒（每一条纪念日上下滚动提醒）显眼提醒：如果用户在设置中勾选了“首页显示”，系统自动计算并筛选出距离今天最近的一个节日，在背景图中央显眼位置显示：“距离 [事件名] 还有 [X] 天”。2、预算红绿灯：在背景图下方展示本月预算进度条。（基于家庭总支出的视觉化预警。）在“我的”设置页面中会设置每个月的总预算（比如10000元）。首页展示一个进度条，绿色代表安全，黄色代表预警，红色代表超支。绿色状态： 支出 < 50%预算。黄色状态： 支出 >= 50% 且 < 80%。红色状态： 支出 >= 80%（甚至爆表）。进度条文案： 显示“本月剩余可用：¥XXXX”。预算红绿灯不要做成生硬的交通灯，可以做成一个“呼吸感”的渐变光圈或者半透明的水位线，这样视觉上会更灵动。3、当前月份的总支出、总收入4、时间轴账单流类似朋友圈的时间轴，按“天”为单位排列。默认只会展示当前一个月的账单，下拉刷新，上拉加载更多历史数据。，像刷朋友圈一样查看过往账单。（这里的数据分页为“游标”分页，需要前端传递已经加载出来的最后一条账单的id给到接口）账单列表：- 日期头： 显示日期 + 当日星期 + 当日总支出（卡片形式）- 每条账单展示：标签、金额（支出红色，收入绿色，支出为- 收入为+）、备注- 支持按天展开/收起查看该天的所有账单- 账单旁边显示删除按钮，点击后弹出二次确认框，确认后删除该条账单- 支持点击账单进入编辑页面，修改该条账单的信息- 每条账单旁边都会显示用户头像和昵称（如果昵称超过4个字符，超过部分则用三个点 ... 代替）- 按“天”的时间轴展示，像朋友圈一样，下拉查看每一笔。下拉加载更多，像刷朋友圈一样查看过往账单。- 搜索功能：支持按标签、备注、金额、类型（支出，收入）、时间区间搜索账单## 记账记账功能：- 智能标签： 预设家庭常用标签（买菜、房贷、孩子、餐饮、交通、其他）不同的标签用不同的颜色区分。系统级标签不可删除、不可修改。列表末尾有“+自定义”，用户也可以自定义标签颜色和名称- 可以选择支出/收入类型（默认为支出）- 备注： 支持输入备注信息（非必填）- 金额： 支持输入金额，支持小数点后两位（必填，单位为元）- 日期： 默认为当天，支持选择以前的日期（通过日历选择）- 保存后，自动返回首页看板，新增的账单会出现在时间轴- 定期/周期账单：对于房贷、车贷、物业费这种固定支出，设置“自动记账”模板，可设置每年（每年哪一天）、每季度（每季度哪一天）、每月（具体哪一天）、每星期（具体星期几）、每天（具体什么时间）自动扣款日。到了指定日期，系统自动生成一笔账单，并备注为“自动记入”。---## 3、我的- 用户通过微信小程序授权登录。接口通过雪花算法生成分布式ID作为用户的唯一性标识 UID- 登录成功之后，接口会返回默认昵称和头像，用户可以在个人中心修改昵称和头像1、个人信息修改（昵称、头像）2、显示 uid（雪花算法得到的分布式ID）、uid 旁边有个“复制”点击“复制”之后可以复制 uid 到剪切板3、预算设置设置“红绿灯”的总金额。 输入每月家庭预算总限额，单位：元。4、节日设置设置首页倒计时的数据源头。- 添加节日名称、日期。比如结婚纪念日、生日、春节等（可设置多个）- 每一个节日都可以设置是否在首页显示，默认为显示- 每一个节日都可以进行编辑、删除5、账本管理当用户登录成功之后，需要添加账本（可以自定义账本名称），账本添加成功之后，可以在账本中邀请其他用户，输入对方 UID，发送邀请。邀请请求发出之后，在该账本中可以看到被邀请人的头像、昵称，状态为“等待加入”被邀请人打开小程序并登录之后，可以在“我的”-“账单管理”位置看到一条提示消息：“邀请人昵称”于年月日时分秒邀请您加入“账本名称”共同管理账单。消息旁边有“同意”、“拒绝”两个按钮当被邀请人点击了“同意”按钮之后，则加入了该账本。账本管理中就会显示出邀请人的账本名称、加入成员数量、创建时间（年月日时分秒）、此时被邀请人在该账本中的状态为“已加入”、在邀请人那边被邀请人的状态为“已绑定”当被邀请人点击了“拒绝”按钮之后，则不加入该账本，在邀请人侧则显示“被拒绝”状态。在同一个账本中，每个用户记录的账单都是可见的。可以对账本设置“默认”标签，这样在首页、添加账单时，则添加到默认标签的账本中，当然，如果用户存在于多个账本中，则可以在首页、添加账单时对账本进行切换。自己创建的账本和自己加入别人创建的账本是有颜色区分的，优先展示自己创建的账本，如果自己没有创建账本，再优先展示加入的账本被邀请人可以退出加入的账本，邀请人不能退出自己创建的账本，只能删除账本。（删除效果是滑动删除）「退出」、「删除」都会有二次确认。

当然了，这也是最费时间的步骤，但是是必不可少的步骤。

定调

你会发现上面的小程序样式、色彩都是有自己的风格的，那么到底是怎么做到的呢？

很简单！在写这个项目之前，我直接让他固定好了全局样式

色系：