TeaType 奶茶性格占卜机开发记录：一场俏皮的 UniApp 单页奇遇
我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴
最近我突发奇想，想用 UniApp 做一个轻松又俏皮的小工具，叫做「TeaType 奶茶性格占卜机」。这个小应用的核心功能很简单：用户选择奶茶偏好（甜度、温度、加料），我就根据他们的选择生成一段带性格分析和奶茶推荐的图卡。灵感来自朋友圈那些「你是什么味道的奶茶」，但我希望它能更像一个可交互的“占卜机”，并且整体视觉风格偏向可爱、拟物、略带二次元感。
我一边录着屏，一边把这个想法丢给了 CodeBuddy，没想到它二话不说就开工了，而且是那种“我已经知道你想干嘛了”的状态，反应极其迅速。下面就来聊聊这个过程，顺便夸夸 CodeBuddy 编写代码时的细节处理，真的非常值得记录。
项目初始化与设计确认
我告诉 CodeBuddy 这将是一个单页应用，UI 要有粉橘色到奶白色的渐变背景，顶部一个茶杯+爱心的 logo，再配合焦糖棕字体风格的标题，整个页面要有卡片式的步骤选择，最后生成一张结果图卡并支持一键保存。整体风格就是“奶茶店点单 + 命运占卜”的感觉。
CodeBuddy 没有追问我是否准备好了素材、结构、目录，而是直接主动去查看了我的项目结构，然后给出一句非常职业的话：“我看到这是一个基础的 UniApp 项目结构，我们需要完全重构 index.vue。”
静态资源的自动生成
在我还没来得及准备素材时，CodeBuddy 已经自动生成了三个 SVG 文件：
- 背景用的圆点图案
dot-pattern.svg - 茶杯+爱心的 Logo 图
tea-logo.svg - 奶茶图标
bubble-tea.svg与变种pudding-tea.svg
这些图标用来装饰首页和结果图卡，统一使用 SVG 格式，加载快又清晰，关键是还省去了我去找素材的时间。它甚至用心地画出了“奶茶杯壁的边缘光影”，这个细节我在需求里根本没说，但它自己就推断出来了。
页面结构重构：从零搭起
重构从 index.vue 文件开始，CodeBuddy 将整个页面分为几个部分：
- 渐变背景与圆点图案叠加，加入柔和投影模拟玻璃杯质感；
- 顶部区域显示 Logo + 标题，使用焦糖棕色 + 手写字体；
- 中部是交互卡片区域，使用 step 步进方式切换选择甜度、温度和加料；
- 底部点击生成结果，弹出仿菜单风格的图卡浮层。
这几部分之间过渡使用了渐隐、缩放、微旋动效，还有泡泡 SVG 上浮的动效（太可爱了）。我每点击一次选项，页面就流畅切换到下一步，完全没有割裂感。CodeBuddy 写这些动画的时候还特地用了一点 spring 的缓动效果，完全是现代 Web 的手感。
结果页生成 + 图卡保存
当三步选择完成后，CodeBuddy 让我点击“生成结果”。这时屏幕上出现了一张图卡，背景是漂浮的奶茶 emoji，前景是一段性格分析 + 推荐文案，比如：
你像一杯 全糖热波霸，是个热情不设防的社牛，适合一边爆笑一边喝奶茶！
然后我点击“一键保存”，它竟然已经帮我集成好了 html2canvas，并将整个卡片截图生成图片保存到了相册中。这一部分原本我以为要花很多精力调试，但 CodeBuddy 连 npm install 和引入逻辑都替我做好了，还考虑到了可能因中文字体丢失而导致图卡失真的问题，提前建议我使用内嵌字体文件。
中间出现的 Bug 和完美修复
开发过程中唯一一次出问题，是在定义温度选项数组时，CodeBuddy 不小心漏了一个冒号。这个错误导致页面加载失败，它很快发现后尝试了几种方式修复：
- 直接替换整个数组定义；
- 精确修改出错的那一行；
- 读取整段代码重新格式化后写回。
这种处理问题的方式让我印象非常深刻，不是一味瞎猜，而是精准查错、层层推进，最后采用重新写入的方式彻底修复了错误。相比我平时手动找 Bug 真的是高效太多了。
细节打磨与收尾
开发尾声，CodeBuddy 主动提示我是否要引入自定义字体，并预留了字体样式插入的位置；又检查了一遍所有静态资源是否可用；连动效加载时长、用户手指点击延迟等体验细节都考虑在内。
我惊讶的是，它并没有像普通代码生成工具那样只管功能，而是会以一种“设计+前端”合体视角来工作，简直就像一个审美在线、技术全面的前端搭档。
结语：这不是建议，而是主动完成
整个过程我没有写一行逻辑代码，几乎只是表达想法、调整小细节。CodeBuddy 真正让我感受到“AI 工程师”的能力，它不会只是被动地等待命令执行，而是能主动分析项目结构、预判需求、优雅写代码、自动修 Bug、贴心处理动效与视觉，还能兼顾用户体验的方方面面。
如果让我一句话总结 CodeBuddy 的代码风格，那就是：
功能完善、结构清晰、视觉美观、交互流畅，而且 全程自觉主动。
以后我可能会考虑让它帮我做一个全套的主题生成器，或者更多趣味单页工具。TeaType 是个很小的项目，但从这个体验来看，CodeBuddy 足以完成更大的舞台。
如果你也在做有趣的前端项目，不妨试试看让 CodeBuddy 帮你“主动实现”，你会发现自己多了一个不仅懂代码、还懂审美、还能查错修复的“最强搭档”。
