Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS,新手秒变React大神

搜索
AI-TNT
正文
资源拓展
Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS,新手秒变React大神
2025-05-10 17:20

Qwen上新“AI前端工程师”Web Dev,一句话开发网页应用。


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


Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS,新手秒变React大神


几秒钟生成个人网站,布局美观还带特效,接下来改改内容上传GitHub Pages就完事了。


又或者哪家Agent能自动部署网页了,有知道的欢迎在评论区交流。


Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS,新手秒变React大神


官方在Twitter的宣传还演示了一句话复刻Twitter界面。


Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS,新手秒变React大神


有开发者表示,这不仅是文本到像素级渲染,还可以让团队先快速搭建脚手架,再逐步完善,加快开发流程。


Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS,新手秒变React大神


手快的网友已经复刻了GitHub的界面。


Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS,新手秒变React大神


Qwen版Canvas/Artifact


除了开发网页应用外,Qwen官方还演示了制作复杂动画的效果。


Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS,新手秒变React大神


编写一个水果电子商务网站,创建一个防晒产品介绍网站,都只需要一句话。


Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS,新手秒变React大神


当然,要是有更具体的内容和页面布局要求,也可以仔细描述:


创建一个语义化的“联系客服”表单,其中包含用户姓名、邮箱、问题类型和留言等字段。表单元素在卡片内垂直排列。


Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS,新手秒变React大神


更高级的玩法是发给AI一个网页,让它根据里面的内容自己创建合适的展示方式。


Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS,新手秒变React大神


从前面的例子可以看出,每一次AI都是调用React框架,即使明确要求他使用别的框架或不使用框架都做不到。


Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS,新手秒变React大神


Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS,新手秒变React大神


另外这个功能不限制模型,在Qwen网页版的模型都可以选用,只需要开启“网页开发”模式


Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS,新手秒变React大神


如果与“深度思考”模式一起使用的话,也能开发出来的网页质量有较大提升(不过会让输出明显变慢),


未开启深度思考:


Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS,新手秒变React大神


开启深度思考:


Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS,新手秒变React大神


从推理token中,还可以从侧面看出网页开发模式运行的机制。


使用React、Tailwind CSS,以及所有内容放在单个静态.jsx文件中应该是系统提示词规定好了的。


Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS,新手秒变React大神


简单套话还可以看出,系统提示词中包含一系列设计原则和最佳实践。


有完整套出系统提示词的朋友也欢迎在评论区中分享。


Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS,新手秒变React大神


One More Thing


Qwen Chat除了“网页开发”模式之外,还新增了一个MCP模式,不过目前还是灰色的,指上去会显示“即将推出”。


也是很期待了。


Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS,新手秒变React大神


在线试玩:


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


参考链接:


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


文章来自于微信公众号“量子位”,作者 :梦晨


Qwen上新AI前端工程师!一句话搞定HTML/CSS/JS,新手秒变React大神

1
智能体

【开源免费】AutoGPT是一个允许用户创建和运行智能体的(AI Agents)项目。用户创建的智能体能够自动执行各种任务,从而让AI有步骤的去解决实际问题。

项目地址:https://github.com/Significant-Gravitas/AutoGPT


【开源免费】MetaGPT是一个“软件开发公司”的智能体项目,只需要输入一句话的老板需求,MetaGPT即可输出用户故事 / 竞品分析 / 需求 / 数据结构 / APIs / 文件等软件开发的相关内容。MetaGPT内置了各种AI角色,包括产品经理 / 架构师 / 项目经理 / 工程师,MetaGPT提供了一个精心调配的软件公司研发全过程的SOP。

项目地址:https://github.com/geekan/MetaGPT/blob/main/docs/README_CN.md

2
截图转代码

【开源免费】screenshot-to-code是一个可以将网页截图或者原型图片直接转化成前端代码的AI工具。这个项目非常有想象力的让AI提高了前端的开发效率。

项目地址:https://github.com/abi/screenshot-to-code?tab=readme-ov-file

在线使用:https://screenshottocode.com/

3
prompt

【开源免费】LangGPT 是一个通过结构化和模板化的方法,编写高质量的AI提示词的开源项目。它可以让任何非专业的用户轻松创建高水平的提示词,进而高质量的帮助用户通过AI解决问题。

项目地址:https://github.com/langgptai/LangGPT/blob/main/README_zh.md

在线使用:https://kimi.moonshot.cn/kimiplus/conpg00t7lagbbsfqkq0

IOS下载
安卓下载
微信群
沪ICP备2023015588号