「NameCraft · 幻想命名器」开发记：我和 CodeBuddy 的一次奇幻共创之旅

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴

起心动念：我想做一个风格特别的名字生成器

最近脑子里突然冒出个点子：是不是可以整一个风格化很强的名字生成器？那种不仅仅是“小明”“小红”这种普普通通的，而是能生成点带幻想味、武侠感、甚至有点赛博风的名字。如果再配上好看的页面，比如深色夜空的背景、星点飘动、卷轴样式的卡片，就更带感了。

于是我动手找了 CodeBuddy，把这个想法丢给它试试：

想用 UniApp 做一个叫「NameCraft」的名字生成器，用户能选风格、类型，自动生成带有幻想感的人名。UI 偏奇幻风，黑夜系背景。

本来还以为它会让我先做界面设计啥的，结果它直接跳过这一步，开始搭建页面和功能，整个流程比我预想的顺利得多。

从一张白纸，到幻想名字工坊

最开始它先确认了我的项目已经有基本结构，接着直接瞄准 pages/index.vue，表示这个文件需要重做，默认页面根本不符合我们想做的那种幻想气质。

它第一版提交就动手把结构搭了起来：背景是一种从 #1d002a 到 #00142a 的深色渐变，标题用了「NameCraft · 幻想命名器」；底下是设置区，包括类型、语言、性别、数量等；再下方是名字展示区的初步布局。配色控制得挺克制——深紫调带点夜蓝，不会太死沉，还留了个 twinkle 动画的位置，说可以用 canvas 或小图搞定。

在这里插入图片描述

而且它考虑得比我预期的还细，比如按钮做成了暗底+发光边缘样式，点击还有涟漪波纹；按钮本身还自带 pulsate 动画，卡片 hover 的时候会显示解释，点一下还能自动复制。几乎每个元素都有点光效反馈，整体很“带感”。

背景图、卡片、动效：素材部分它也帮着留了口子

下一步是加点素材，主要是星空背景图。CodeBuddy 虽然没法生成图片资源，但它会问我有没有现成的文件，比如 stars.png、按钮用的边缘光图、卡片的边框卷轴图什么的；如果我没有，它还能推荐去哪找，甚至指导怎么自己做。这点真的挺贴心的——不只是“码农 AI”，还挺会考虑流程的。

它在写样式的时候也没乱套一通，而是把 hover 阴影、glowing 描边、按钮动效等都按模块分好，还提前写了 v-for 来处理多个名字卡片的渲染逻辑，后续我扩展功能的时候基本不用再动结构。

不光能跑，还写得挺讲究

一开始我以为它写的代码就是那种“能运行就行”，但实际看下来，比我想象中更优雅。

比如下面这段结构设置代码就挺清爽：

<view class="setting-item">
  <text class="label">类别：</text>
  <segmented-control :values="['游戏', '武侠', '科幻']" v-model="category" />
</view>

逻辑清晰，格式工整，还用上了组件封装，维护起来轻松多了。再看看按钮这块：

<button class="generate-button" @tap="generateNames">生成</button>

样式那边它写了手动的 pulsate 动画和发光阴影，而不是调用一堆 UI 库，非常适合我后续自己微调。

在这里插入图片描述

它写的样式逻辑也不杂乱，像 flex 的排列、margin/padding 的把控都很精准。几乎是写完我就能直接用，根本不需要再二次调结构。

下一步，给名字生成逻辑加点“脑子”

目前的页面该有的都有了，接下去我打算完善一下生成逻辑，比如让不同风格的选择真的返回风格对应的名字，还能加上语言、性别做组合。CodeBuddy 这部分其实已经提前铺好地基了，把状态变量都写好了，绑定也弄好了，基本是拿来就能接功能。

就连复制功能它都提前帮我想到了，只要加个 uni.setClipboardData，点一下名字就能自动复制，UI 和交互体验都考虑到了。

尾声：不只是写代码，更像合伙人一样的存在

整个过程回头看下来，我觉得 CodeBuddy 已经远不只是个自动写代码的助手，更像是“带你干活”的搭子——它能拆解任务、规划结构、处理细节、预留扩展，还知道在什么地方该提醒我去准备资源或考虑逻辑边界。

它写的代码不但能用，而且结构清晰、样式美观，后续维护也友好。像我这样对 UI 有点偏执的前端选手，它交出来的东西让我几乎没有挑刺的余地。

这一次的 NameCraft 项目，对我来说不像以前那样孤零零一个人“做工具”，而像是有了个技术搭档，两个人一边构思一边搭建，过程真的顺手又舒服。

如果你脑子里也有个挺异想天开的点子，不妨试试用 CodeBuddy 帮你实现。不用你自己从头到尾闷头敲代码，它甚至能带点美感地帮你把愿景搭建出来，挺惊喜的。

在这里插入图片描述