Qwen 上新“AI 前端工程師”Web Dev，一句話開發(fā)網頁應用。三大件 HTML，CSS，Java 一個工具全包了，定睛一看用的還是 React 框架。

幾秒鐘生成個人網站，布局美觀還帶特效，接下來改改內容上傳 GitHub Pages 就完事了。

官方在 Twitter 的宣傳還演示了一句話復刻 Twitter 界面。

有開發(fā)者表示，這不僅是文本到像素級渲染，還可以讓團隊先快速搭建腳手架，再逐步完善，加快開發(fā)流程。

手快的網友已經復刻了 GitHub 的界面。

Qwen 版 Canvas / Artifact

除了開發(fā)網頁應用外，Qwen 官方還演示了制作復雜動畫的效果。

編寫一個水果電子商務網站，創(chuàng)建一個防曬產品介紹網站，都只需要一句話。

當然，要是有更具體的內容和頁面布局要求，也可以仔細描述：創(chuàng)建一個語義化的“聯(lián)系客服”表單，其中包含用戶姓名、郵箱、問題類型和留言等字段。表單元素在卡片內垂直排列。

更高級的玩法是發(fā)給 AI 一個網頁，讓它根據里面的內容自己創(chuàng)建合適的展示方式。

從前面的例子可以看出，每一次 AI 都是調用 React 框架，即使明確要求他使用別的框架或不使用框架都做不到。

另外這個功能不限制模型，在 Qwen 網頁版的模型都可以選用，只需要開啟“網頁開發(fā)”模式。

如果與“深度思考”模式一起使用的話，也能開發(fā)出來的網頁質量有較大提升（不過會讓輸出明顯變慢），未開啟深度思考：

開啟深度思考：

從推理 token 中，還可以從側面看出網頁開發(fā)模式運行的機制。

使用 React、Tailwind CSS，以及所有內容放在單個靜態(tài).jsx 文件中應該是系統(tǒng)提示詞規(guī)定好了的。

簡單套話還可以看出，系統(tǒng)提示詞中包含一系列設計原則和最佳實踐。有完整套出系統(tǒng)提示詞的朋友也歡迎在評論區(qū)中分享。

One More Thing

Qwen Chat 除了“網頁開發(fā)”模式之外，還新增了一個 MCP 模式，不過目前還是灰色的，指上去會顯示“即將推出”。也是很期待了。

在線試玩：

https://chat.qwen.ai/?inputFeature=web_de

參考鏈接：

[1]https://x.com/Alibaba_Qwen/status/1920848175457591406