zuoyan-lens設(shè)計稿-網(wǎng)頁轉(zhuǎn)換工具

zuoyan lens 是一個通過智能算法將設(shè)計稿轉(zhuǎn)換為前端頁面的產(chǎn)品（design to code），可以一鍵將 Sketch、Photoshop 的設(shè)計稿轉(zhuǎn)換為可維護的前端代碼。100個page的工作量10分鐘內(nèi)即可輕松搞定，極大釋放前端生產(chǎn)力。

產(chǎn)品功能

生產(chǎn)級代碼

• 通過智能算法推算出和手寫代碼一樣的結(jié)構(gòu)和css邏輯，產(chǎn)出的代碼約等于一個中級前端的水平
• 全flex布局
• 根據(jù)元素所處的環(huán)境， 自動修正像素誤差，符合設(shè)計表達。
• 代碼可閱讀、可維護.

智能切圖

• 自動生成透明png切圖， 不需要設(shè)計或開發(fā)手動切圖導(dǎo)圖
• 自動生成icon svg文件， 可直接上傳到iconfont等作為字體圖標使用，亦可轉(zhuǎn)為svg雪碧

自動字體檢測

• 自動檢測設(shè)計稿字體，如果字體缺失會自動提示安裝， 如果字體不一致會影響到頁面還原度，不方便安裝的字體，可以讓設(shè)計師合并圖層

循環(huán)布局識別

• 自動識別list，grid等布局方式
• 獨有結(jié)點空間結(jié)構(gòu)匹配算法， 能精確推算循環(huán)體，而且性能表現(xiàn)優(yōu)異

跨平臺，系統(tǒng)無關(guān)

• 兼容所有平臺，windows和linux上也可以解析Sketch文件

設(shè)計師學(xué)習(xí)成本為0

• 只需要準守正常的設(shè)計規(guī)范即可， 其他無任何要求

開放DSL轉(zhuǎn)換，可以自由定義輸出

• 采用GoGoCode來做AST轉(zhuǎn)換, 可以自由定義輸出語言，語法， 比如轉(zhuǎn)為：React， 微信原生，Vue，uniapp，taro，RN等

還原度高

• 項目實測設(shè)計稿的還原度中位數(shù)為0.95，完全可以達到生產(chǎn)交付標準，極大降低UI走查成本

如何使用

•  安裝

npm i -g @zuoyanart/lens

• 切換到項目目錄執(zhí)行命令

lens g [platform]  //platform: h5 or uniapp