【挑战开发50个AI应用第八期】手势交互展示工具

一分钟速览

前阵子Gemini3的手势交互圣诞树应用爆火，那么我就在想可不可以用这个技术路径去做一些其他更加有意思的事情？本质上这是一个交互类展示的工具，往大了说我们可以用在策展、商铺展示、企业展示中，往小了说也可以用在自己汇报产品、汇报方案中。所以今天我们为你跑通了这个路径，后面有提示词可以直接拿去生成！

功能说明

功能很简单，就是通过手势交互，去做到产品的爆炸展示。但是基于这个可以有更大的想象空间啦，例如可以引入更多手势去拆解产品细节？做屏幕和摄像头场景的要素叠合交互？

开发教程

1.下载安装开发工具

篇幅比较长，附在文末链接了！市面上的vibe-coding都能用

2.建构产品

步骤 1：寻找对应的模型接口

Nano Banana Pro国内可用地址：https://deployai365.com/chat?model=google/gemini-3-pro-image-preview

这个应用的本质是在网页上，根据我的手势来播放一段视频所以前期准备我们就利用AI或者是已有的内容来准备图像

搜索需要的模型按照图中箭头选择对应模型

这次我让AI生成了一个深圳大疆天空之城的建筑轴测图再让他生成一个产品爆炸图利用这两张图我们去AI视频（这里用的是即梦）利用首尾帧生成产品拆解动画

准备好了上述文件，我们去vibe-coding软件内，输入以下提示词生成应用

创建一个webzpp，使用vanilla js,html,css,mediapipe,如果mediapipie来自CDN，要用常规的script方式引入变量。这个网页应用主要功能是通过镜头识别我的手势，将我展示的建筑轴测图爆炸开来，形成建筑讲解的展示内容，握拳是初始状态张开是拆解爆炸的状态。其技术实现原理是我上传一段建筑爆炸图的视频，你用来把它抽成单帧，然后根据我的手势展开的程度，在应用里面显示不同的单帧画面。和我对话始终保持中文，在开始之前追问我更多细节重点： 0.生成中的交互和动画务必要完整 1.使用最好的UI，要符合互联网产品的风格，使用最流畅的交互，保障功能完整 2.如果用到 Tailwind的话使用 v3版本，因为它更稳定且与我们的配置兼容3.开发完成后测试没问题了直接打开给我使用

步骤 2：出现的授权选项全部都选择yes，直到成功

成功之后可以在文档中找到这个【start】文件双击打开网站预览效果根据效果再回去给Claude Code提意见

步骤 3：中间报错复制提交给Claude Code修复即可

过程中一定是会出现很多问题的，都可以通过截图丢给他，让他自行解决。完成之后可以继续修改直到符合要求。

3.部署上线

教程同样在文末链接了，我用的是DeployAI的服务

部署成功之后可以免费在他们的服务器挂两天你的网址就可以分享给别人了

小结

【回顾内容】第8天挑战成功！这个应用开发特别快，不涉及到API调用前后端内容，结合这个视频的逻辑，还可以开发出来很多的玩法，你也快来试试吧！【明日预告】你也可以把你想要构建的应用留言在下面，或许可能成为下一期选题！

挑战的所有工具来自www.deployai365.com完整教程链接：https://yikeimapp.feishu.cn/docx/Sdf6dBGx3o9NeHx0kzJcwy6Fnob