经常用 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

![homepage.png](https://developer.qcloudimg.com/http-save/yehe-11152621/5377c48fede57f68393704d7fcea3aed.webp)

![login.png](https://developer.qcloudimg.com/http-save/yehe-11152621/76713db805a250b9a9ecf4e397eff8d2.webp)

![profile.png](https://developer.qcloudimg.com/http-save/yehe-11152621/ea013f9a6f661ea9eb50feed4c6c0a94.webp)

![recurring.png](https://developer.qcloudimg.com/http-save/yehe-11152621/c59449381f8b2d180385303bcb94988c.webp)

![transaction.png](https://developer.qcloudimg.com/http-save/yehe-11152621/702a71e60ee219c54f964fa305092181.webp)

## 罗列需求

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

下面是我写的内容：

```markdown
## 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 牢牢记住你的要求之后，你就可以直接将下面的提示词发给他，让他帮你写代码了

```markdown
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 不管何时介入项目，写出的代码都是统一风格的，敬请期待～


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

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

前端

人工智能

开发工具

学习如何用AI开发统一风格的前端项目！本文分享从0到1的实战经验，教你通过反向思维让AI生成风格一致、逻辑闭环的代码。揭秘如何设定全局样式、编写有效Prompt，并展示开源微信小程序案例，助你摆脱千篇一律的AI设计风格，提升开发效率。

数据分页

数据库

2026采购季 | AI焕新·智启新局

tencentdb-catalog

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

AI开发实战1、手摸手教你一行代码不写，全程AI写个小程序——前端布局-腾讯云开发者社区-腾讯云

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