当前位置：首页 > news >正文

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

news 来源：原创 2025/7/20 14:06:44

起心动念：我想做一个不一样的名字生成器

最近我有一个脑洞：能不能做一个风格化强烈的名字生成器？不要那种平平无奇的「小明、小红」类型，而是支持「幻想风」「武侠感」「赛博感」的那种，最好还有高颜值的 UI，比如夜空渐变背景、星点动画、浮空卷轴卡片之类。于是我找来了 CodeBuddy，向它提了这样一个需求：

我要用 UniApp 制作一个名为「NameCraft」的名字生成器，支持用户自定义风格和类别，生成拟人化或幻想类名字，页面风格走奇幻美术风 + 深色主题。

我本以为 CodeBuddy 可能要让我先把设计稿画好，但它没有，而是立刻梳理了整个页面结构、UI 特效和功能需求，并主动开始搭建项目结构。

从空页面到奇幻命名器：CodeBuddy 的主动实现过程

起步阶段，CodeBuddy 先确认了我已有一个基本的 UniApp 项目框架，随后迅速规划了开发顺序。它一步步检查 pages 目录，确认已有 index.vue 文件，并指出需要完全重写——因为默认模板和幻想命名器相差太远。

于是，CodeBuddy 第一波提交的改动非常干脆利落：它直接将 index.vue 改造成了具有深色渐变背景（#1d002a → #00142a）、标题区「NameCraft · 幻想命名器」、设置区（类别/语言/性别/数量）和结果展示区的结构雏形。配色方面它精准地控制在「深紫-夜蓝」之间，既不厚重也不暗淡，并预留了星点 twinkle 动画的位置，甚至说明动画可以用 canvas 或小图实现。

在这里插入图片描述

更让我意外的是，它不仅仅是写结构，还把动画和点击特效考虑得很细致——例如生成按钮使用暗色 + 发光边缘设计，点击有 wave 涟漪效果；按钮还自带微光 pulsate 动画；卡片 hover 显示解释，点击自动复制。几乎每个交互都有光效或反馈，奇幻感十足。

图层、卡片与星点背景：素材准备也贴心指引

接下来的步骤是添加星空背景资源。虽然 CodeBuddy 无法自动生成图片资源，但它并没有停下脚步，而是主动询问我是否已有「stars.png」、「按钮发光边缘效果图」、「卷轴卡片边框」等素材，并表示如果没有，它可以提供制作指导或推荐免费素材网站。这一点真的让我非常感动——不仅懂代码，还懂设计流程。

更细致的是，它在样式编写中还主动引入了悬浮阴影、glowing 描边、按钮动画等样式类，甚至使用了 v-for 结构提前处理了生成多个名字的卡片逻辑，为未来功能扩展做好铺垫。

代码不止跑得动，更「写得美」

我本以为它的代码只是「能用」，但认真看下来会发现，CodeBuddy 写的代码其实还挺优雅的。

例如：

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

不但逻辑清晰，还通过封装良好的组件降低了维护成本。再比如按钮的特效：

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

对应样式中用的 pulsate 动画定义和发光阴影也是手写的 CSS，而不是调库乱拼，非常适合我后续继续自定义美化。

在这里插入图片描述

此外，它对 hover 状态、flex 排布、margin/padding 的精度把握也很得当。我几乎没有对它生成的样式进行二次修改，这在以前是从未有过的体验。

下一步计划：让生成逻辑更智能

当前页面的交互已经非常完整，接下来的目标就是完善「名字生成逻辑」，让选择不同类别时返回不同风格的名字，还能切换语言和性别进行组合。CodeBuddy 已经为这些状态管理提前写好了变量和数据绑定，接下来的开发将变得顺畅无比。

它甚至连复制功能都提前帮我考虑好了，只要加上 uni.setClipboardData 就能完成点击复制，UI 和 UX 一起封装好了「入口」。

尾声：这不只是代码生成器，更是全流程共创伙伴

从零到有，从需求到成品，CodeBuddy 的表现让我真切感受到了它不仅是一个「能写代码」的 AI，更是一个「全流程共创的智能开发者」。它会主动拆解任务、生成结构、规划样式、照顾细节，还能在关键节点提醒我准备素材或注意逻辑边界。

它写的代码不仅跑得动，还具有高可读性、扩展性强、美观度高的特点，非常适合中小型项目开发者直接接入。像我这样对设计和前端都有些要求的人，和 CodeBuddy 合作的体验可以说是「全方位舒适」。

如果说以前我做页面是独自敲代码，那这一次的 NameCraft，就是我和 CodeBuddy 携手共建的幻想之地。

如果你也有一个天马行空的想法，强烈推荐你试试和 CodeBuddy 一起完成。它不仅能实现你的需求，还能带给你意想不到的美学体验。

在这里插入图片描述

起心动念：我想做一个不一样的名字生成器

从空页面到奇幻命名器：CodeBuddy 的主动实现过程

图层、卡片与星点背景：素材准备也贴心指引

代码不止跑得动，更「写得美」

下一步计划：让生成逻辑更智能

尾声：这不只是代码生成器，更是全流程共创伙伴

相关文章：