Kiro + Vibe Coding 实战：10分钟速成《戳泡泡解压小游戏》

前端小学堂
0 阅读3分钟

最近 Vibe Coding 这个词很火，主打一个跟着感觉写代码、快速跑起来、不纠结细节。今天我用 AI 编程工具 Kiro 试了一把，从零开始，纯自然语言描述，不到 10 分钟，直接撸出一个可玩的前端小游戏。

全程几乎没手写逻辑，只靠 “说需求”，体验真的很上头。

一、什么是 Vibe Coding

简单理解：

  • 不写详细语法
  • 不查 API 文档
  • 不纠结架构设计
  • 用大白话描述 “我想要什么效果”
  • AI 直接生成可运行代码

主打一个氛围到位、功能先跑起来。

二、我的实战目标

本次选择kiro进行vibe coding.

image.png 这是最爽的环节。我不需要思考怎么写代码，我只需要告诉 Kiro 我的 “感觉”。

用 Kiro 做一个简单又能玩的小游戏，要求：

帮我生成一个完整 UniApp Vue2 小游戏合集项目，包含： 
1. 技术栈：uni-app + vue2 
2. 包含游戏大厅首页，可进入多个小游戏 
3. 第一个游戏：戳泡泡解压，完整可玩（功能： - 屏幕随机生成彩色泡泡 - 点击泡泡戳破，加分，带消失动画 - 60秒倒计时 - 实时分数、本地存储最高分 - 游戏结束弹窗，可重新开始，风格柔和） 
4. 结构模块化，未来可无限添加新游戏 
5. 界面美观、解压、简约 
6. 给我全部项目文件。

image.png

image.png

整体只用了3分钟，我们来看一下效果：

image.png

image.png

image.png

1.微调体验

泡泡再立体一点，带着反光的那种，戳泡泡带着破碎的动画，碎片自由落体消失

image.png 2.视觉优化

碎片没有动画。继续优化。然后泡泡尽量画面居中显示。

test.gif

这次效果比较满意了，体验起来也很解压。

3.打包运行错误修复

微信小程序预览出错了，17:22:56.184 Module Error (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js):

17:22:56.184 (Emitted value instead of an instance of Error) 

17:22:56.184   Errors compiling template:

17:22:56.184   :style 不支持 getBubbleStyle(bubble) 语法

三、最终成品展示

test1.gif

60秒完成戳泡泡还有本地存储最高分，解压又简洁。

四、Vibe Coding 真实体验复盘

这次玩下来，我的感受非常直接：

  1. 效率翻倍以前做个小 Demo，我要去搭结构、查 CSS 动画属性、调试逻辑，至少半小时。这次全程在跟 Kiro 聊天，思维完全沉浸在 “怎么玩才解压”，而不是 “怎么写代码不报错” 。
  2. 零门槛实现创意我不需要是个动画高手也能做出粒子效果、渐变光影。只需要用描述性的语言（比如 “爆炸更夸张”、“圆润质感”），AI 就能帮我落地视觉设计。
  3. 复杂逻辑也能丢给 AI比如泡泡碰撞检测、随机密度算法，我完全没管，Kiro 直接帮我处理好了。我只需要把控整体体验和交互逻辑。
  4. 还是需要一点底子虽然代码是 AI 写的，但在最后调参、修复小 Bug 时，还是需要我能看懂原理。Vibe Coding 不是替代开发者，而是让管理者回归到创意本身。

最后送大家一句话：技术的本质是服务于生活，愿你代码写得爽，生活过得解压。

avatar
文章
阅读
粉丝