SuperAPI AI Directory

Vibe Coding in Practice: Building an AI Dance Video Generator with Qwen3-Coder

Author: AI小集 · Original source: AI工具集

A while ago I discovered that Tongyi launched a Qwen3-Coder challenge, with a top prize of 10,000 yuan. After looking into it, I found this track is really broad—no restrictions on the project. Using AI Coding for data analysis, a personal blog, scraping information, and so on are all fine.

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

The organizers even set up a special "fun project award"—isn't that exactly what I'm good at?

So I put in a little effort and made an interesting little website. Upload a personal photo on the site, click Generate Now, and you get a video of the person dancing.

Experience link:https://kseek.ai/

The whole development process can be divided into 3 steps:

Concept and design: first figure out what project you want to build and which model to use

Generate and debug: hand the requirements to Qwen3-Coder, generate the frontend and backend, then get the workflow running

Optimize the page layout to make the website look more complete

This tutorial documents in detail the entire process and key points of developing this website.You don't need to write any code yourself throughout. Even complete beginners who can't understand code at all can follow along and manage full-stack development.。

If you also want to integrate the various capabilities of large AI models into your own projects but don't know where to start, this content might be able to help you~

 

01. Project Concept

 

We need to firstclarify the requirements. For example, my initial idea was to build an image-to-video website by integrating a large model's API.

We open the Model Gallery of Alibaba Cloud Bailian, filter for video generation models, click to view details, and learn about the application cases of these models.

For example, image-to-video is divided into generating from a first-frame image plus an input prompt, generating from a first-frame image using video effects (no prompt needed), and video effects based on the first and last frames.

For the AI dance video generation tool I want to build, generation through image-to-video effects is a more convenient and more stable solution~

So our development direction becomes specific and clear:Use the wanx2.1-i2v-plus model's image-to-video effects feature to generate dance videos。

 

02. Website Development

 

We can look at the API reference provided by the Alibaba Cloud Bailian platform to understand some conditions and usage logic for calling the model API.

There are also the effects of which specific model to use. For example, I want to use video generation with dance effects, and in the example table provided by Alibaba Cloud, the template parameter value is dance2.

Of course, it doesn't matter if we can't understand it.Just package all this content and send it to Qwen3-Coder, and let it learn on the fly. Use this information from the platform to help us complete the development.

We download VS Code and install the Tongyi Lingma plugin. For how to use Tongyi Lingma, you can see this tutorial: Build a Personal Website with AI at Zero Cost, Beginners Can Do It in 3 Steps!

Click File in the upper left corner and open a blank folder. Future project files will all be stored here~

In Tongyi Lingma, select the Qwen3-Coder model and Agent mode. In this mode, we only need to state the 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 officially by Alibaba Cloud Bailian, and let Qwen3-coder first build an image-to-video website.

During the development process with Qwen3-coder, we only need to manually click to accept and execute. Each time it completes a task, it will summarize and report at the end. Let's take a look together:

Qwen3-coder created a complete full-stack project including both frontend and backend, and implemented the image-to-video feature we wanted.

Let's follow the usage instructions in Qwen3-coder's reply and give it a try.

We directly click the file name above the code, and click the backend/.env file that Qwen3-coder mentioned.

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

Next, we start the backend according to the prompts.

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

cd backend

npm run dev

I found that these two lines of code respectively 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, backend needs to be changed to the full file path, for example, D:\backend

After executing the command, the backend port address appears in the terminal, which means the backend service has started successfully.

Click New Terminal at the very top of the editor.

Then copy the code for starting the frontend and start the frontend in the same way.

cd frontend

npm run dev

I guess you've already figured it out: these two lines of code are just updating the path to the frontend folder and starting the terminal.

Hold down ctrl and click the port address at the same time, and we can access the frontend through the browser.

The entire frontend interface is very simple, with only two buttons: one to upload an image and one to generate a video.

I tried it out. The image upload logic works, but an error occurred when generating the video.

We can directly screenshot the error message and send it to Qwen3-coder, so it can make modifications based on the error message.

It will make adjustments based on the issue and tell us what changes it made as well as follow-up suggestions.

It is especially important to note that we need to followthe request example instructions of Alibaba Cloud Model Studio, and have Qwen3-coder replace oss://... with the real temporary URL.

Now the website can run normally.

 

 03. Frontend Optimization

 

I felt that this website was a bit too simple and not good-looking enough, so I asked GPT-5 to generate a set of frontend UI code;

Generate a frontend UI interface for an image-to-video website, with a primary color scheme of creamy white + misty purple, jelly texture, and Linear style;

Then, based on the website it produces, we can slowly optimize and adjust the page layout, for example:

Prompt: Change the website name to: AI Dance Video Generator

Edit the introduction text: Upload a photo, and AI will help you generate a dance video

Small reminder text below the image upload:

Supports single-person photos; it is recommended to use front-facing photos from half-body to full-body

The size of both images and videos is 3:4; adjust the layout appropriately

Once the preview effect looks suitable, you can click in the upper right corner to download the code.

Put this code file into the project folder and add it as context.

Prompt: Apply the component code I gave you to the frontend layout without changing the logic.

After Qwen3-coder modifies it, we re-enter the frontend page. The website not only runs, but also looks quite beautiful~

 

 04. Some Sharing

 

Even a liberal arts student like me can rely on AI to complete full-stack development of a website. Just thinking about it is pretty exciting~

However, finishing the project development is not the end,if you want to win the ten-thousand-yuan grand prize in the Qwen3-Coder Challenge, you also need to register for the competition and complete the project submission and presentation.

Traditional development requires hand-writing data structures and algorithms, typing code line by line, and also being familiar with various programming languages. The barrier to entry is high, and so is the cost. It is a professional skill that requires long-term study to acquire.

Now with Vibe Coding, we only need to express our ideas clearly, and AI can set up the project and polish it bit by bit based on our feedback.

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

On Qwen3-Coder, this experience is especially obvious. For example, if I want to make a project, I only need to say a few keywords, and Qwen3-Coder instantly understands what I want to do, and can explain the project clearly in a way that I can also understand.

Perhaps development is entering a new paradigm: code is no longer the starting point, ideas are.

Original link:Unable to understand code, I used Qwen3-Coder to make an AI dance video generator