Qwen上新AI前端工程師！一句話搞定HTML/CSS/JS，新手秒變React大神
搭配深度思考模式能力更強(qiáng)
夢晨 發(fā)自 凹非寺
量子位 | 公眾號(hào) QbitAI
Qwen上新“AI前端工程師”Web Dev，一句話開發(fā)網(wǎng)頁應(yīng)用。
三大件HTML，CSS，JavaScript一個(gè)工具全包了，定睛一看用的還是React框架。
幾秒鐘生成個(gè)人網(wǎng)站，布局美觀還帶特效，接下來改改內(nèi)容上傳GitHub Pages就完事了。
又或者哪家Agent能自動(dòng)部署網(wǎng)頁了，有知道的歡迎在評(píng)論區(qū)交流。
官方在Twitter的宣傳還演示了一句話復(fù)刻Twitter界面。
有開發(fā)者表示，這不僅是文本到像素級(jí)渲染，還可以讓團(tuán)隊(duì)先快速搭建腳手架，再逐步完善，加快開發(fā)流程。
手快的網(wǎng)友已經(jīng)復(fù)刻了GitHub的界面。
Qwen版Canvas/Artifact
除了開發(fā)網(wǎng)頁應(yīng)用外，Qwen官方還演示了制作復(fù)雜動(dòng)畫的效果。
編寫一個(gè)水果電子商務(wù)網(wǎng)站，創(chuàng)建一個(gè)防曬產(chǎn)品介紹網(wǎng)站，都只需要一句話。
當(dāng)然，要是有更具體的內(nèi)容和頁面布局要求，也可以仔細(xì)描述：
創(chuàng)建一個(gè)語義化的“聯(lián)系客服”表單，其中包含用戶姓名、郵箱、問題類型和留言等字段。表單元素在卡片內(nèi)垂直排列。
更高級(jí)的玩法是發(fā)給AI一個(gè)網(wǎng)頁，讓它根據(jù)里面的內(nèi)容自己創(chuàng)建合適的展示方式。
從前面的例子可以看出，每一次AI都是調(diào)用React框架，即使明確要求他使用別的框架或不使用框架都做不到。
另外這個(gè)功能不限制模型，在Qwen網(wǎng)頁版的模型都可以選用，只需要開啟“網(wǎng)頁開發(fā)”模式。
如果與“深度思考”模式一起使用的話，也能開發(fā)出來的網(wǎng)頁質(zhì)量有較大提升（不過會(huì)讓輸出明顯變慢），
未開啟深度思考：
開啟深度思考：
從推理token中，還可以從側(cè)面看出網(wǎng)頁開發(fā)模式運(yùn)行的機(jī)制。
使用React、Tailwind CSS，以及所有內(nèi)容放在單個(gè)靜態(tài).jsx文件中應(yīng)該是系統(tǒng)提示詞規(guī)定好了的。
簡單套話還可以看出，系統(tǒng)提示詞中包含一系列設(shè)計(jì)原則和最佳實(shí)踐。
有完整套出系統(tǒng)提示詞的朋友也歡迎在評(píng)論區(qū)中分享。
One More Thing
Qwen Chat除了“網(wǎng)頁開發(fā)”模式之外，還新增了一個(gè)MCP模式，不過目前還是灰色的，指上去會(huì)顯示“即將推出”。
也是很期待了。
在線試玩：
https://chat.qwen.ai/?inputFeature=web_de
參考鏈接：
[1]https://x.com/Alibaba_Qwen/status/1920848175457591406
- 字節(jié)突然開源Seed-OSS，512K上下文主流4倍長度，推理能力刷紀(jì)錄2025-08-21
- “現(xiàn)在讀AI博士已經(jīng)太晚了”2025-08-19
- 谷歌AI攻克亞洲語言難題，2300種語言數(shù)字化計(jì)劃正在推進(jìn)2025-08-18
- AMD蘇姿豐公開懟扎克伯格！反對(duì)1億年薪挖人，使命感比鈔票更重要2025-08-18
相關(guān)閱讀
最強(qiáng)開源CodeLLM模型深夜來襲！320億參數(shù)，Qwen2.5-Coder新模型超越GPT-4o
無需Code，一句prompt生萬物
杭州超越杭州：阿里Qwen2.5-Max反超DeepSeek-V3！網(wǎng)友：中國AI正在快速縮小差距
在編程、數(shù)學(xué)等方面表現(xiàn)格外突出
杭州領(lǐng)跑AI開源！阿里Qwen除夕開源視覺理解新旗艦，全系列3尺寸，7B模型超GPT-4o-mini
Qwen也在加班！橫掃多個(gè)榜單
