AB
AiBoss
Tutorials

Vibe Coding Practical Project: Creating an AI Dance Video Generator using Qwen3-Coder

This tutorial details the entire process and key points of developing this website. No coding is required; even complete beginners with no coding experience can master full-stack development by following the steps. If you also want to develop your own project...

I recently discovered that Tongyi launched the Qwen3-Coder Challenge, with a top prize of 10,000 yuan. After looking into it, I found that the competition is very broad, with no restrictions on projects. AI Coding is great for data analysis, personal blogs, information scraping, and more.

Even beginners can participate, because this challenge places great emphasis on project creativity.

The official team even set up a "Creative Content Award," which is exactly what I excel at!

So I did a little improvisation and created a fun little website. You can upload a personal photo to the website, click "Generate Now," and get a video of the person dancing.

Experience it here: https://kseek.ai/

The entire development process can be divided into 3 steps:

When conceptualizing and designing, first clarify what kind of project you want to do and what model you want to use.

Generate and debug: Submit your requirements to Qwen3-Coder, generate the front-end and back-end, and then run the process.

Optimize page layout to make the website look more complete.

This tutorial details the entire process and key points of developing this website.No coding is required throughout the entire process. Even complete beginners who can't understand code can master full-stack development by following the steps..

If you also want to integrate this into your projectAILarge ModelIf you have all the necessary skills but don't know where to start, this article might be able to help you.

We need to firstDefine requirementsFor example, my initial idea was to access...Large ModelUse the API to create a website that generates video from images.

We open the Alibaba Cloud Model Plaza, filter by video-generated models, and click to view details to learn about the application cases of these models.

For example, image-generated video is divided into the first frame image plus input.Prompt wordsGenerate, and generate the first frame image using video effects (no need).Prompt wordsThere are also video effects based on the first and last frames.

What I want to doAIFor dance video generation tools, using image-based video effects is a more convenient and stable solution.

Therefore, our development direction became specific and clear:Use the image-to-video effects feature of the wanx2.1-i2v-plus model to generate a dance video..

We can take a look at the API reference provided by Alibaba Cloud's Bailian platform to understand some conditions and usage logic for model API calls.

There's also the specific effect of using which model. For example, if I want to generate a video with dancing effects, the template parameter value in the example table provided by Alibaba Cloud is dance2.

Of course, it's okay if we don't understand it.Package this content and send it directly to Qwen3-CoderThis allows it to learn and apply what it learns on the spot. The information from the platform helps us complete the development process.

We download VS Code and install the Tongyi Lingma plugin. For instructions on using Tongyi Lingma, please refer to this tutorial.AIBuild your own website at zero cost – even beginners can do it in 3 easy steps!

Click "File" in the top left corner to open a blank folder. All subsequent project files will be stored here.

In Tongyi Lingma, select the Qwen3-Coder model.intelligentbodyIn this mode, we only need to state our requirements, and Qwen3-Coder can call the appropriate tools to help us complete the development project.

We first input the development requirements and some requirements and sample code provided by Alibaba Cloud Bailian, and then let Qwen3-coder create a website that generates video from images.

During the development process with Qwen3-coder, we only need to manually click to receive and execute tasks. After each task is completed, it will provide a summary report at the end. Let's take a look:

Qwen3-coder created a complete full-stack project that includes both front-end and back-end, and implemented the image-to-video functionality we wanted.

Let's follow the instructions in Qwen3-coder's reply.

We can directly click on the file name above the code, specifically the backend/.env file mentioned by Qwen3-coder.

Create a new API Key in Alibaba Cloud Bailian and enter it here.

Next, we started the backend as prompted.

During debugging, we often use these two lines of code:

cd backend

npm run dev

I discovered that these two lines of code actually mean: update the path to the folder where the backend file is located, and start the terminal.

Note that if the default opening location and the terminal folder are not on the same system drive, you need to change backend to the full file path, for example, D:\backend.

After executing the command, the terminal displays the backend port address, indicating that the backend service has started successfully.

Click "New Terminal" at the top of the editor.

Then copy the code to start the front-end and start the front-end using the same method.

cd Frontend

npm run dev

As you probably guessed, these two lines of code update the path to the front-end folder and start the terminal.

Hold down Ctrl and click the port address to access the front end through your browser.

The entire front-end interface is verySimpleThere are only two buttons: one for uploading an image and one for generating a video.

I tried it out, and the logic for uploading images worked, but an error occurred when generating the video.

We can take a screenshot of the error message and send it to Qwen3-coder so that it can modify it based on the error message.

It will adjust based on the problem and tell us what changes it has made and what follow-up suggestions it may offer.

It is important to note that we need to followThe Alibaba Cloud Hundred Refinements request example demonstrates how to have Qwen3-coder replace oss://… with a real temporary URL.

Now the website can run normally.

I felt this website was too simplistic and not visually appealing enough, so I... GPT-5 generated a set of front-end UI code;

Generate the front-end UI of a graphic video website, with the main color scheme being milky white and misty purple, a jelly-like texture, and a linear style;

Then, based on the website it creates, you can gradually optimize and adjust the page layout, for example:

Prompt wordsThe website name has been changed to:AI Dance video generator

Editor's note: Upload photos,AI Help you generate a dance video

Small text below the uploaded image reminds you:

Single photos are supported; a half-body to full-body front-facing photo is recommended.

Both images and videos should be 3:4 in aspect ratio; adjust the layout accordingly.

Once you're satisfied with the preview, click the top right corner to download the code.

Place this code file in the project folder and add it as context.

Prompt wordsUse the component code I gave you to apply to the front-end layout without changing the logic.

After Qwen3-coder made the changes, we re-entered the front-end page, and the website not only worked but also looked much better!

Even a liberal arts student like me can rely onAICompleting the full-stack development of the website is quite exciting!

However, the project is not over yet even after development is complete.To win the grand prize of 10,000 yuan in the Qwen3-Coder Challenge, you need to register for the competition, submit your project, and present it.

Traditional development requires writing data structures and algorithms by hand, typing code line by line, and being familiar with various programming languages. It has a high barrier to entry and is costly, making it a professional skill that requires long-term learning to acquire.

Now with Vibe Coding, we only need to clearly express our ideas.AI That way, the project can be set up and refined little by little based on our feedback.

More importantly, in the process of practice, we will constantly come into contact with new knowledge and accumulate experience through repeated attempts.AI It brings not only efficiency and convenience, but also an improvement in understanding.

This experience is especially noticeable on Qwen3-Coder. For example, if I want to create a project, I only need to say a few keywords, and Qwen3-Coder will instantly understand what I want to do and explain the project clearly in a way that I can understand as well.

Perhaps development is entering a new paradigm where code is no longer the starting point, but rather ideas.