经常用 AI 搓前端页面的朋友，一定对那抹“深邃蓝”和“基佬紫”不陌生。
只要你不给 Prompt 设限，AI 仿佛全员深爱“赛博朋克渐变风”。第一眼惊艳，看多了想吐——满屏都是溢出来的“AI 味儿”。更别提当你让它写第二个页面时，那代码逻辑就像是换了个祖宗，风格南辕北辙。
那么，如何打破这种“开盲盒”式的开发体验？如何让 AI 像正经大厂程序员一样，守规矩、懂审美、还出活？
今天我带你玩点不一样的：从 0 到 1 演示如何通过“反向思维”，让 AI 乖乖吐出一整套风格统一、逻辑闭环的代码。
那么，如何操作才能摆脱这种千篇一律的色彩风格呢？当然是有办法的，听我慢慢娓娓道来……
有很多朋友想要从零开发某个应用，但是总是会发现：要么无从下手，要么好不容易写好了一个页面，然而让 AI 去写另外的一个页面时，发现和之前的页面风格完全不同！那么，到底有没有办法让 AI “懂得代码规范” 写出一样风格的代码呢？
今天，我就从 0 到 1 一步一步讲解如何让 AI 帮你写出一套完整的项目代码。
放弃传统思想，现在借助 AI 开发应用，思路得发生转变
以前，我们如果想要从 0 开发一个 APP，我们大致会经历过如下阶段：
- 产品同学构思业务逻辑并画好产品原型图
- 产品同学召集UI、前端、后端一起开会讲明需求
- UI 同学对照原型图设计出 UI
- 前端同学根据 UI 去设计前端页面
- 后端同学结合原型图、UI图设计数据库、后端架构、制定 API 接口
- 前后端同学进行接口联调
- 测试同学进行前后端产品成果测试
- 产品同学验收
然而，当我们借助 AI 来开发应用时，我们的开发流程就会有所转变，以下是我的开发流程：
- 构想清楚这个产品的功能、定位客户人群、交互方式并写好功能文档
- 让 AI 帮我确定清楚适合的色彩风格并直接写好前端代码并写好 mock 数据
- 自己根据页面和 mock 数据去调试功能
- 功能调试没问题之后，让 AI 根据 mock 数据写出后端所需要的 API 接口文档
- 让 AI 根据接口文档去创建数据库建表语句（自己略微调整）
- 让 AI 根据接口文档去写接口
- 将前端的 mock 数据换成真实的 API 接口，自己测试功能
- 有问题的地方直接截图给到 AI 让 AI 帮忙解决，直到没有问题即可
你会发现操作流程上也没有少几个步骤，但是当你仔细一琢磨之后，你会发现：
- 以前至少需要产品、UI、前端、后端、测试等岗位的同学相互合作才能做的事情，现在只需要一个人就能干完
- 如果你想一个人干整套项目，最好的方式是先从页面开始，再反向去写接口可以事半功倍
展示效果
说再多，都没有直接展示成果来得干脆，下面是我最近用 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，发送邀请。
邀请请求发出之后，在该账本中可以看到被邀请人的头像、昵称，状态为“等待加入”
被邀请人打开小程序并登录之后，可以在“我的”-“账单管理”位置看到一条提示消息：“邀请人昵称”于年月日时分秒邀请您加入“账本名称”共同管理账单。
消息旁边有“同意”、“拒绝”两个按钮
当被邀请人点击了“同意”按钮之后，则加入了该账本。账本管理中就会显示出邀请人的账本名称、加入成员数量、创建时间（年月日时分秒）、此时被邀请人在该账本中的状态为“已加入”、在邀请人那边被邀请人的状态为“已绑定”
当被邀请人点击了“拒绝”按钮之后，则不加入该账本，在邀请人侧则显示“被拒绝”状态。
在同一个账本中，每个用户记录的账单都是可见的。
可以对账本设置“默认”标签，这样在首页、添加账单时，则添加到默认标签的账本中，当然，如果用户存在于多个账本中，则可以在首页、添加账单时对账本进行切换。
自己创建的账本和自己加入别人创建的账本是有颜色区分的，优先展示自己创建的账本，如果自己没有创建账本，再优先展示加入的账本
被邀请人可以退出加入的账本，邀请人不能退出自己创建的账本，只能删除账本。（删除效果是滑动删除）「退出」、「删除」都会有二次确认。
当然了，这也是最费时间的步骤，但是是必不可少的步骤。
定调
你会发现上面的小程序样式、色彩都是有自己的风格的，那么到底是怎么做到的呢？
很简单！在写这个项目之前，我直接让他固定好了全局样式
色系：
- 主色：#FF9A5A（暖橘）-> #FFD166（浅金）的渐变
- 辅助色：#F5F5F5（浅灰白）
- 文字色：#333333 (主标题), #666666 (副标题/备注)
风格：模仿苹果 iOS 的 UI （高级感、温馨、圆润、极简）
写提示词
当你将上面的内容都发给 AI 并让 AI 牢牢记住你的要求之后，你就可以直接将下面的提示词发给他，让他帮你写代码了
Subject：微信小程序《时光账记》前端开发任务
Context：我正在开发一款名为《时光账记》的微信小程序，目的是创建账本，然后在账本下可以记账，请帮我完成小程序前端代码。
所有数据请求请使用 Mock 数据模拟，请在项目根目录下创建一个 mock 文件夹，将所有的 API 返回数据写在独立的 JS 文件里，方便我后期替换成真正的 API。
1、接口协议规范：所有 API 请求的返回格式必须严格遵守： {"code": 0, "msg": "提示语", "data": null}
- 当 `code == 0` 时，表示接口请求正常，此时可以从 `data` 中拿到业务数据
- 当 `code != 0` 时，表示接口异常，需要通过 toast 弹出 msg 中的提示内容
- 所有的时间，接口都会返回秒级别的时间戳，前端需要自行进行格式化处理
- 如果用户已经登录，需要将用户登录的 token 数据放入到请求头中到 token 字段中
2、前端所有和接口网络请求有关的方法，都要以 `Api` 为后缀，比如在前端中有一个方法是封装去请求接口获取用户信息时 `getUserInfoApi` 方便我好分辨这个方法是和网络请求有联系的
3、全局样式设置：
色系：
- 主色：#FF9A5A（暖橘）-> #FFD166（浅金）的渐变
- 辅助色：#F5F5F5（浅灰白）
- 文字色：#333333 (主标题), #666666 (副标题/备注)
风格：模仿苹果 iOS 的 UI （高级感、温馨、圆润、极简）
先帮我把项目的目录结构搭好，并写好全局的 API 请求封装（针对 code 判断逻辑）。
先帮我创建 tabbar
- 首页
- 记账（一个大大的加号）
- 我的
慢慢的，你就会发现他写的每一个页面都是一样的风格。剩下的，你就专心跟他对话让 AI 帮你调整细节就好了～
但是，你会发现另外一个问题，当你某天退出了编辑器之后，重新打开项目再让 AI 帮你写代码时，你就会发现他又会随意发挥了。下一篇文章跟大家聊聊如何让 AI 不管何时介入项目，写出的代码都是统一风格的，敬请期待～
