这几年来 AI 来势汹汹，在部分领域应用也逐渐成熟。前端发展至今，我们也有许多成熟的前端解决方案代码，有大量的设计稿，我们是否能够结合智能化的能力将一个 Design 变成一个 Code （设计转代码，简称 D2C）来提效，让前端从一个资源型的角色中解放出来将精力投入到前端其他专业领域？淘宝 D2C 智能团队这两年围绕这个方向也做了许多的探索，最终将 D2C 的能力都承载到了 imgcook 这个产品上。这几年来，AI越来越普及，在一些领域的应用也逐渐成熟。到目前为止，我们也有很多成熟的前端解决方案代码和大量的设计稿。能否结合智能能力把一个设计变成一个代码(简称D2C)来提高效率，把前端从基于资源的角色中解放出来，把精力放到前端的其他专业领域？淘宝D2C智能团队这两年围绕这个方向做了很多探索，最终将D2C的能力承载到imgcook上。

更多信息

Imgcook下载链接，和用户指南，边肖已经为大家准备好了！

下载imgcook：https://imgcook.taobao.org/下载img库克:https://imgcook.taobao.org/

Imgcook用户指南:https://imgcook.taobao.org/docs

Imgcook是一位心灵手巧的厨师，擅长以各种图像(素描/PSD/静止图片)为原料进行烹饪。通过智能手段，一键将各种图片生成可维护的UI视图代码。我们希望这位imgcook未来能成为P5级别的重构工程师，能够有效提高开发效率，帮助开发、设计师、测试之间的高效合作。我们希望做到以下几点:

愿景:能够高度还原各种图像，释放UI开发的生产力，让你关注更有挑战性的事情！

对于 UI 还原而言，早在很多年前，类似的从设计稿中还原生成静态 UI 场景的解决方案也都涌现过，比如一些设计稿标注工具（如Marketch），又或者说目前的一些可视化建站平台也都能够在搭建完后直接产出线上页面，那么 imgcook 的优势体现在哪？对于UI还原，早在很多年前就出现了类似的从设计稿中还原生成静态UI场景的解决方案，比如一些设计稿标注工具(比如Marketch)，或者现在的一些可视化建站平台，可以在构建后直接输出在线页面，那么imgcook的优势在哪里呢？

回到UI还原的话题，当我们谈到图片生成代码的时候，我们关注的不仅仅是生成的UI的还原程度，还有生成的代码是否合理，是否可维护。如果生成的代码属于不可读、不可维护的快餐式代码，那么再次开发和使用将会异常困难，后者往往比前者更困难。如果需要在生产环境中使用，这个问题将不可避免。

对此，imgcook 的定位就在于解决 UI 还原以及生成可维护代码的问题。对此，imgcook的定位是解决UI还原和生成可维护代码的问题。

无约束设计草图+高缩减率

对于UI还原，目前常见的场景是从设计工具(比如素描、PS)入手。然而，不尽如人意的是，设计师交付的设计稿中的结构化信息往往是混乱的。如果需要对设计稿中某个模块的结构化数据进行精确分析，往往需要与设计师合作，在设计稿中规范设计并制定一些约束条件才能使用，这在一定程度上会增加使用成本。

为了解决这个问题，imgcook在设计稿的分析上做了一些智能化的处理，去除了对设计师的图层设计规范的依赖(当然好的设计规范会让修复效果更差！)，只留下一个开发人员可能用于UI还原的规范。

生成可维护的代码

对于可维护性代码的问题，imgcook 会对还原后的 UI 在代码层面上生成目前使用比较广泛的 Flexbox 布局以及相对定位布局，在一些自定义的命名上（比如样式命名），imgcook 也会根据开发者的习惯生成更加人性化的命名。对于可维护性代码，imgcook将生成Flexbox布局和相对定位布局，它们在代码级别广泛用于恢复的UI。对于一些自定义命名(比如样式命名)，imgcook也会根据开发者的习惯生成更加人性化的命名。

Imgcook目前的外部体验版本已经开放了草图设计和PSD设计的还原插件。以Sketch为例，整个导出过程如下:

1。插件导出模块

使用草图插件进行恢复时，您可以选择要导出的模块外层上的容器节点(画板、组或元件)。

2。粘贴并恢复

模块导出完毕后，可前往 imgcook 平台进行粘贴还原。导出模块后，可以去imgcook平台进行粘贴和恢复。

3。保存参考代码

检查模块还原 UI 以及左侧的布局结构无误后，可进行保存->查阅代码，目前对外的体验版中 imgcook 提供了几种可选择的 DSL 进行代码生成，对于每个 DSL，可在右侧的 playground 里查看具体运行的效果。检查恢复的模块UI和左边的布局结构正确后，就可以保存了->:检查代码。目前在外部体验版本中，imgcook提供了几个可选的DSL用于代码生成。对于每一个DSL，可以在右边的操场查看具体操作效果。

Imgcook从业务中诞生，最终服务于业务。

面向未来，imgcook 还在深耕更多的 UI 识别能力，诸如 Input/Table/Select 等前端基础控件识别、业界流行的 Antd/Fusion 等前端组件库识别，甚至可以为垂直业务定制独特的业务组件的识别能力，我们希望 imgcook 能真正给前端带来更多的提效能力。面向未来，imgcook还在培育更多的UI识别能力，如Input/Table/Select等前端基础控件识别，业界流行的Antd/Fusion等前端组件库识别，甚至为垂直业务定制独有的业务组件识别能力。我们希望imgcook能真正给前端带来更多的效率提升能力。

Imgcook目前还在体验版，还原不良案例和不合理的不良案例代码生成会有一些不确定性。请给我们反馈，我们将尽快收集和跟进问题。

反馈地址:问题

作者:涂(博本)