一款适合普通人上手的AI编程工具,支持可视化编辑!(附实测案例)

HTML开发工具

大家好,我是X小鹿~

之前分享过很多可以一句话编程的 AI 工具。比如阿里通义的「代码模式」、QwenChat 的「网页开发」、腾讯元宝的「AI编程」等等。(往期文章链接贴文末了,对 AI 编程感兴趣的可以看看)

这些 AI 工具,都是非常适合普通人上手的。不需要懂技术,也不需要安装配置各种烦人的编译环境。靠大白话,就能搓出个差不多的东西出来。

一句话开发一个小游戏、一个网站、一个小工具,在 AI 时代,并不是一件新鲜的事。

比如下面这些,都是用 AI 一句话生出来的。

周末陪娃玩,又没啥新花样?可以直接和 AI 说:“做个打地鼠的游戏”,代码、游戏,瞬间搞定,直接就能玩!

picture.image

再比如,“写一个帮助小学生理解成语的互动小游戏”:

picture.image

还可以一句话生交互式的教学演示。过去磨半天的活儿,现在几秒钟搞定!

picture.image

最近豆包的 AI 编程功能又升级了,我也去玩了一下。

一通测试后,主要功能和其他同类产品并没有太大不同。但这次更新的最大亮点,是它的「可视化编辑」功能!

豆包支持直接在生成的界面上修改文字、替换图片,还可以框选出局部元素单独调整。

一起来看看吧~

打开豆包(电脑网页版、或桌面端应用)后,在首页就能看到「AI 编程应用创作1.0」:

picture.image

点进去后,可以先在「查看更多」里,看看豆包官方示例。

比如小游戏、产品原型设计、网站设计等等,都可以用豆包的 AI 编程功能一句话搞定。

picture.image

在输入框中,描述你想让豆包帮你生成的内容,就可以坐等豆包出结果了。

picture.image

可以看到,左侧,是我们提需求的地方,支持多轮提出修改意见;

右侧,是豆包生成的代码和界面。

① 历史版本

每次修改,豆包都会生成一个新的版本。想看以前的版本,可以很方便地快速切换回去。

② 下载

可以把代码下载到本地。

而且豆包和 Trae 是打通的,毕竟豆包和 Trae 都是字节自己的产品,所以它允许用户把豆包生成的代码,使用 Trae 打开来继续修改,这点是比较好的。

③ 分享

可以生成公开访问的网页,方便分享给其他人。

④ 编辑

和其他一句话编程工具相比的最大优势。

点「编辑」进入编辑模式后,界面上所有的元素都可以框选住,然后单独对它进行修改。

可以修改文字样式跳转逻辑模块位置图片等等。

比如下面这个,将“钢琴模拟器”修改为“虚拟钢琴模拟器”,同时删除下面一行英文。

picture.image

你可以像改 PPT 一样直接在画面上改就行了,而不用重新生成。而且豆包的修改可以「一次修改多处」,还是「实时保存」的。

picture.image

你还可以直接在界面上一键替换图片。

比如,中间这张图片和其他图片风格不符,其他都是风景类图片。

那么可以用豆包的 AI 生图、或网上搜索、或上传本地图片的方式,来直接一键更改原图片。

picture.image

picture.image

最后来看几个用豆包的「AI 编程」功能生成的案例吧:

提示词:生成一个钢琴模拟器的HTML页面

视频没法上传,可以在原文中看:原文

picture.image

提示词:生成一个抛物线的互动式教学网页

picture.image

豆包 AI 编程的这次更新,整体使用下来,体验还是不错的。

与其他「一句话生成应用」的 AI 工具相比,豆包 AI 编程除了具备「可视化编辑」这一显著亮点外,对于相同的提示词,豆包生成内容,也更为丰富。

虽然豆包做出来的应用,只提供前端页面及交互,不涉及后端数据等。

但对于大部分之前没有接触过编程的人来说,已经能满足很多日常需求了。

比如用豆包开发一些寓教于乐的小游戏,或者职场提效小工具等等,都是不错的

感兴趣的可以试试~


我是X小鹿,前互联网大厂程序员,自由职业 3 年+,也是一名 AIGC 爱好者,持续分享更多实用的 AI 工具和技巧。期待和大家一起交流~

0
0
0
0
评论
未登录
看完啦,登录分享一下感受吧~
暂无评论