优品街是一款以区域化城市生活服务类 app，为用户提供商户信息、消费点评、拍摄短视频及消费优惠等信息服务。
设计师使用了设计物料管理、设计稿图层标记、图层解析等能力，与前端高效协作，减少了很多跟前端不必要的沟通时间。
从 2020-05-25 到 2021-06-03，在 imgcook 创建模块数量达 1100+，覆盖 20+ 前端项目。
使用效果
- 时间：从 2020-05-25 到 2021-06-03
- 使用情况：在 imgcook 创建模块数量达 1100+，覆盖 20+ 前端项目。
- 使用人群：设计师主导，前端使用
- 使用人数：1 位设计师，对接 4 个前端
- 页面示例：
为什么用 imgcook？
imgcook 可以帮助前端高度还原设计稿，减少设计师与前端不必要的沟通，例如字体大小、颜色、模块之间行间距高度等，自动生成代码也能提高前端生产力。
设计步骤
第 1 步：加工设计物料
设计师可以在 imgcook 后台中上传设计物料，在上传设计物料所在团队的设计同学可以使用 imgcook sketch 插件共享一套设计物料，方便设计规范统一。
在将设计稿生成代码时，统一和规范的设计稿可以让生成代码的可维护性更好。
1、根据目录命名
按照设计物料官方文档，做好命名，在 Sketch 中会按照命名拆分目录。
2、调整设计稿
用 Sketch 编组 & 用 imgcook 插件成组
这里用到了成组协议，会先把文件编组好，然后再加上成组协议，这样生成代码时，会按照 #group# 生成嵌套结构，生成的代码结构就是自己定义的嵌套结构，但用 imgcook 也可以自动生成比较合理的嵌套结构。
因为设计师比较熟悉 Sketch 了， 这个操作设计师来做的话就比较熟练了，但是有个问题是需要懂点前端代码的层级结构。这个操作用的不多，如果没有一些冗余的图层，自动生成的结构也比较合理，所以一般也用不到。
用 imgcook 插件合并图片
我们在设计视觉稿时，一张图会用很多图层来组成，但在前端代码中是要求用一张图的，比如下载这个图标。imgcook 提供了一个设计稿协议，可以给这多个图层组成的文件夹添加一个#merge#合并图片标记，这样导出时就会生成一张图片。
3、 设置类名
这个是应开发要求添加的，给图层添加个语义名称，前端可以用来做 class 类名，这个设计师比较好理解，我们这个组件基本都添加了类名，这样在使用这些物料设计时就不用再添加了。
另外也可以添加类名前缀等等。
4、设置导出图片格式
按照 设计稿高级标记规范 设置图片导出格式，这个我们设计师用的比较多，对线上页面的图像格式有要求。
第 2 步：上传设计物料
在 imgcook 中创建一个设计组，按照文档上传 sketch 文件就好。
第 3 步：使用设计物料设计页面
物料上传之后，需要在 设置 里面切换到自己的设计组，然后就可以直接拖入使用了。如果没有更新，可以右键重载下。
在设计页面时，也会按照上面加工设计物料的方式加工下设计稿。
第 4 步：使用 imgcook sketch 插件生成模块
设计好了之后，可以解析设计稿然后生成链接，把链接发给前端。
第 5 步：将模块交付给前端使用
前端打开连接，可以查看代码了。
研发步骤
在 imgcook 编辑器中复制或导出代码到本地的工程项目中。
官方推荐可以使用 imgcook cli 和 plugin 将生成的代码用命令行的方式直接导入工程项目。
使用了哪些 imgcook 能力？
Sketch 插件设计物料管理能力
imgcook 支持用户上传自己的设计物料， 对于有自己设计规范和设计组件的团队很适合，一方面方便设计协同，另一方面可以规范统一团队的设计规范。
在生成代码方面，可以在物料设计时就统一添加开发同学需要的图层标记，比如类名前缀、图像格式等，团队内多个设计师在设计 UI 时就不需要再关心这些，UI 设计完成后，导出生成的代码就具有统一规范的类名前缀和期望的图像格式。
也就是说，设计物料的管理能力更加规范了代码生成的设计输入，同时对于生成代码有定制需求比如类名前端、图像格式等，可以以最小的成本统一在物料设计时就做好图层标注。
Sketch 插件设计稿标记能力
imgcook 在导出设计稿时默认是 png 图像，我们期望是 svg 格式；另外前端同学期望导出的代码类名有业务相关前缀；在有一些场景下 imgcook 还不能解决的问题比如多个图层组成的背景图，需要将这这个图层用 imgcook 提供的 #merge# 协议手动标记一下，就可以导出为一张图像等等。
总的来说，就是一些 imgcook 在自动生成代码时一些不能满足我们需求的场景，都可以用 设计稿高级标记规范 人工标记设计稿的方式来解决，这样在这些场景也能生成可维护性很高的代码。
用的比较多的标记协议有：
- 标记图片导出格式
- 标记类名
- 合并图片，一些由多个图层设计而成的氛围图、背景图、大图标建议可以合并下
- 成组
imgcook 代码导出能力
从 imgcook 编辑器中复制或导出代码。
向团队介绍 imgcook
如果希望团队用上 imgcook D2C 能力，但又不知道如何介绍 imgcook，我们帮你准备好了介绍文案和 PPT，快来自取吧~
1、组织一个分享会
我们可以将团队同学们召集在一起，组织一个团队内部的分享会，介绍下研发提效利器 imgcook。
2、播放 imgcook 的产品介绍视频
可以播放一下 imgcook 的产品介绍视频，让大家对 imgcook 的功能有一个全方位的了解。视频链接：
或者您也可以直接在 imgcook 网站现场演示。
介绍文案：
imgcook 是阿里巴巴对外开放的一个设计稿智能生成代码平台，可以将 Sketch、PSD、Figma、图片等类型的设计稿一键生成可维护的前端代码，例如 React、Vue、小程序等，还可以自定义生成的代码。
我们可以安装 Sketch、Photoshop、Figma 插件使用插件导出图层数据到 imgcook 或者直接在 imgcook 编辑器中上传设计稿文件解析，然后在imgcook 编辑器中查看生成的代码。
3、详细介绍 imgcook 使用动线
介绍文案：
- 1、导入设计稿，支持从 imgcook 插件导出生成代码或上传设计稿文件解析生成代码两种方式。
- 2、提供设计稿协议支持用户人工标记图层来生成代码（对于目前imgcook处理不是很好的场景都可以用这种方式解决）
- 3、imgcook 智能生成的原理是将描述设计稿文件的 JSON Schema 经过设计稿协议、程序算法和机器学习算法的分析、计算和识别，转换成一个具有合理的 Flex 布局嵌套结构和代码语义的 imgcook JSON Schema，然后再将这个 Schema 用各种不同 DSL 转换函数转换成各种不同类型的前端代码。
- 4、imgcook JSON Schema 可以在 imgcook 编辑器中查看，我们可以在可视化编辑器中修改视图、样式等，本质是修改这个 JSON Schema。
- 5、查看代码，本质是将最终的 imgcook JSON Schema 输入给自定义的 DSL 转换函数，函数的输出就是前端代码。
4、可以举例说说哪些团队是如何使用的
本文档有一些用户使用案例，可以给大家看一下，包括 imgcook 开放的能力。后续用户案例会在 imgcook 官网透出。
5、了解 imgcook 的小缺陷，可以帮助更好的使用
imgcook 虽然能够自动生成可维护性较高的代码，但设计稿图层千变万化，有一些场景目前还没有覆盖到。例如：
- 设计稿关联图层合并问题：氛围、背景、图标等在设计稿中由多个图层组成，生成代码是需要合并导出成一张图片
- 布局合理性问题：imgcook 生成的布局嵌套结构不合理或不符合预期
- UI 逻辑代码生成问题：设计稿中的数据是静态的，实际线上数据是动态的，会带来一些 UI 的变化，但这些 UI 变化在设计稿转代码时无法获知
对于这些问题，imgcook 提供了设计稿协议支持用户手动干预图层的方式来解决，也可以在生成之后在 imgcook 编辑器中可视化调整。
6、了解更多
imgcook 有钉钉用户群，如果使用上有问题可以在群里提问。可以关注 imgcook 官网和掘金账号关注进展。
用户案例征集
如果您的团队接入了 imgcook 提供的 D2C 服务或者您自己有使用 imgcook 的心得，欢迎在本文评论区留言或直接贴上文章链接（ATA、掘金、知乎等技术分享网站均可）。
将有机会获得 imgcook 定制礼品。
