Vibe Coding实战项目：用Qwen3-Coder做了个AI跳舞视频生成器

前阵子我发现通义办了一场 Qwen3-Coder 挑战赛，最高奖金有10000元。仔细研究完规则，我的结论是：这个赛道宽得离谱——不限项目，用 AI Coding 做数据分析、个人Blog、抓取信息等等都ok。

小白也能报名，因为这场挑战赛更看重项目创意。

官方还专门设置了“整活奖”，这不正是我擅长的吗？

于是我小小的发挥了一下，做了个有意思的小网站：在网站里上传一张个人照片，点击立即生成，就能拿到一段人物跳舞的视频。

体验地址戳这里：https://kseek.ai/

整个开发过程，我把它拆成3步：

构思设计：先想清楚要做什么项目、用哪个模型

生成调试：把需求交给Qwen3-Coder，生成前后端，再把流程跑通

优化页面布局，让网站看着更完整

这篇教程把这个网站的开发过程和要点都记下来了，全程不需要自己写代码，即使是完全看不懂代码的小白，跟着操作，也能搞定全栈开发。

如果你的项目也想接上AI大模型的各项能力，又不知道从哪一步下手，这篇内容也许正好能帮到你~

 

01. 先把需求想明白

 

第一步是明确需求。我最初的思路很朴素：接一个大模型的API，做一个图生视频的网站。

打开阿里云百炼的模型广场，把视频生成模型筛出来，逐个点进详情页，看看这些模型能用在哪些案例上。

以图生视频为例，就分好几种玩法：首帧图片加输入提示词生成；首帧图片套用视频特效生成（无需提示词）；还有基于首尾帧的视频效果。

我要做的是AI跳舞视频生成工具，走图生视频特效这条路更省事，效果也更稳定~

开发方向到这就具体清晰了：使用 wanx2.1-i2v-plus 模型的图生视频特效功能，生成跳舞视频。

 

02. 开始搭网站

 

接着翻一翻阿里云百炼平台给出的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。

到这一步，网站就能正常跑起来了。

 

 03. 把前端做得更好看

 

这个网站功能没问题了，但实在过于简洁、不够好看，于是我让 GPT-5 生成了一套前端UI代码；

生成一个图生视频网站的前端UI界面，主色调为奶白+雾紫，果冻质感，Linear 风格；

之后可以照着它做出来的网站，慢慢打磨页面布局，比如：

提示词：网站名称修改为：AI 跳舞视频生成器

编辑介绍语：上传照片，AI 帮你生成一段跳舞视频

上传图片下方小字提醒：

支持单人照片；建议使用半身至全身的正面照片

图片和视频的尺寸均为3:4，调整合适的布局

预览效果对了，就点击右上角把代码下载下来。

把这段代码文件丢进项目文件夹，当作上下文添加进去。

提示词：用我给你的组件代码应用到前端布局，不改变逻辑。

Qwen3-coder 改完之后，重新打开前端页面，网站不光能跑起来，卖相也好看了不少~

 

 04. 一些分享

 

文科生出身、代码一行不会写的我，也能靠AI把网站的全栈开发做完，这事想想还是挺激动的~

不过开发完项目还没结束，想要拿 Qwen3-Coder 挑战赛的万元大奖，还需要报名参赛、完成项目的提报和展示。

传统开发是什么样子？数据结构、算法要手写，代码一行行敲，各种编程语言都得熟，门槛高、成本也高，是一门要长期学才能拿下的专业技能。

换成 Vibe Coding ，路数完全变了：你只要把想法讲清楚，AI 就能把项目搭起来，再根据你的反馈一点点打磨。

更关键的是，动手的过程中会不断撞上新知识，一次次尝试下来经验也攒下了。AI 给的不只是效率和便利，还有认知上的提升。

这种感受在 Qwen3-Coder 上尤其明显。比如我想做一个项目，只说几个关键词，Qwen3-Coder 秒懂我要干啥，还能用我也能看懂的方式把项目讲得清清楚楚。

或许开发正在进入一种新范式，代码不再是起点，想法才是。

原文链接：看不懂代码的我，用Qwen3-Coder做了个AI跳舞视频生成器