最近通义发起了Qwen3-Coder挑战赛，奖金颇具吸引力。深入了解规则后发现，该赛道自由度极高——不限定项目类型，无论是AI数据分析、个人博客搭建，还是信息抓取工具，均可参赛。
即使编程新手也大有可为，因为比赛尤为看重项目的创意与想法。
官方还特别设立了“整活奖”，恰好契合了我的兴趣。
因此，我决定小试牛刀，构建了一个趣味十足的网站：只需上传一张个人照片，点击生成，即可获得一段由该照片生成的人物跳舞视频。
整个开发流程清晰分为三步：首先进行构思设计，明确目标及模型选择；其次进入生成与调试阶段，将需求交给Qwen3-Coder以生成前后端代码，并打通核心流程；最后优化页面布局，使网站更完整、更美观。
本教程将详细记录该网站从零到一的全过程与关键要点。全程无需手动编写一行代码，即便完全不懂编程，只要按步骤操作，也能完成一个全栈项目的搭建。
如果您也想在自己的项目中接入AI大模型的能力，但不知从何入手，那么接下来的内容或许能为您提供一条清晰的路径。
01. 项目构思
第一步，明确核心需求。我最初的构想是借助大模型的API能力，打造一个“图生视频”网站。
打开阿里云百炼模型广场，筛选“视频生成”类模型，点击查看详情，即可了解各模型的具体应用案例。
你会发现，“图生视频”其实分为多种类型：有的基于首帧图片加提示词生成；有的使用首帧图片配合预设视频特效生成（无需提示词）；还有的基于首尾帧图片生成中间动画。
对于我想要的AI跳舞视频生成工具而言，“图生视频特效”无疑是更便捷、效果也更稳定的方案。
这样一来，开发方向变得具体而清晰：采用 wanx2.1-i2v-plus 模型的图生视频特效功能，生成跳舞视频。
02. 网站开发
动手之前，建议先查阅阿里云百炼平台提供的API参考文档，了解模型调用的基本条件与使用逻辑。
例如，具体选用哪个模型特效。以生成跳舞特效为例，在阿里云示例中，对应的template参数值为dance2。
当然，如果觉得阅读文档略显吃力，完全可以将这些内容直接交给 Qwen3-Coder，让其“现学现用”。我们的目标正是借助平台信息，辅助它完成开发。
首先，下载并安装VS Code，随后安装通义灵码插件。接着，在VS Code中新建一个空白文件夹，所有项目文件将存放于此。
在通义灵码中选择 Qwen3-Coder 模型，并切换至“智能体”模式。在此模式下，只需描述需求，Qwen3-Coder 便会调用合适的工具协助你完成项目开发。
现在，输入开发需求，并将阿里云百炼官方的API说明及示例代码一并提供给它，让 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
估计你也猜到了，这两行命令作用是切换到前端文件夹并启动前端开发服务器。
按住Ctrl键，同时单击终端中显示的端口地址，即可在浏览器中访问前端页面。
此时前端界面非常简洁，仅有两个按钮：一个用于上传图片，一个用于生成视频。
实际操作发现，上传图片功能正常，但点击生成视频时出现报错。
解决办法很简单：直接将报错信息截图发给 Qwen3-Coder，让它根据错误日志进行修复。
它会分析问题并做出调整，同时告知你修改了哪些内容以及后续操作建议。
这里有一个关键点：必须按照阿里云百炼的请求示例说明，务必让 Qwen3-Coder 将代码中类似oss://…的占位符替换为真实的临时URL。
完成这一步后，网站便可正常运行。
03. 前端优化
基础功能虽已跑通，但网站界面实在过于简洁。为提升体验，我让另一个AI工具生成了一套新的前端UI代码。
我的需求是：生成一个图生视频网站的前端界面，主色调为奶白加雾紫，带有果冻质感，整体风格偏向Linear。
拿到生成的界面后，可通过对话逐步优化调整页面布局，例如：
将网站名称改为“AI 跳舞视频生成器”；编辑介绍语为“上传照片，AI 帮你生成一段跳舞视频”；在上传图片按钮下方添加小字提醒：“支持单人照片；建议使用半身至全身的正面照片”；调整图片和视频预览区域尺寸比例为3:4，并优化整体布局。
预览效果满意后，即可下载这套UI代码。
将下载的代码文件放入项目文件夹，作为新上下文提供给Qwen3-Coder。
将给您提供的这套组件代码应用到现有前端布局中，保持原有业务逻辑不变。
Qwen3-Coder 完成修改后，重新启动并访问前端页面。此时，网站不仅功能完好，界面也变得更加美观。
04. 一些分享
通过这样一个项目，即使没有编程背景，也能借助AI完成全栈网站的搭建，这种感觉确实奇妙。
当然，开发完项目仅是第一步。若要参与Qwen3-Coder挑战赛并角逐奖项，还需完成正式报名、项目提报与展示。
传统开发模式需要手动设计数据结构、编写算法，一行行敲代码，还需精通多种编程语言，门槛高、成本高，是一项需长期积累的专业技能。
而现在，有了“Vibe Coding”这种新范式，我们只需清晰表达想法，AI便能搭建项目骨架，并可根据反馈持续打磨优化。
更重要的是，在整个实践过程中，你会不断接触新知识点，并在一次次尝试中积累经验。AI带来的不仅是效率提升和操作便利，更是认知层面的拓展。
在Qwen3-Coder上，这种体验尤为明显。当你描述一个项目想法时，它似乎能瞬间理解你的意图，并用你能理解的方式把项目讲解得清晰透彻。
或许，软件开发正进入一种新范式：代码不再是起点，想法才是。
