打造灵感投掷器：我的「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，让它替你敲代码吧。