前言
之前做了一个最基本的转盘微信小程序，并且把使用 Trae 开发的过程记录了下来，后来上线的时候也记录了踩过的坑。有兴趣的话可以去G号中搜索这两篇文章。
当时小程序只有转盘页和编辑页，功能比较单一，每次都需要用户输入全部数据，不支持切换多个问题。所以，这次准备增加一个问题列表页，可以选择预置的问题和答案，还能编辑、修改和保存。
生成UI设计
首先，准备生成 UI 设计的提示词，保存到文件 Tempalet_UI_design_Prompt.md 中：
#角色
你是一位资深设计和资深前端开发工程师
#设计风格
可爱有趣地极简主义美学与功能的完美平衡；
清新柔和的渐变配色与品牌色系浑然一体；
恰到好处的留白设计；
轻盈通透的沉浸式体验；
信息层级通过微妙的阴影过渡与模块化卡片布局清晰呈现；
用户视线能自然聚焦核心功能；
精心打磨的圆角；
细腻的微交互；
舒适的视觉比例；
强调色：按APP类型选择；
#技术规格
1、单个页面尺寸为 375x812PX，带有描边，模拟手机边框
2、图标：引用在线矢量图标库内的图标（任何图标都不要带有背景色块、底板、外框）
3、图片：使用开源图片网站链接的形式引入
4、音效：使用开源图片免费无版权音效网站链接的形式引入。
4、样式必须引入 tailwindcss CDN 来完成
5、不要显示状态栏以及时间、信号等信息
6、不要显示非移动端元素，如滚动条
7、所有文字只可以使用黑色或白色
#任务
在现有转盘首页和设置页基础上，为了帮助用户快速生成问题和答案，增加问题列表页。问题列表页显示预置的问题，点击可展开答案。用户从首页进入模板页，用户选择某项后返回所选项并更新转盘问题和答案。 预置问题和答案有6套。注意设计一个选中某个问题的效果，每次只能选中一个。另外还要设置一个就玩这个按钮和编辑按钮。
模拟产品经理输出详细功能设计、信息架构设计，结合｛设计风格｝和｛技术规格｝输出一套UI设计方案生成一个.html文件，放入问题列表页。
然后，在 Trae 中指示 DeepSeek-V3-0324 根据提示词文件生成 Html UI并保存在指定的目录 ：
在浏览器中打开生成的 Html，得到如下页面，点击选择某一个问题还能展开或收起答案：
在聊天窗大概交互了有三四次，最终得到上图的 Html 的页面。从生成总结中可以看到，基本按照设计风格和技术规格生成了问题列表页，并生成了6组预制问题和答案：
然后根据另一篇 Trae CN + Figma MCP 文章所述，使用 html.to.design 将 Html 导入 Figma，并获得 Figma URL。其实这次的页面比较简单，也没有图片，这一步可能不是必须的，因为也不费事，就一起列给 Augment了，限定多了倒不怕，就怕限制不足瞎生成。
生成小程序代码
这次，我选择使用 Augment 来生成新页面。Augment 是一个 AI 开发插件，它可以在 VS Code 中使用。同样也可以在类 VS Code 的 Cursor 和 Trae 中使用。Augment 号称专为处理复杂项目结构和超大规模代码库设计，通过深度理解 API 和编码模式，提供精准的代码建议。其上下文处理能力高达 20 万 tokens，远超同类工具，可应对跨文件依赖和复杂架构任务。注册后可以有14天的免费试用期。最近 Augment 比较出圈，所以有必要利用免费期试用一下。
Cursor 安装
你只需要在 Cursor Extension 的插件市场中搜索 Augment 即可安装。
安装完成后，右键选择 Augment
选择 Move To -> Secondary Side Bar
然后你就可以同时使用 Cursor 和 Augment 了。
你也可以同时将 Cline 和 Roo Code 一起添加进来。这样可以在需要的时候使用一些免费大模型，节省开销。
Trae 安装
Trae 的 Extension Store 找不到 Augment。 不过没关系，根据官司网也可以到 Visual Studio 的插件市场进行下载。
首先打开 Augment 的插件下载页面
marketplace.visualstudio.com/items?itemN…
得到插件的关键信息 itemName 和 version 后，根据 Trae 官网提供的方法，替换下面 URL 中的 itemName.fieldA、itemName.fieldB 以及 version：
marketplace.visualstudio.com/_apis/publi…
augment.vscode-augment 0.424.0
替换完成后，你将会得到一个实际的下载 URL，下载 visx 插件安装即可：
marketplace.visualstudio.com/_apis/publi…
在 Trae 中插件只能放到移动到 Panel，这一点使用起来不如 Cursor 方便
Augment 生成开发提示词
UI 完成之后，我进行了一项新尝试，就是把开发的基本要求列出来，让AI代替我生成具体的开发提示词：
#角色
你是一位资深提示词专家，擅长根据用户需求生成符合要求的提示词。你需要根据用户需求生成符合要求的提示词。
#开发规范
1、组件化开发
2、响应式布局
3、尽量减少耦合
4、根据屏幕大小自适应控件大小
#FigmaUI设计
https://www.figma.com/design/Ogj00nFEzeULy3ggd77ce3/Untitled?node-id=1-3&t=huzRXT7hs5KAeBtK-4
#任务
生成提示词保存到docs/more_question_dev_promot.md文件中，提示词用于满足以下要求：
1. 根据{FigmaUI设计}链接和{开发规范}实现更多玩法页，在现有转盘首页和设置页基础上，为了帮助用户快速生成问题和答案，增加模板页。模板页列表显示预制的问题，点击可选中并展开答案。 每次只能选中一个问题和一个答案。
2. 更多玩法页显示的问题答案列表保存为问题答案模板本地数据，小程序启动时自动加载。模板预制数据由template_1.html读出来生成默认数据。
3. 更多玩法页编辑按钮跳转到原有的settings设置页，注意原来的设置页的问题和答案是从本地数据中加载转盘当前数据的，所以需要兼容加载和保存需要问题模板项功能。
4. 更多玩法页”就玩这个“按钮跳转到首页，首页根据更多玩法页选中的问题答案项进行修改并保存到本地数据中对应的问题答案模板项。
5. 首页增加更多玩法按钮，点击跳转到更多玩法页。更多玩法页编辑按钮，点击跳转到设置页
6. 设置页保存设置按钮标题改成“就玩这个”，点击跳转到首页并更新首页问题和答案数据。如果是修改当前模板项，则选中的模板项保存到本地数据。
7. 更多玩法页”就玩这个“按钮保存当前选中模板到转盘当前本地数据，交返回首页
将以上提示词交给 Augment 后，可以看到它首先进行了相关文件的读取和分析：
然后根据要求生成了对应的提示词文件 more_question_dev_promot.md
从 Augment 的总结可以看到，它甚至在提示词中进行了 Step-by-step 的实现步骤。生成的内容稍微有点长，就不在这里贴图了，有兴趣的同学可以后台留言索取。
浏览并修正好开发提示词后，就可以让 Augment 进行实际开发了：
将开发提示词交给 Augment 后， 它发现我做了一些修正，并做了总结。接着提示它按要求开发即可。
可以看到，Augment 首先分析了相关的信息：
然后开始创建新的页面：
紧接着，开始创建所需要的 svg 图标。能够生成图标这一点我个人比较喜欢，Augment 创建的图标还挺符合要求的，生成的图标比较符合日常使用的习惯，而且也会考虑一定的审美和配色。
再往后，就是根据开发需要进行原有代码修改，并生成更多的图标，比如按钮图标等。
值得注意的是，在第11步的时候，Augment 自己发现并修改了之前创建的 templates.js 中的错误。这还是挺让人惊叹的。在后面的开发过程中，我可以多次看到 Augment Agent 的这项能力，而且它不光是做代码上的修正，还会对配色大小位置这些进行全面的修正，节省了很多开发人员的微调时间。
Augment 完成后，进行必要的代码审查，检查是否做了要求以外的工作，提示它进行必要的代码结构修正，页面跳转逻辑和UI上的微调，等等等等。
最后结果如下图：
与UI原始设计相比，还原度还是比较高的。
在上图还可以看到，在原来基本的 UI 设计之上，我还同时增加了添加、删除、编辑问题的功能，新增的图标都是用 Augment 生成的。按钮样式和配色也是 Augment 自己生成和决定的。整体上相对之前使用的 Trae 效果要好。
在这次开发的新面页的过程中，我还进行了代码的重构，比如说将转盘提取成组件：
又比如，优化代码数据读取逻辑：启动的时候加载本地存储到内存，运行期间使用全局内存数据提高速度。并且将问题列表数据和转盘数据管理、全局数据读取，本地数据的存取都封装了起来。
在上线前，还封装了支持日志打开关闭以及设置级别的功能。
目前这个版本已经上线，有兴趣的话可以搜索“橙橙小转盘”感受一下 Augment 的开发效果。
这个微信小程序项目非常的小，对号称能处理复杂项目的 Augment 来说可能过于简单了。不过这并不妨碍我们体验它的规划和反思能力。
总的来说，Augment Agent 使用起来还是比较丝滑的。开发人员可以把注意力主要放在全局架构的把控、需求和产品的优化上。
作为一个二十多年始终都在一线的 C/C++ 出身的程序员，还想啰嗦几句：虽然 AI 代码生成代码很快，它也很聪明，但是一定不要放弃代码审查。不管是因为大模型的幻觉也好，还是说你才是代码的最终负责人也好，始终要进行结构设计上的总体把控。
虽然具体的实施可能几乎不用人工修改，但是减少耦合、优化架构、优化存储等等这些工作还是要由你来指出方向，AI 操作你来检查。其实在实际工作中，很多 Bug 提高一个层次来看，在结构上一次性就能全部解决掉。而且话说回来，毕竟只有你最了解你想要的产品和结果是什么样子。
如果完全扔给 AI，不做审查，最后可能只会堆出一个又一个屎山！
以上就是使用 Cursor/Trae + Augment 进行转盘小程序实战开发的过程与思考，希望对你有帮助！
