真效率神器，UI稿智能转换成前端代码，准确率极高

若川

发布于 2021-12-01 17:45:48

1.3K0

发布于 2021-12-01 17:45:48

大家好，我是若川。在这充满网络促销活动的几个月，倍感压力的，除了你的口袋，是否还有程序员的发量呢？每年的双十一、双十二购物狂欢节，各大电商平台都会上线让消费者充满购买欲望的活动页面，而这些活动页面大多都是静态页面，只是为一些商品提供一个入口，UI设计小姐姐设计完页面之后交给前端程序员，然后程序员就开始无聊繁琐的搬砖。如果有一款神器，可以直接将UI小姐姐的设计稿转换成页面代码，是否能让广大前端开发者大呼万岁

神器来了！

正常项目流程

使用神器之后

CodeFun是什么？ CodeFun 是一款 UI 设计稿智能生成源代码的工具，可以将 Sketch、Photoshop 的设计稿智能转换为前端源代码。它最大的特色是：

精准还原设计稿，不再需要反复 UI 走查
可以生成如工程师手写一般的代码

在日常工作中，诸如像扣像素、调布局这些繁琐、枯燥的体力活都将得到极大的削减，原来 8 小时的工作量只需要 10 来分钟即可完成。

扫码一键注册产品，限时免费体验

设计稿格式与输出平台

目前主流的 UI 设计软件有 Sketch、Photoshop、XD 和 Figma，目前 Sketch和PS 版本已完美支持，XD和Figma插件正在开发。

设计稿格式	操作方式	支持程度	备注
Sketch	插件上传	✅ 完美支持
PSD	插件上传	✅ 完美支持
SVG	Web 端文件上传	✅ 技术预览版	可以将 PSD / XD 先导出为 SVG 再上传
XD	插件上传	🕜 后续支持
Figma	插件上传	🕜 后续支持	目前可以导出为SVG格式再上传

设备终端和平台

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

安装插件

PS插件安装使用

CodeFun的ps插件最低支持到PS2018版本，所以大家在安装之前，要检查一下自己的ps版本哦！

进入官网下载 ps插件
双击下载的codefun.psplugin.v0.3.3.exe（Windows）或者codefun.psplugin.v0.3.3.pkg（macOS）安装包
重启ps
PS菜单栏 -> 窗口 -> 扩展 -> CodeFun

根据上操作，看到下图，说明PS插件安装成功啦！

然后扫码登陆，选中要上传的页面，点击上传就能在CodeFun的操作面板上看到刚刚上传的设计稿了

进入CodeFun的操作面板

Sketch插件安装使用

CodeFun的sketch插件最低支持到55版本，所以大家在安装之前，也要检查一下自己的sketch版本哦！

进入官网下载 sketch插件
解压下载的codefun.sketchplugin.v0.8.8.zip
双击codefun.sketchplugin安装插件
重启sketch
sketch菜单栏 -> 插件 -> CodeFun

代码智能生成！！

上面已经将CodeFun插件安装好了，接下来让我们感受一下CodeFun带来的神奇体验！我们准备了有接近100个页面的设计稿，来尝试一下生成这么多页面的效果如何！

上传完毕后，查看一下控制面板

我们选择一张个人中心的页面，这个页面的组成元素有grid网格布局，下面展示一下CodeFun的代码生成质量

Grid网格布局代码：

<view class="grid">
  <view class="grid-item flex-col items-center">
    <image src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613cb91e630da20011c12dc4/61863a440163bf0011e2b27b/16361874744191462784.png" class="image_6" />
    <text decode="decode" class="text_5">订单管理</text>
  </view>
  <view class="flex-col grid-item_1">
    <view class="flex-col items-center group_11">
      <image src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613cb91e630da20011c12dc4/61863a440163bf0011e2b27b/16361874745742912089.png" class="image_6" />
      <view class="flex-col items-center badge">
        <text decode="decode">2</text>
      </view>
    </view>
    <text decode="decode" class="text_8">报告管理</text>
  </view>
  <view class="grid-item flex-col items-center">
    <image src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613cb91e630da20011c12dc4/61863a440163bf0011e2b27b/16361874752451304870.png" class="image_6" />
    <text decode="decode" class="text_5">发票管理</text>
  </view>
  ……
  ……
</view>

网格布局css代码：

.grid-item {
  color: rgb(85, 87, 89);
  font-size: 24rpx;
  line-height: 33rpx;
  white-space: nowrap;
  padding: 20rpx 0 20rpx;
}
.image_6 {
  width: 64rpx;
  height: 64rpx;
}
.text_5 {
  margin-top: 16rpx;
}
.grid {
  padding: 28rpx 0 22rpx;
  background-color: rgb(255, 255, 255);
  border-radius: 4rpx;
  height: 354rpx;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
……
……

可以注意到上方css中，CodeFun是生成了grid-template-columns: repeat(4, 1fr)这种仿手写的代码，而不是使用绝对定位去实现的页面布局。

我们再选择一个含有list列表的页面，看一下CodeFun的识别情况

先上页面图

CodeFun对上图页面智能识别的代码：

<view class="flex-col list">
  <view class="list-item flex-col" wx:key="*this" wx:for-item="item" wx:for-index="i" wx:for="{{listQ1g7z4kX}}">
    <view class="top-group flex-col">
      <text decode="decode" class="text_2">这里是项目名称</text>
      <text decode="decode" class="text_4">河南省郑州市新郑市龙湖镇紫荆山南路正商智慧城1期智</text>
    </view>
    <view class="bottom-group justify-end">
      <view class="left-group flex-row">
        <image src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613cb91e630da20011c12dc4/61863a440163bf0011e2b27b/16361874665570194800.png" class="image_4" />
        <text decode="decode" class="text_6">编辑</text>
      </view>
      <view class="flex-row">
        <image src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/613cb91e630da20011c12dc4/61863a440163bf0011e2b27b/16361874698077815812.png" class="image_6" />
        <text decode="decode" class="text_8">删除</text>
      </view>
    </view>
  </view>
</view>

JS代码：

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

通过上方代码不难发现，CodeFun并没有生成很多冗余的列表代码，而是使用for循环去实现的。

再来体验一下CodeFun的数据绑定功能！

数据绑定生成的代码：

<text decode="decode">{{name}}</text>

// 小程序js部分
Page({
  data: { name: '你好，张小迪' },
  onShareAppMessage() {
    return {};
  },
});

CodeFun已经自动将数据绑定的代码生成！怎么样，这一套体验下来，有没有让你心动呢？不要着急，我们将这接近一百个页面的代码选择vue平台全部下载下来，然后跑起来看看是什么样的！

点击右上角下载代码，选择平台为vue，设置好首页点击下载
使用开发工具打开下载的项目
在项目运行npm install安装所需要的依赖
最后使用命令npm run serve运行项目

屏幕录制2021-11-06 下午5.47.58

项目顺利运行，并且底部的tabbar也都正常定位

我用十分钟完成了上面的操作，解决一百张页面的代码全部生成完毕！在用剩下的3天完成一些逻辑部分，怎么样？有没有被这个强大的智能代码生成震撼到呢？从此，前端工程师再也不用写无聊的静态样式代码啦！

效率

整体来说，从生成活动页面，和商城页面来说，基础样式布局是很完美的，节约了大量的时间成本，让开发者专注于业务逻辑的处理，将后端获取的数据直接渲染在页面上即可，不再因为UI小姐姐的繁琐布局而头疼，真正的提升了开发者的效率。

感受

面对如今活动平凡，花样繁杂的需求，配合使用codefun真正可以做到 部门领导 们要求的低成本、高效率、高产出。将前端工程师的时间花在刀刃上！重要的是codefun不管是针对UI设计师还是前端开发者都是零成本使用，设计师在设计时并不需要使用什么特别标注或者规范以供codefun识别，只需要根据自己的设计习惯将界面设计完成就好，codefun会根据其AI算法将设计文稿智能编组。前端工程师也只需要将生成代码复制或者下载使用即可。团队使用codefun之后也降低了开发和UI的沟通成本。设计文稿完成后直接用codefun上传，然后将项目跑起来和UI进行确定即可，而不是项目做了一半才发现布局的不合适。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2021-11-25，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js