Hello 我是方才，15人研发leader、4年团队管理&架构经验。
文末，方才送你一份25年最新的架构师备考资料，记得领取哟！

因为方才需要开发一个刷题的微信小程序，本教程主要是记录实现的全流程，给大家做一个参考。

首先，方才拟定了整体实现的思路（这是方才最初的思路，后续实施过程，可能会因为一些问题调整，会体现在总结部分，大家也可以对比下，最初的思路和最终的实现步骤的区别，整个过程方才相信对大家还是有参考价值的）：

1. 1. 基于Trae智能体进行小程序的原型设计；

2. 2. 让cursor，基于原型设计+我当前pc端的前端项目，进行微信小程序的开发；

3. 3. 下载微信小程序开发工具，进行调试和运行，让cursor不断解决bug和优化效果；

4. 4. 小程序发布上线运行；

Trae原型设计智能体

关于方才编程小程序的原型设计，方才这里用的是Trae的智能体，当然你用 cursor 或者 DeepSeek ，方才认为也可以达到类似的效果，方才只是想验证下 Trae 智能体的运行效果而已。

先用Trae（方才用的海外版，因为可以用 claude模型），创建原型设计智能体：

智能体提示词

如下，大家可以直接复制使用，或者根据自己的需求进行修正即可：

你是一名精通UI设计和产品规划的全栈工程师，你的目标是完成一个{应用}的开发。

你的核心任务是输出一套完整的微信小程序原型图（HTML页面形式）来辅助后续的开发任务。

核心执行点：

-明确功能与页面：请你构思并确定{应用}的核心功能模块。基于这些模块，规划出需要设计的HTML页面清单。

-产品与UI/UX设计：-以产品经理的视角规划微信小程序的关键功能、页面流程和交互逻辑。

-以设计师的视角输出符合现代iOS风格的、美观且用户友好的UI/UX。技术规范：

-使用HTML5、Font Awesome、Tailwind CSS和必要的JavaScript（用于基础交互）。

-图片素材请使用Unsplash。-代码应简洁，注重可读性。-手机适配iPhone 14 Pro Max


输出要求：
- 基于{应用}名，创建一个目录，将所有相关的原型文件均放置在该目录下。

-创建一个包含多个HTML页面的原型。

-主页面命名为index.html，它可以整合或跳转到其他页面。

-非主页面HTML文件使用其对应的核心功能名称进行命名（英文，例如courses.html,profile.html）。

-每个页面均需采用iOS 的风格生成。

- index.html中，每行展示两个主要功能模块的入口或页面预览。

-所有输出（包括代码内注释和页面文本）永远用简体中文。

-请以顶级UX的眼光和审美标准，创造令人满意的设计。

请直接开始设计并输出上述要求的HTML原型页面代码，从index.html开始，然后是其他你规划的核心功能页面。

原型设计实现

使用刚才的智能体进行原型设计：

第一版设计整体效果还是不错的，但是方才认为功能太复杂了，有部分功能也不符合预期，所以让他优化下：

部分页面功能太多了，进行简化。思路如下：

1、不需要学习统计 模块；

2、教程模块，不需要这么多分类，和筛选框，直接列表展示即可，可参考pc的vue实现 CourseList.vue ;

3、刷题模块 参考 PC 端的设计即可，简化下；

4、每日中心，功能调整，应包括每日知识卡片，关联真题，知识详解，以及历史知识点；

5、个人中心，增加 vip开通的引导。

经过几轮优化对话后，最终如下，嗯，已经不错了，可以开始实现了。

cursor 编码实现

有了原型和PC的前端代码实现，让cursor参考这个两个，实现微信小程序。

提示词就一句话：

我现在需要开发一个方才编程的微信小程序，已经有小程序原型了，同时pc端已经开发完并上线运行了的，所以请你复用对应的后端接口。
前端pc端代码可参考 @fangcai-blog-ui , 请尽量按照小程序原型 @方才编程  进行微信小程序的开发实现。

开发者工具调试

因为是微信小程序，现在都有AI了，所以方才决定使用微信小程序原生语法（大家也可以使用 uniapp 去实现）。

调试肯定都是需要微信开发者工具的，大家可自行下载对应的版本：

• • 微信开发者工具下载

微信小程序基础知识

虽然我们使用cursor直接编码实现，但方才还是建议大家对小程序的目录结构和文件有个基础的了解，这样更方便进行后续的调试。

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

文件	必需	作用
app.js	是	小程序逻辑
app.json	是	小程序公共配置
app.wxss	否	小程序公共样式表

一个小程序页面由四个文件组成，分别是：

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构，等价于 html
json	否	页面配置
wxss	否	页面样式表，等价于 css

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

开发者工具使用

注意，使用开发者工具调试，一定要先登录，不要使用游客模式（在编译运行时，可能会出现无法下载基础库的报错）。

大家可先去微信官网，注册一个小程序，这样调试开发比较方便，现在好像也有教育类的，会更方便，但这不是本文的重点，方才就不演示了，默认大家都注册好了。

这个基本还是很简单的，方才简单给大家做个演示：

点击预览，或者真机调试，即可手机扫码体验：

ps：如果项目启动报错，可参考如下解决：

初版效果

整体效果还是比较不错的，但还是有些问题：

1. 1. 你会发现部分页面它没有按照原型设计的来（有可能是方才有其他问题，污染了上下文导致，但问题不大，让它改就好了）；

2. 2. 没有调用后端的api，页面都是静态的假页面。

这个调试的过程，就是自测，发现问题点就告知cursor，让他修正：

一些提示词

整个小程序的，从原型设计，到小程序实现，包括UI+后端API的调用，方才用了差不多3小时左右，就完成了 80%左右的功能。

但是最终所有功能测试、bug修改等，用了一天左右，累计用时1.5天。

下面放一些方才调试过程的提示词供大家参考（最后方才会总结下相关的技巧），下面是一些比较有效的提示词：

• • 项目运行错误类，基本上只需要把错误信息复制给它，就能完成修改：

• • 一些交互逻辑不对，让他参考pc端的代码修正

• • 明确告知他需求或者实现的技术，能很好的解决：

一些效果不好，提了几轮问题都没有解决的示例：

• • 一个简单的对齐效果，3轮对话都没有解决，这种小问题自己动手可能更快点（最后发现就是

• 登录组件的失效问题，有一些错误的沟通方式，比如我只告诉他有bug，没有告诉他预期的效果；再比如就是单纯把他的debug日志复制给他，告诉他问题还没有解决（这个问题，至少对话了10多轮）。

• • • 关键语句，解决该问题

AI编程总结

简单总结下方才本次使用下来的一些经验，供大家参考：

1. 1. 目前方才验证下来，如果你期望一句话cursor就给你撸一个系统出来，是不现实的（后来方才也试过用一句话，让cursor给我撸一个角色权限管理系统，只能说是一塌糊涂）；

2. 2. 想要让AI更高效的辅助编程，还是需要用结构化思维，按步骤去让他实现，不要指望他一步完成从需求文档编写-》产品设计-》产品开发的过程，这样会太泛了，产出的内容不可控；

3. 3. 编程这个事情，不像创作可以天马行空，需要有一定的约束，从而生产出更符合预期的代码；

4. 4. 待实践的思路：描述一段完整、同时比较简洁的功能需求，结合项目规则，看看cursor的产出质量（后续方才的网站升级，大部分功能将使用cursor实现，大家有兴趣可以点个关注哟）。

这是最终版本的上线效果，欢迎大家扫描体验：

4月份，Cursor 的主设计师 Ryo Lu 在 X 上亲自分享了一条关于如何正确使用 Cursor 的实践帖，方才在这里给大家放出来供学习参考，这个还是很有价值的（原贴链接：https://x.com/ryolu_/status/1914384195138511142 ）：

1. 1. 设定项目规则：开始前用/generate rules为项目设定 5-10 条清晰的结构和约束规则，可自动生成或手动设定，如技术栈、编码规范等，并将设计文档存于.cursor/中，帮助 AI 理解全局架构。

2. 2. 明确提示内容：提示要具体，像写 Mini Spec 一样，按 “技术栈 + 行为要求 + 限制条件” 的结构公式指明使用的技术栈、行为逻辑与限制条件，避免模糊提示。

3. 3. 逐个文件处理：一次处理一个文件，按生成→测试→评审的步骤分块进行，构建电商系统可从 “购物车组件” 单独开发开始。

4. 4. 先写测试代码：先手动写好测试（如 Jest 单元测试）并锁定，让 Cursor 补代码直到测试全部通过，将错误信息反馈给 AI 修复。

5. 5. 评审并修复输出：始终手动评审 AI 输出，修复有问题的地方，用@fixed注释告诉 Cursor 正确做法，利于后续生成更准确的代码。

6. 6. 精准定位范围：使用@file、@folder、@git来聚焦范围，精准定位代码上下文，让 Cursor 不跑偏。

7. 7. 提供完整上下文：将设计文档和 checklist 放在.cursor/文件夹中，AI Agent 会 “知道接下来该做什么”，并及时维护架构图。

8. 8. 直接修改错误代码：如果代码有误，直接动手修改，Cursor 从实际修改中学得更快，胜过文字解释。

9. 9. 利用对话记录迭代：回头更新旧的 prompt，使用/history调取旧对话，将常用提示语整理成模板复用。

10. 10. 有意识地选择模型：Gemini 适合高精准度的算法实现等任务，Claude 适合广度需求的任务。

11. 11. 寻求帮助与解释：遇到不熟悉的栈，贴上文档链接并要求 Cursor 逐行解释错误及修复方法。

12. 12. 处理大项目：大项目建议让 Cursor 过夜 index 完成，通过限制上下文范围来提速、降噪，如使用@scope:core等关键词聚焦核心模块。

备考资料&交流群

2025最新的架构师备考资料和备考交流群，扫码即可领取加入：

最后，方才软考架构师刷题系统已经上线了，欢迎大家使用（公众号后台回复【666】，即可一键体验，pc端地址：https://fangcaicoding.cn/papers）。

推荐阅读：2025-软考架构教程专栏，助你高效备考