AI在线 AI在线

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

Qwen上新“AI前端工程师”Web Dev,一句话开发网页应用。 三大件HTML,CSS,JavaScript一个工具全包了,定睛一看用的还是React框架。 几秒钟生成个人网站,布局美观还带特效,接下来改改内容上传GitHub Pages就完事了。

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

相关资讯

2025 年前端与 AI 技术大盘点和展望

作者 | owen时光飞逝间,2024 年已悄然划过技术长河。 纵览这一年前端技术大舞台,虽没有出现革命性的明星项目,但各细分领域都呈现持续深耕与创新突破的态势。 接下来让我们一起乘坐时光机重回 2024,共同开启这段技术巡礼,透过专业视角看看前端行业发生了哪些重要的事情吧。
3/6/2025 9:00:00 AM
腾讯技术工程

AI 时代如何更高效开发前端组件?21st.dev 给了一种答案

给大家推荐一个好东西:21st.dev ,大致上你可以将它理解为一个非常前卫的组件托管市场,特别之处在于:它参考 shadcn/ui 的设计理念提供了一种原子化的,Code Out 形式的依赖安装、管理模式;并且更具有启发性的,它为每一个组件都提供了一套用于生成组件代码的 Prompt,用户可以借此在特定项目上下文中生成适配度更高的组件效果。 借助 21st.dev 与 cursor,我做了这样一个 demo: 这一切都是在 5min 内,不写一行代码的情况下实现的! 更值得称谓的是,21st.dev 的功能设计真正做到了 AI 友好,能够很好地应用在各类 AI 工具中(cursor、v0.dev、bolt.new、cline 等等),并且这套设计逻辑还非常适合复用到各种 TO-D 场景中,21st.dev 是什么21st.dev 是一个开源的 React  UI 组件市场,专门为设计工程师和前端开发者提供高质量的 UI 组件。
4/3/2025 9:04:19 AM
范文杰

安利五款超赞的开源 AI 前端组件库

前言在当今快速发展的前端技术领域中,开源项目一直扮演着举足轻重的角色。 它们不仅为开发者提供了丰富的工具和资源,还极大地促进了技术的创新和共享。 特别是在人工智能(AI)逐渐融入前端开发的今天,开源的AI前端组件库更是成为了提升开发效率、优化用户体验的重要利器。
5/6/2025 12:45:00 AM
大姚
  • 1