AI 联动!现在前端都流行这样开发~ 效率提升 100%

语言: CN / TW / HK

大家好,我是 零一 ,在你的业务中有没有遇到很多跟 营销活动 相关的需求,一般这种需求有以下几个特点:

  1. 页面逻辑简单

  2. 页面样式风格不统一

  3. 反复性

尽管这些需求页面结构简单、逻辑不复杂,但也扛不住一星期写一个这样的需求,因为是个人都会觉得没有挑战性,毕竟只是 切图写样式加个跳转按钮 的事情

其实像这样的开发流程,已经有一套成熟的方案去解决了,那就是 设计稿智能生成源代码 ,它帮你省去了 切图写样式 的流程,你仅仅只需要关注页面中一些按钮点击后要干什么即可。甚至连 UI走查 的步骤都可以省去了,因为页面本身就是根据 UI 提供的设计稿还原生成的

这种开发方式在我们公司内部也已经推行很久了,确实节省了不少时间,今天给大家来演示一下这整套流程,一步步带你们体验~

因为没办法拿公司内的平台给大家演示,所以给大家推荐一个业界的设计稿智能生成源代码工具 —— CodeFun ,本文也用该工具给大家演示

先放一下该工具的网址,感兴趣的可以跟着我一步步尝试

CodeFun:https://code.fun/

前置工作

进到该网站并进行登录以后,可以先创建一个项目

然后选择一种方式导入我们的设计稿,CodeFun 支持通过插件将一些 UI设计平台 的设计稿导入。因为我平时用 Fgima 比较多,所以我在社区找了一套设计稿来做演示

安装好插件后,我们进入到设计稿中,选择我们想要生成的页面,然后点击菜单中的 Plugin,找到 CodeFun 插件

然后选择将该设计稿生成的页面导入到刚才我们创建好的项目中

2s 就上传好了

然后我们点击 "查看项目" 去看看。可以看到刚才设计稿中页面几乎是 1:1 还原出来了,而且从左侧的 DOM 结构来看,层级也非常清晰

借助 CodeFun 提供的 预览功能 ,我们看下放到浏览器里是什么样的效果

生成以后就会得到一个预览链接,点击后即可查看

整体看下来一点问题都没有,还原度非常得高~

开始使用

不是说设计稿还原代码吗?怎么还原出来的是个页面?别急,这个页面背后对应的代码也早已经自动生成了,我们可以点击右上角的 "查看代码"

我们也可以自己的技术栈选择不同框架的代码,目前支持的有 微信小程序uni-appVueTaroReact原生html

本文就以 React 的为例,我们将该页面对应的代码下载下来,添加一些额外的逻辑

因为页面中还有一个 " Buy " 的按钮,点击以后我们希望直接跳转到苹果官网的 iPhone14 购买页,因此我们在按钮元素上加个跳转逻辑

然后本地再跑一下页面,看下逻辑有没有问题

漂亮!没问题了,然后该咋上线就咋上线!

像这样的简化流程,全程不需要写切图、布局、写样式,上线营销页面不就是 有手就行 吗?

进阶使用

大家可能觉得刚才的页面比较简单,没法体现这个工具的优势,接下来拿个稍微复杂一些的页面给大家举例子,并展示一些其它功能。

我随便在 Figma 社区找了一个列表页面,接下来用 CodeFun 插件将它生成代码

循环列表

查看左侧的 DOM 结构,发现 CodeFun 在还原设计稿时,还通过 AI 只能识别了列表元素,并对其进行了标记,这种结构在我们代码里就是通过一个数组去遍历渲染的,看看它生成的代码是否也是这样

果然是通过 map 遍历生成的,不过有个问题就是当前生成的数据都是静态的

所以我们可以手动对列表元素里的单一内容命名一下,使其变成动态数据

点击上方工具栏里的 " 数据绑定 "

我们能看到 List 列表内的每个小元素都可以对其进行命名,因为 ListItem 结构统一,所以我们只需要对 ListItem-1 进行命名即可

命名完成并保存后,我们来看下对应的代码变成了什么样子

这样一来,数据就全变成动态的,是不是非常智能?

行为

另外,我看到这个页面顶部有一个 " 返回 " 的按钮,点击以后的行为肯定是返回上一个页面,对此 CodeFun 也提供了对应的行为给我们,可以直接在这个元素上添加返回到上一个页面的行为

组件化

在预览页面时,我发现页面中按钮的点击非常生硬,比如点击以后一点反馈都没有

我们知道很多组件库都有交互反馈,比如按钮组件,点击以后会有点击了的效果,CodeFun 其实也给我们提供了组件化的功能,既支持我们自定义组件,也支持使用 npm 包的组件库

而且默认也支持了一些原生组件和三方组件,这里我们就拿 Vue 框架的 vant2 组件库来举例子吧

在将对应的元素标记了 vant2 的 Button 组件后,右侧就可以对组件的各种属性进行设置了,属性的使用方式就跟 vant2 组件库的一致,因此我们可以去官网看使用方式

简单填写了一下组件属性

看下标记组件后的效果吧

可以看到,我们的按钮已经有交互的反馈效果了

总结

相信做前端的同学,哪一个也不想一直只做切图仔,如果本文介绍的 UI 设计稿智能生成代码 有戳中你的痛点,可以尝试引入到自己的工作中,看看是否能帮你释放大量的人力,让你有更多的时间聚焦到业务逻辑中,把大部分的页面都交给AI工具。

市面上已经有很多的同学都开始尝试 UI 设计稿智能生成代码了(包括我),如果你对这套方案还有什么疑问,想跟大家交流的,可以进群跟大家进行互动~ :point_down:

注册链接 :https://ide.code.fun/u/6u16QeO0

优惠券链接 :https://ide.code.fun/coupon/63295a92e39132001169072e

兑换码 :QDYX0920

  赶紧点击体验吧!