真效率神器！UI 稿智能轉(zhuǎn)換成前端代碼，準(zhǔn)確率達(dá)99%
在這充滿網(wǎng)絡(luò)促銷活動(dòng)的幾個(gè)月，倍感壓力的，除了你的口袋，是否還有程序員的發(fā)量呢？每年的雙十一、雙十二購物狂歡節(jié)，各大電商平臺(tái)都會(huì)上線讓消費(fèi)者充滿購買欲望的活動(dòng)頁面，而這些活動(dòng)頁面大多都是靜態(tài)頁面，只是為一些商品提供一個(gè)入口，UI設(shè)計(jì)小姐姐設(shè)計(jì)完頁面之后交給前端程序員，然后程序員就開始無聊繁瑣的搬磚。如果有一款神器，可以直接將UI小姐姐的設(shè)計(jì)稿轉(zhuǎn)換成頁面代碼，是否能讓廣大前端開發(fā)者大呼萬歲？
神器來了！
正常項(xiàng)目流程
使用神器之后
CodeFun是什么？
CodeFun 是一款 UI 設(shè)計(jì)稿智能生成源代碼的工具，可以將 Sketch、Photoshop 的設(shè)計(jì)稿智能轉(zhuǎn)換為前端源代碼。它最大的特色是：
精準(zhǔn)還原設(shè)計(jì)稿，不再需要反復(fù) UI 走查 可以生成如工程師手寫一般的代碼 在日常工作中，諸如像扣像素、調(diào)布局這些繁瑣、枯燥的體力活都將得到極大的削減，原來 8 小時(shí)的工作量只需要 10 來分鐘即可完成。
官網(wǎng)鏈接掃碼進(jìn)入
限時(shí)注冊，免費(fèi)體驗(yàn)
設(shè)計(jì)稿格式與輸出平臺(tái)
目前主流的 UI 設(shè)計(jì)軟件有 Sketch、Photoshop、XD 和 Figma，目前 Sketch和PS 版本已完美支持，XD和Figma插件正在開發(fā)。
| 設(shè)計(jì)稿格式 | 操作方式 | 支持程度 | 備注 |
|---|---|---|---|
| Sketch | 插件上傳 | ? 完美支持 | |
| PSD | 插件上傳 | ? 完美支持 | |
| SVG | Web 端文件上傳 | ? 技術(shù)預(yù)覽版 | 可以將 PSD / XD 先導(dǎo)出為 SVG 再上傳 |
| XD | 插件上傳 | ?? 后續(xù)支持 | |
| Figma | 插件上傳 | ?? 后續(xù)支持 | 目前可以導(dǎo)出為SVG格式再上傳 |
設(shè)備終端和平臺(tái)
| 設(shè)備平臺(tái) | 支持程度 | 框架/語言 |
|---|---|---|
| 微信小程序 | ? 支持 | 原生 / uni-app/taro |
| 移動(dòng)端 H5 | ? 支持 | vue /react |
| 混合 App | ? 支持 | uni-app / taro |
| 桌面 Web | ?? 后續(xù)支持 | vue / react |
| 原生iOS | ? 暫不支持 | |
| 原生Android | ? 暫不支持 |
安裝插件
PS插件安裝使用
CodeFun的ps插件最低支持到PS2018版本，所以大家在安裝之前，要檢查一下自己的ps版本哦！
進(jìn)入官網(wǎng)下載 ?ps插件 雙擊下載的 codefun.psplugin.v0.3.3.exe（Windows）或者codefun.psplugin.v0.3.3.pkg（macOS）安裝包重啟ps PS菜單欄 -> 窗口 -> 擴(kuò)展 -> CodeFun
根據(jù)上操作，看到下圖，說明PS插件安裝成功啦！
然后掃碼登陸，選中要上傳的頁面，點(diǎn)擊上傳就能在CodeFun的操作面板上看到剛剛上傳的設(shè)計(jì)稿了
進(jìn)入CodeFun的操作面板
Sketch插件安裝使用
CodeFun的sketch插件最低支持到55版本，所以大家在安裝之前，也要檢查一下自己的sketch版本哦！
進(jìn)入官網(wǎng)下載 ?sketch插件 解壓下載的 codefun.sketchplugin.v0.8.8.zip雙擊 codefun.sketchplugin安裝插件重啟sketch sketch菜單欄 -> 插件 -> CodeFun
代碼智能生成！！
上面已經(jīng)將CodeFun插件安裝好了，接下來讓我們感受一下CodeFun帶來的神奇體驗(yàn)！我們準(zhǔn)備了有接近100個(gè)頁面的設(shè)計(jì)稿，來嘗試一下生成這么多頁面的效果如何！
上傳完畢后，查看一下控制面板
我們選擇一張個(gè)人中心的頁面， 這個(gè)頁面的組成元素有g(shù)rid網(wǎng)格布局，下面展示一下CodeFun的代碼生成質(zhì)量
Grid網(wǎng)格布局代碼：
<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">2text>
??????view>
????view>
????<text?decode="decode"?class="text_8">報(bào)告管理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">發(fā)票管理text>
??view>
??……
??……
view>
網(wǎng)格布局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)這種仿手寫的代碼，而不是使用絕對定位去實(shí)現(xiàn)的頁面布局。
我們再選擇一個(gè)含有l(wèi)ist列表的頁面，看一下CodeFun的識(shí)別情況
先上頁面圖
CodeFun對上圖頁面智能識(shí)別的代碼：
這里是項(xiàng)目名稱
河南省鄭州市新鄭市龍湖鎮(zhèn)紫荊山南路正商智慧城1期智
編輯
刪除
JS代碼：
Page({
??data:?{?listQ1g7z4kX:?[null,?null,?null,?null,?null,?null,?null]?},
??onShareAppMessage()?{
????return?{};
??},
});
通過上方代碼不難發(fā)現(xiàn)，CodeFun并沒有生成很多冗余的列表代碼，而是使用for循環(huán)去實(shí)現(xiàn)的。
再來體驗(yàn)一下CodeFun的數(shù)據(jù)綁定功能！
數(shù)據(jù)綁定生成的代碼：
"decode">{{name}}</text>
//?小程序js部分
Page({
??data:?{?name:?'你好，張小迪'?},
??onShareAppMessage()?{
????return?{};
??},
});
CodeFun已經(jīng)自動(dòng)將數(shù)據(jù)綁定的代碼生成！怎么樣，這一套體驗(yàn)下來，有沒有讓你心動(dòng)呢？不要著急，我們將這接近一百個(gè)頁面的代碼選擇vue平臺(tái)全部下載下來，然后跑起來看看是什么樣的！
點(diǎn)擊右上角下載代碼，選擇平臺(tái)為vue，設(shè)置好首頁點(diǎn)擊下載 使用開發(fā)工具打開下載的項(xiàng)目 在項(xiàng)目運(yùn)行 npm install安裝所需要的依賴最后使用命令 npm run serve運(yùn)行項(xiàng)目
項(xiàng)目順利運(yùn)行，并且底部的tabbar也都正常定位
我用十分鐘完成了上面的操作，解決一百張頁面的代碼全部生成完畢！在用剩下的3天完成一些邏輯部分，怎么樣？有沒有被這個(gè)強(qiáng)大的智能代碼生成震撼到呢？從此，前端工程師再也不用寫無聊的靜態(tài)樣式代碼啦！
效率
整體來說，從生成活動(dòng)頁面，和商城頁面來說，基礎(chǔ)樣式布局是很完美的，節(jié)約了大量的時(shí)間成本，讓開發(fā)者專注于業(yè)務(wù)邏輯的處理，將后端獲取的數(shù)據(jù)直接渲染在頁面上即可，不再因?yàn)閁I小姐姐的繁瑣布局而頭疼，真正的提升了開發(fā)者的效率。
感受
面對如今活動(dòng)平凡，花樣繁雜的需求，配合使用codefun真正可以做到 部門領(lǐng)導(dǎo) 們要求的低成本、高效率、高產(chǎn)出。將前端工程師的時(shí)間花在刀刃上！重要的是codefun不管是針對UI設(shè)計(jì)師還是前端開發(fā)者都是零成本使用，設(shè)計(jì)師在設(shè)計(jì)時(shí)并不需要使用什么特別標(biāo)注或者規(guī)范以供codefun識(shí)別，只需要根據(jù)自己的設(shè)計(jì)習(xí)慣將界面設(shè)計(jì)完成就好，codefun會(huì)根據(jù)其AI算法將設(shè)計(jì)文稿智能編組。前端工程師也只需要將生成代碼復(fù)制或者下載使用即可。
團(tuán)隊(duì)使用codefun之后也降低了開發(fā)和UI的溝通成本。設(shè)計(jì)文稿完成后直接用codefun上傳，然后將項(xiàng)目跑起來和UI進(jìn)行確定即可，而不是項(xiàng)目做了一半才發(fā)現(xiàn)布局的不合適。
更多詳情和疑問，可以加群獲取技術(shù)支持哦！