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

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

產(chǎn)品功能

生產(chǎn)級(jí)代碼

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

智能切圖

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

自動(dòng)字體檢測(cè)

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

循環(huán)布局識(shí)別

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

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

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

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

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

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

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

還原度高

• 項(xiàng)目實(shí)測(cè)設(shè)計(jì)稿的還原度中位數(shù)為0.95，完全可以達(dá)到生產(chǎn)交付標(biāo)準(zhǔn)，極大降低UI走查成本

如何使用

•  安裝

npm i -g @zuoyanart/lens

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

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