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

0 評論 566 瀏覽 2 收藏 6 分鐘

Qwen推出了一項令人矚目的新功能——“AI前端工程師”Web Dev。這一工具能夠通過簡單的自然語言指令,快速生成HTML、CSS和JavaScript代碼,甚至支持React框架,幫助開發(fā)者在幾秒鐘內搭建出美觀且功能完善的網(wǎng)頁應用。

Qwen上新“AI前端工程師”Web Dev,一句話開發(fā)網(wǎng)頁應用。

三大件HTML,CSS,JavaScript一個工具全包了,定睛一看用的還是React框架。

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

又或者哪家Agent能自動部署網(wǎng)頁了,有知道的歡迎在評論區(qū)交流。

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

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

手快的網(wǎng)友已經(jīng)復刻了GitHub的界面。

Qwen版Canvas/Artifact

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

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

當然,要是有更具體的內容和頁面布局要求,也可以仔細描述:

創(chuàng)建一個語義化的“聯(lián)系客服”表單,其中包含用戶姓名、郵箱、問題類型和留言等字段。表單元素在卡片內垂直排列。

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

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

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

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

未開啟深度思考:

開啟深度思考:

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

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

簡單套話還可以看出,系統(tǒng)提示詞中包含一系列設計原則和最佳實踐。

有完整套出系統(tǒng)提示詞的朋友也歡迎在評論區(qū)中分享。

One More Thing

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

也是很期待了。

在線試玩:

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

參考鏈接:

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

夢晨 發(fā)自 凹非寺量子位 | 公眾號 QbitAI

本文由人人都是產(chǎn)品經(jīng)理作者【量子位】,微信公眾號:【量子位】,原創(chuàng)/授權 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協(xié)議。

更多精彩內容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!