开头写什么是Sketch？哪些场景需要智能代码生成？智能开发，代码生成原理是什么？什么是Sketch插件以及如何开发它？（请看公众号的第二篇文章，京东凹凸实验室的文章，Sketch插件开发实践）带着这些问题，我们来看这篇文章环境准备MAC系统，Skecth软件，Skecth插件，imgcook官网https：//imgcook.taobao.org/Skecth推荐使用破解版。网上搜到这个，启动Skecth，下载安装imgcook插件，然后倒入你的Sketch工程，选择对应模块，数据无处不在。由于我这里负责的业务比较敏感，所以就以官方案例的Skecth文件为例。正式开始导入对应的Skecth文件，选择对应需要生成的模块，选中，点击ExportData。导出成功后，会将相关数据写入系统粘贴版。这个时候我们读出{"type":"Block","id":"Block_1","__VERSION__":"2.0","props":{"style":{"width":750,"height":348},"attrs":{"x":0,"y":0}},"children":[{"__VERSION__":"2.0","props":{"style":{"width":750,"height":348,"backgroundColor":"rgba(255,255,255,1)","overflow":"hidden"},"attrs":{"x":0,"y":0}}"selfId":"70CC9868-1AC8-486E-84E3-75887F3A10A6","children":[],"nodeLayerName":"Rectangle","type":"Shape","id":"Shape_0"},{"__VERSION__":"2.0","props":{"style":{"width":364,"height":80,"color":"rgba(153,153,153,1)","fontFamily":"PingFangSC","fontSize":26,"fontWeight":300,"lineHeight":40,"opacity":1},"attrs":{"x":354,"y":88,"text":"画面清晰流畅，佩戴舒适，操作简单，给您优质的用户体验","lines":2}},"selfId":"25E60004-A8C6-4691-81A3-CDA67EEF76D70","nodeLayerName":"画面清晰流畅，佩戴舒适，操作方便，可以给你","type":"Text","id":"Text_1_0"},{"__VERSION__":"2.0","props":{"style":{"width":39,"height":28,"color":"rgba(34,170,255,1)","fontFamily":"平安SC","fontSize":24,"fontWeight":400,"lineHeight":28,"opacity":1},"attrs":{“x”：687，“y”：284，“text”：“152”，“lines”：1}}，“selfId”：“4BD9A28A-CCE8-4E25-9051-77FDEB978EFD0”，“nodeLayerName”：“152","type":"Text","id":"Text_2_0"},{"__VERSION__":"2.0","props":{"style":{"width":36,"height":36}"attrs":{"x":642,"y":280,"source":"https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/4543191097ed11eaab429db2572494df.png","originStyles":{"backgroundColor":"rgba(34,170,255,1)"}}},"selfId":"07F98BC9-BC4E-473C-B20F-20380FBCA7B5","children":[],"nodeLayerName":"组合形状","type":"Image","id":"Image_3"},{"__VERSION__":"2.0","props":{"style":{"width":288,"height":34,"Color":"rgba(51,51,51,1)","fontFamily":"平安SC","fontSize":30,"fontWeight":600,"lineHeight":34,"opacity":1},"attrs":{"x":354,"y":40,"text":"HPMR混合现实眼镜","lines":1}},"selfId":"1CC6F0E4-0531-4836-8857-D4DF39FC8CA50","nodeLayerName":"HPMR混合现实眼镜","type":"Text","id":"Text_4_0"},{"__VERSION__":"2.0","props":{"style":{"width":300,"height":300,"overflow":"hidden"},"attrs":{"x":24,"y":24,"source":"https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/45c2f77097ed11ea9ffb4d12d04995ca.png","originStyles":{"backgroundColor":"rgba(0,0,0,0.02)","borderTopLeftRadius":12,"borderTopRightRadius"：12，“borderBottomRightRadius”：12，“borderBottomLeftRadius”：12}}}，“selfId”：“20DE93EB-3C70-4903-AA0E-5474EEA9E014”，“children”：[]，“nodeLayerName”：“矩形2副本”,"type":"Image","id":"Image_5"},{"__VERSION__":"2.0","props":{"style":{"width":300,"height":300},"attrs":{"x":24,"y":24,"source":"https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/4764c09097ed11ea8f4f8bb23c14090e.png"}},"selfId":"281A54D6-33E9-4186-8A4E-313B1D2FCCC9","children":[],"nodeLayerName":"Bitmap","type":"Image","id":"Image_6"}],"layerProtocols":[],"artboardImg":"https://ai-sample.oss-cn-hangzhou.aliyuncs.com/test/44c584a097ed11ea84362f052c062532.png","taskId":"445C667DA4BE50E086C299DD221AA5F6-1589685595582","name":"Group8Copy23","pluginVersion":"2.2.0","re??ference":"sketch"}这是导出的数据，我们点击粘贴后，会自动帮我们打开网站，然后把数据粘贴到空白处，然后imgcook帮我们把数据以可视化的形式呈现出来，这时候可以配置布局，事件，样式等等，比如我需要添加事件这个时候上图，在模型的形式下，我们公司的移动端也可以开发一些功能，这样生成代码，我们把代码写好了，点击保存这个，需要创建对应的组织和项目保存之前，保存成功后，可以一键生成各种代码。生成的代码质量和样式还原这是刚刚生成的React规范JS代码，样式文件'usestrict';importReact,{Component}from'react';importstylesfrom'./style.js';classBlock_0extendsComponent{render(){return(
