推荐一款前端神器-UI稿可以智能生成前端代码

小IT跨界说
14,460 阅读7分钟

前言

每年的双十一、双十二购物狂欢节，我们都可以在各大电商平台看到漂亮且内容丰富的活动页面，而这些页面大部分也都是静态页面，只为商品提供一个购买的入口，前端程序员拿到设计稿后，便开始无聊繁琐的"切图"工作。

做为一名某跨境电商前切图仔的身份，深知还原设计稿这部分工作就如同"搬砖"，程序员的智力不应该体现在重复性地编写UI代码这项工作中，更应该用于业务逻辑、技术架构的处理。

所以说如果能够实现智能化布局来还原设计稿，那才是最有效的减轻“搬砖”工作量，于是前端智能化的概念也随之出现。

什么是前端智能化？

前端智能化就是AI在前端领域的一系列落地方案。基于设计稿生成代码，正是这一技术领域的新尝试，通过智能化手段提升前端的研发效能，直到2019年 D2 前端论坛发布了“www.imgcook.com”，前端智能化这个词才正式确立。

于是各类UI设计稿智能生成源代码的工具也应际而生，从2019年阿里imgbook发布后，58 Picasso、CodeFun等相继发布，工具有了，那么我们更多地去考虑设计稿的生成代码是否具有合理性、布局是否准确、还原度如何等问题。所以准备趁着当前的学习劲探索一下前端智能化，选用CodeFun进行体验一番！

CodeFun的介绍

CodeFun是一款 UI 设计稿智能生成源代码的工具，可以将 Sketch、Photoshop 的设计稿智能转换为前端源代码。

这是官方的定义，还说到其最大特点就是精准还原设计稿，不再需要反复 UI 走查，可以生成如工程师手写一般的代码，这不正是我们所追求的效果么？后面我们在项目实践上验证一下。

官方有一张这样有意思的贴图：

Before，正是我们现在在UI设计稿还原所遇到的困境。

After，CodeFun这类UI设计稿智能生成源代码的工具正是助我们走出这个困境的利器，怎么神奇的，迫不及待想尝试使用一下了。

设计稿格式与输出平台

体验前，我们先了解一下CodeFun的设计稿格式与输出平台。

目前主流的 UI 设计软件有 Sketch、Photoshop、XD 和 Figma，目前CodeFun对Sketch、Photoshop、Figma版本已完美支持，XD 使用过度方案转换成sketch格式即可使用。对于源代码输出也支持像微信小程序、H5、混合App等多终端多平台。

设计稿格式

设计稿格式操作方式支持程度备注
Sketch插件上传✅ 完美支持
PSD插件上传✅ 完美支持PS版本需要2018以上
Figma插件上传✅ 完美支持
即时设计插件上传🕜 内测中内测入口
XD插件上传🕜 即将支持XD过渡方案入口

设备终端和平台

设备平台支持程度框架/语言
微信小程序✅ 支持原生 / uni-app
移动端 H5✅ 支持Vue / React
混合 App✅ 支持uni-app / taro
桌面 Web🕜 后续支持
Android❌ 暂不支持
iOS❌ 暂不支持

项目体验

软件环境

  • 安装Adobe PhotoShop CC 2019
  • 安装微信开发者工具
  • 进入官网下载ps插件（下载地址：code.fun/download/）
  • 重启ps
  • PS菜单栏 -> 窗口 -> 扩展 -> CodeFun

上传设计稿

点击PS CodeFun插件的上传按钮

成功上传至CodeFun个人空间

下载代码

点击下载代码按钮，可以把代码下载至本地，对于代码平台可以选择小程序、React、Vue、Trao、H5uni-app，可以说目前市场常见代码平台都可以生成，同时可以支持Less、Sass，就连像素都可以选择rpx或是px，可以说这样的功能是相当强大的！

代码是否合理、布局是否准确

我们根据几张设计稿来分析一下CodeFun生成的代码是否具有合理性、布局是否准确性。

在分析前，我们先了解几个CodeFun的功能，

标记组件

  • 标记的组件节点会按照组件定义进行代码生成
  • 默认官方标签有Header、Footer、Fixed、List、Grid
  • 被标记的组件节点会展示标签名称
智能识别标签

CodeFun通过AI算法可以智能地对设计稿中类似列表、网格布局的设计部分，自动打上List、Grid标签，这样最终生成的代码，就很符合我们的预期。

验证一

现在我们打开Select Your Item的设计稿，并且选用输出的代码平台是微信小程序

