Qwen上新AI前端工程師！一句話搞定HTML/CSS/JS，新手秒變React大神

2025-06-27 14:00 量子位

夢晨 發自 凹非寺
量子位 | 公眾號 QbitAI
Qwen上新“AI前端工程師”Web Dev，一句話開發網頁應用。
三大件HTML，CSS，JavaScript一個工具全包了，定睛一看用的還是React框架。
幾秒鐘生成個人網站，佈局美觀還帶特效，接下來改改內容上傳GitHub Pages就完事了。
又或者哪家Agent能自動部署網頁了，有知道的歡迎在評論區交流。
官方在Twitter的宣傳還演示了一句話復刻Twitter介面。
有開發者表示，這不僅是文字到畫素級渲染，還可以讓團隊先快速搭建腳手架，再逐步完善，加快開發流程。
手快的網友已經復刻了GitHub的介面。

Qwen版Canvas/Artifact

除了開發網頁應用外，Qwen官方還演示了製作複雜動畫的效果。
編寫一個水果電子商務網站，建立一個防曬產品介紹網站，都只需要一句話。
當然，要是有更具體的內容和頁面佈局要求，也可以仔細描述：
建立一個語義化的“聯絡客服”表單，其中包含使用者姓名、郵箱、問題型別和留言等欄位。表單元素在卡片內垂直排列。
更高階的玩法是發給AI一個網頁，讓它根據裡面的內容自己建立合適的展示方式。
從前面的例子可以看出，每一次AI都是呼叫React框架，即使明確要求他使用別的框架或不使用框架都做不到。
另外這個功能不限制模型，在Qwen網頁版的模型都可以選用，只需要開啟“網頁開發”模式。
如果與“深度思考”模式一起使用的話，也能開發出來的網頁質量有較大提升（不過會讓輸出明顯變慢），
未開啟深度思考：
開啟深度思考：
從推理token中，還可以從側面看出網頁開發模式執行的機制。
使用React、Tailwind CSS，以及所有內容放在單個靜態.jsx檔案中應該是系統提示詞規定好了的。
簡單套話還可以看出，系統提示詞中包含一系列設計原則和最佳實踐。
有完整套出系統提示詞的朋友也歡迎在評論區中分享。

One More Thing

Qwen Chat除了“網頁開發”模式之外，還新增了一個MCP模式，不過目前還是灰色的，指上去會顯示“即將推出”。
也是很期待了。
線上試玩：
https://chat.qwen.ai/?inputFeature=web_de
參考連結：
[1]https://x.com/Alibaba_Qwen/status/1920848175457591406
— 完 —
📪 量子位AI主題策劃正在徵集中！歡迎參與專題365行AI落地方案，一千零一個AI應用，或與我們分享你在尋找的AI產品，或發現的AI新動向。
💬 也歡迎你加入量子位每日AI交流群，一起來暢聊AI吧～

一鍵關注 👇 點亮星標
科技前沿進展每日見
一鍵三連「點贊」「轉發」「小心心」
歡迎在評論區留下你的想法！

相關文章