大家好，這里是K姐。

一個?Vibe Coding 的探索者。

前段時間發現通義發起了一個Qwen3-Coder挑戰賽，最高獎金有10000元，研究了一下，我發現這個賽道太寬了，不限項目，用 AI Coding 做數據分析、個人Blog、抓取信息等等都ok。

小白也能參加，因為這場挑戰賽很看重項目創意。

官方還專門設置了“整活獎”，這不正是我擅長的嗎？

于是我小小的發揮了一下，做了一個有意思的小網站，在網站內上傳一張個人照片，點擊立即生成，就可以得到人物跳舞的視頻。

體驗地址：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 秒懂我要干啥，還能用我也能看懂的方式把項目講得清清楚楚。

或許開發正在進入一種新范式，代碼不再是起點，想法才是。