可以看到中间组件部分会被自动识别成Grid标签，同时我们还能看到JS、JSON、WXML、WXSS各个面板的详细代码，这样的效果相当不错！

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 42rpx;
  column-gap: 22rpx;
}

这里要提一下，这个的AI算法识别还是相当准确，可以应用grid将我们的容器划分成了grid-template-columns: repeat(2, 1fr);，这样的布局方式也是我们所希望的。

生成的WXML代码结构也是比较合理

    <view class="grid">
      <view class="flex-col grid-item">
        <image
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/630f24c0e8a7a20011f03568/16619596688649449137.png"
          class="image_1"
        />
        <view class="flex-row justify-between group">
          <text class="text_1">Sample Select</text>
          <image
            src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/630f19655a7e3f0310ac26de/630f24c0e8a7a20011f03568/9c97417ca6d9af2893080728b10f323c.png"
            class="image_3"
          />
        </view>
      </view>
      <view class="flex-col grid-item_1">
        ...
      </view>
      <view class="flex-col grid-item_2">
        ...
      </view>
    </view>

UI的还原度也还不错，视觉比对

验证二

现在我们打开Search的设计稿，并且选用输出的代码平台是微信小程序

中间部分是一个列表，CodeFun可以自动识别成List标签组件，右下角，我们可以看到将 List 标签输出为循环列表、开启数据绑定输出模式,自动开启，我们可以看一下最终生成的代码是如何的？

Page({
  data: {
    list_ronpmvZ1: [null, null, null, null, null, null, null, null, null],
  },
  onShareAppMessage() {
    return {};
  },
});

  <view
      class="flex-row justify-between list-item group_4"
      wx:key="*this"
      wx:for-item="item"
      wx:for-index="i"
      wx:for="{{list_ronpmvZ1}}"
    >
      <view class="flex-row group_5 view">
        <image
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/630f24c0e8a7a20011f03568/16619596684705638677.png"
          class="image_3"
        />
        <text class="text_5">View All</text>
      </view>
      <image
        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/630f24c0e8a7a20011f03568/16619596686496129814.png"
        class="image_5"
      />
    </view>
  </view>

发现当我们将 List 标签输出为循环列表开启时，会自动将我们标记List的组件进行wx:for输出，同时开启数据绑定输出模式开启后，会自动绑定list_ronpmvZ1的数据输出，这样的功能也是我们梦寐以求的。

UI的还原度也还不错，视觉比对

通过上面两个验证，CodeFun在代码的合理性、布局的准确性、还原度，都相对不错！同时主要也介绍了Grid、List组件标签的作用，除了这两个标签，当我们需要设置顶部 header 或者底部固定 footer 时，只需将组件类型设置成 Header 或者 Footer 标签即可。

路由跳转

设置路由跳转也是十分简单，在当前设计稿页面，点击交互,选择跳转页面，选择要跳转的目标页面。

生成代码如下：

<image
  src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/630f24c0e8a7a20011f03568/16619596700756809787.png"
  class="image_4"
  bindtap="onClickImage_6"
/>

Page({
  onClickImage_6() {
    wx.navigateTo({ url: '/pages/six' });
  },
});

相当的智能，可以自动生成路由跳转代码，为我们节省不少工作量。

样式调整

我们可以在CodeFun的样式面板，直接调整样式，然后在左侧展示页，可以立刻响应出来，点击保存，下载代码，也可以拿到我们修改后的样式文件。

总结

以上只是关于CodeFun的部分功能，总体来说CodeFun功能是很强大的。利用高效的识别特点，大幅度帮助前端工程师从繁琐的页面切图中解放出来，通过较低的学习成本，让使用者能更加简单且高效的完成需求。虽然使用太过复杂的 UI 稿的时候，可能会存在生成效果的偏差，但其实也还好，我们可以通过在线的调整或是在生成的代码中，适当做一些调整即可，到这里，也不得不感慨一下AI算法的魅力，前端智能化在UI设计稿智能生成代码的领域的尝试也让人感到兴奋和期待，相信后面会越来越成熟，那么前端智能化的出现，切图仔会失业么？答案是不会的，我们只是用了类似CodeFun这一类的利器来帮助我们摸鱼，cool👍。

CodeFun体验地址：
注册链接：ide.code.fun/u/z3xxiqFt
优惠券链接：ide.code.fun/coupon/6315…
兑换码：CQTJ0905

avatar
文章
阅读
粉丝