Vibe Coding实战项目：用Qwen3-Coder做了个AI跳舞视频生成器
大家好，这里是K姐。
一个 Vibe Coding 的探索者。
前段时间发现通义发起了一个Qwen3-Coder挑战赛，最高奖金有10000元，研究了一下，我发现这个赛道太宽了，不限项目，用 AI Coding 做数据分析、个人Blog、抓取信息等等都ok。
小白也能参加，因为这场挑战赛很看重项目创意。
官方还专门设置了“整活奖”，这不正是我擅长的吗？
于是我小小的发挥了一下，做了一个有意思的小网站，在网站内上传一张个人照片，点击立即生成，就可以得到人物跳舞的视频。
demo
体验地址：https://kseek.ai/
整个开发过程可以分为3步：
构思设计，先想清楚要做一个什么项目，用什么模型
生成调试，把需求交给Qwen3-Coder，生成前后端，再跑通流程
优化页面布局，让网站看起来更完整
这篇教程详细记录了这个网站开发的全过程和要点，全程不需要自己写代码，即使是完全看不懂代码的小白，跟着操作，也能搞定全栈开发。
如果你也想在自己的项目中接入AI大模型的各项能力，但又不知道从哪一步开始，这篇内容也许就能帮到你~
项目构思
我们需要先明确需求，比如我最初的思路是通过接入大模型的API做一个图生视频的网站。
我们打开阿里云百炼的模型广场，筛选视频生成模型，点击查看详情，了解一下这些模型的应用案例。
比如图生视频，就分为首帧图片加输入提示词生成，和首帧图片使用视频特效生成（无需提示词），还有基于首尾帧的视频效果。
我想做的AI跳舞视频生成工具，通过图生视频特效生成是更方便，也是效果更稳定的方案~
于是我们的开发方向就变得具体且清晰了：使用 wanx2.1-i2v-plus 模型的图生视频特效功能，生成跳舞视频。
网站开发
我们可以看看阿里云百炼平台给出的API参考，了解模型 API 调用的一些条件和使用逻辑。
还有具体使用什么模型的效果，比如我要用生成跳舞特效的视频，在阿里云给出的示例表格里 template 参数值是 dance2。
当然，我们看不懂也没关系，直接把这些内容打包发给 Qwen3-Coder，让它现学现用。通过平台的这些信息帮我们完成开发。
我们下载VS Code，安装通义灵码插件，关于通义灵码的使用可以看这篇教程AI零成本搭建个人网站，小白3步搞定！
点击左上角的文件，打开一个空白的文件夹，后续的项目文件都会存储在这里~
在通义灵码中选择 Qwen3-Coder 模型，智能体模式。在这个模式下，我们只需要说需求，Qwen3-Coder 就可以调用合适的工具帮我们完成开发项目。
我们先输入开发需求和阿里云百炼官方给出的一些要求和示例代码，让 Qwen3-coder 先做一个图生视频的网站。
Qwen3-coder 开发的过程中，我们只需要手动点点接收、执行就可以，每次执行完任务，它都会在最后总结汇报，我们一起来看看：
Qwen3-coder 创建了一个完整的包含前后端的全栈项目，并且实现了我们想要的图生视频功能。
我们按照 Qwen3-coder 回复的使用说明来操作一下。
我们直接点击代码上方的文件名称，点击 Qwen3-coder 说的 backend/.env 文件。
在阿里云百炼新建API Key，输入到这里。
接着我们按照提示启动后端。
在调试过程中，我们经常会用到这两行代码：
cd backend
npm run dev
我发现其实这两行代码分别代表：把路径更新到后端文件所在的文件夹，启动终端。
要注意的是，如果默认打开的位置和终端文件夹不在一个系统盘，backend就需要改成完整的文件地址，比如，D:\backend
执行命令后，终端出现了后端的端口地址，代表后端服务已经成功启动了。
在编辑器最上方点击新建终端。
再复制启动前端的代码，用同样的方法启动前端。
cd frontend
npm run dev
估计你也猜到了，这两行代码就是把路径更新到前端文件夹，启动终端。
按住crtl，同时单击端口地址，我们就可以通过浏览器访问前端啦。
前端整个界面非常简单，只有两个按钮，一个上传图片，一个生成视频。
我试着操作一下，上传图片的逻辑是通的，但是生成视频出现了报错。
咱们可以把报错信息直接截图发给 Qwen3-coder ，让它根据报错信息修改。
它会根据问题做出调整，并且告诉我们它做了哪些更改以及后续建议。
需要特别注意的是，我们需要按照阿里云百炼的请求示例说明，让 Qwen3-coder 将oss://...替换为真实的临时 URL。
这下网站就可以正常运行啦。
前端优化
我感觉这个网站有些过于简洁了，不够好看，于是我让 GPT-5 生成了一套前端UI代码；
生成一个图生视频网站的前端UI界面，主色调为奶白+雾紫，果冻质感，Linear 风格；
然后可以根据它做出的网站，再慢慢优化调整页面布局，比如：
提示词：网站名称修改为：AI 跳舞视频生成器
编辑介绍语：上传照片，AI 帮你生成一段跳舞视频
上传图片下方小字提醒：
支持单人照片；建议使用半身至全身的正面照片
图片和视频的尺寸均为3:4，调整合适的布局
预览效果合适之后，就可以点击右上角，下载代码。
将这段代码文件放进项目文件夹，作为上下文添加。
提示词：用我给你的组件代码应用到前端布局，不改变逻辑。
Qwen3-coder 修改之后，我们重新进入前端页面，网站不仅可以运行，而且看上去也比较美观啦~
一些分享
像我这样的文科生，也能靠AI完成网站的全栈开发，想想还是挺激动的~
不过开发完项目还没结束，想要拿 Qwen3-Coder 挑战赛的万元大奖，还需要报名参赛、完成项目的提报和展示。
传统开发要手写数据结构、算法，一行行敲代码，还得熟悉各种编程语言，门槛高、成本也高，是一门需要长期学习才能获得的专业技能。
现在有了 Vibe Coding ，我们只需要把想法表达清楚，AI 就能搭好项目，还能根据我们的反馈一点点打磨。
更重要的是，在实践过程中，我们会不断接触到新的知识，也会在一次次尝试中积累经验。AI 带来的，不只是效率和便利，还有认知的提升。
在 Qwen3-Coder 上，这种体验尤为明显。比如我想做一个项目，只要说几个关键词，Qwen3-Coder 秒懂我要干啥，还能用我也能看懂的方式把项目讲得清清楚楚。
或许开发正在进入一种新范式，代码不再是起点，想法才是。