Imgcook 是一個(gè)由淘寶前端團(tuán)隊(duì)開(kāi)發(fā)的工具，可將設(shè)計(jì)稿（如Sketch、PSD、靜態(tài)圖片等）一鍵生成可維護(hù)的UI視圖代碼。

Imgcook 主要功能:

  • 多類(lèi)型設(shè)計(jì)稿轉(zhuǎn)代碼:將設(shè)計(jì)文件從插件導(dǎo)出數(shù)據(jù)去 imgcook 編輯器粘貼或直接在 imgcook 編輯器中上傳設(shè)計(jì)文件,如sketch,ps,figma等設(shè)計(jì)軟件均支持轉(zhuǎn)為代碼.

Imgcook(圖1)

  • 智能化精準(zhǔn)還原設(shè)計(jì):全鏈路采用計(jì)算機(jī)視覺(jué)、深度學(xué)習(xí)等智能化技術(shù)，合理的 DOM 嵌套結(jié)構(gòu)、相對(duì)定位布局、ClassName 語(yǔ)義化、循環(huán)自動(dòng)識(shí)別

Imgcook(圖2)

  • 官方支持 10 種類(lèi)型代碼生成:官方提供 React、Rax、Vue、小程序等 10 種 DSL 生成不同類(lèi)型代碼，用戶(hù)也可自定義 DSL 生成任何滿(mǎn)足自己需求的代碼

Imgcook(圖3)

  • 融入研發(fā)流程:提供多種方式，在代碼生成后和您的研發(fā)鏈路無(wú)縫連接

Imgcook 平臺(tái)特點(diǎn):

  • 高還原度：它能夠高度還原設(shè)計(jì)稿，使得設(shè)計(jì)師無(wú)需進(jìn)行還原走查，測(cè)試人員也不需要適配樣式。

  • 一鍵上線(xiàn)：開(kāi)發(fā)人員可以使用Imgcook生成的代碼快速上線(xiàn)，無(wú)需手動(dòng)切圖和編寫(xiě)樣式。

  • 生成可維護(hù)代碼：Imgcook 生成的代碼是可維護(hù)的，這有助于開(kāi)發(fā)人員進(jìn)行二次開(kāi)發(fā)和維護(hù)。

什么時(shí)候可使用imgcook呢?

imgcook廣泛應(yīng)用于前端開(kāi)發(fā)領(lǐng)域，特別是在需要快速迭代和高效協(xié)作的項(xiàng)目中。

據(jù)阿里官方數(shù)據(jù)顯示，imgcook在阿里巴巴集團(tuán)內(nèi)部得到了廣泛應(yīng)用。例如，在2019年天貓?zhí)詫氹p十一會(huì)場(chǎng)模塊的研發(fā)中，imgcook顯著提升了研發(fā)效率，代碼可用率達(dá)到了79.34%。此外，imgcook還被集成到阿里媽媽智能單坑制作和投放一體化平臺(tái)BOOM中，以及優(yōu)酷智能物料生成平臺(tái)Minion中，進(jìn)一步推動(dòng)了前端開(kāi)發(fā)的智能化和高效化。