腾讯无极低代码跟练——AI生成官网页面

78 阅读2分钟

上一期视频简单使用了一下AI生成代码的能力,总体感觉不错,看到这期视频直接用AI生成了完整页面,为了搞清楚与体验过的其他产品有什么区别,我也上手尝试了一下无极的AI能力。

新建页面

创建一个新页面,在通用组件中找到AI代码块组件,并拖拽到画布上

image.png

将需要生成的内容输入到对话框中,这里我生成的也是跟视频中相同的官网页面,参照视频和使用文档生成的大致样式。

copy视频中的prompt

参考使用文档中的建议,分模块生成便于后面修改

image.png 可以看到AI将我输入的prompt,都已经划分好相应模块,并对于各个模块有了简单的组件选择和布局安排。当然各个模块可能还存在一些小问题,因为我们对页面进行了分模块,所以可以对于各个模块直接进行调整。 例如

  • 导航栏修改

可以在数据源处添加上已经设计好的logo,AI可以直接将设计稿进行复原。

image.png

  • 附图说明

也可以上传参考图,让AI生成类似的结构。这里我觉得AI直接生成的卡片布局样式过于简单,于是上传了一个比较喜欢的风格卡片让AI参考,他参考模仿样式的能力还不错。

image.png

  • 绑定数据

将之前创建的活动表也绑到页面上,让AI可以直接将数据应用到页面中,这样整个页面看起来会更加整洁美观啦~

image.png

整个过程非常容易上手并且完全不需要对程序进行操作,只需要跟AI对话,全部程序由AI实现,并且不满意的地方还可以多次调整。

对于这种简单的页面,即使没有开发基础也可以很容易的上手实现,从0—1落地完全不求人,你只负责想象其他的交给AI!