打造灵感投掷器：我的「IdeaDice」开发记录

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

起源：我只是想“摇”出点灵感

有时候面对写作或者做产品设计，我会卡在「不知道从哪开始」的状态。于是，我就萌生了一个想法：做个骰子，每面写上不同的关键词，摇一摇，看骰子给我什么启示。

我把这个想法告诉了 CodeBuddy，没想到它立刻接住了灵感，帮我一步步实现了一个名为「IdeaDice」的创意骰子生成器 —— 基于 UniApp 构建、拥有炫酷的工业风界面，还有一个3D旋转的灵感骰子，点击“Roll”按钮就能触发旋转，随机出现三个关键词，还支持 Markdown 导出和生成海报。

而我，只需要看着它写代码，看着它思考如何实现功能，像一个产品经理一样，说出需求就好。

开始构建：从页面结构到风格基调

项目是一个标准的 UniApp 应用，CodeBuddy 首先确认了目录结构，确定这是一套干净的前端项目。然后它马上提出要完全重构首页（pages/index/index.vue），一步步把我设想中的「灵感骰子生成器」拆解为几个部分：

• 深灰色背景（#1e1e1e）打底，营造出冷静而专注的工业风格；
• 中心放置一个立方体骰子，用 CSS 的 transform 和 transition 模拟 3D 旋转；
• 页面顶部放置荧光绿标题：“🎲 IdeaDice · 灵感投掷器”，使用等宽字体，具有科技感；
• 类型选择（写作 / 游戏设计 / 产品创意）以 Tab 风格按钮实现；
• 点击 “Roll” 按钮触发旋转动画，并展示下方的三个结果卡片；
• 每张卡片 hover 后会显示解释视图，如“失忆 = 失去记忆的主角”。

在这里插入图片描述

我几乎不用操心任何布局细节，CodeBuddy 写出了结构清晰、CSS 逻辑明确的布局代码，每一行都在追求视觉秩序感，卡片边框的 glow 效果也恰到好处，既极简又富有未来感。

核心玩法：骰子旋转与随机生成逻辑

接下来是“Roll”按钮的实现，也就是骰子旋转和随机关键词生成的部分。CodeBuddy 在页面脚本中加入了三套关键词数据，分别对应三种创意类型（写作、游戏、产品）。当点击“Roll”时，会触发 rollDice() 方法：

rollDice() {
  // 随机选取关键词逻辑
  const source = this.wordPool[this.activeType];
  this.results = this.shuffleArray(source).slice(0, 3);
  // 控制旋转动画
  this.rotateAngle += 360;
}

它利用了简单但有效的洗牌算法，确保每次都能获得不同的组合，还让骰子每次旋转 360 度递增，给人一种“真的在转”的错觉。这个设计我很喜欢，因为它看起来就像是真的骰子转了一圈然后停下来。

细节优化：交互反馈与微动画增强

我原本没想到会加涟漪特效，但 CodeBuddy 提议“按钮需要有反馈体验”，于是它加上了按钮的点击动画、卡片的 hover 描述切换、还有骰子落地时的轻微震动模拟。

甚至为了增强背景质感，它还加了一条轻微动感的流光动画，让深灰背景不再沉闷，反而有了“电子皮肤”的感觉。

动画都写得很节制，没一处显得浮夸。这种设计品味让我感到惊喜。

在这里插入图片描述

高级功能：Markdown 导出与海报生成

到了导出功能环节，我以为这可能会卡壳。毕竟 UniApp 不能直接引入 DOM 类库，而 html2canvas 又是 Web 环境用的。

结果 CodeBuddy 很理智地避开了兼容性问题，转而使用 uni.canvasToTempFilePath 来实现截图生成海报，并引导我在页面里添加了一个隐藏的 canvas 元素，等用户点击“生成海报”时再绘制内容。

Markdown 的导出就更简单了，它将三个关键词和对应解释拼接成标准的 Markdown 文本，再通过 uni.setClipboardData 实现复制。

这一段功能的代码写得非常模块化，如果我以后要加上“导出 PDF”之类的功能，只需要扩展一下工具函数，不需要动主逻辑。

全面回顾：IdeaDice 完整实现总结

回头看，我只是说了我要做一个“灵感骰子生成器”，但 CodeBuddy 真正做到了以下几点：

• 全流程主动推进，理解需求并规划开发步骤；
• 保持风格统一，UI 极简又有设计感；
• 动画效果克制而细腻，增加用户沉浸感；
• 所有功能都在组件内完成，代码结构清晰，维护性强；
• 考虑跨平台兼容，选择更合适的 UniApp API 方案；
• 所有交互都考虑到用户感受，从点击反馈到结果展示都一气呵成。

尾声：CodeBuddy 真是最懂 UI 的 AI

如果让我一个人实现这个项目，我可能得折腾好几天。而 CodeBuddy 几乎一气呵成完成了全部功能，每次写出的代码都带着一种“经验感” —— 明明只是个演示小工具，但细节却一丝不苟。

无论是 CSS 动画的层次感、卡片 hover 的交互逻辑，还是导出功能对 UniApp 兼容性的考虑，都体现了 CodeBuddy 的高完成度和实用思维。

这个“灵感投掷器”，现在已经成了我头脑风暴的常用工具。而我很确定，这不是我和 CodeBuddy 最后一次合作。

如果你也想做点有趣的小应用，不妨像我一样，把想法交给 CodeBuddy，让它替你敲代码吧。

在这里插入图片描述