Imgcook,这款由阿里巴巴大淘宝技术团队倾力打造的设计稿智能生成前端代码(D2C,Design to Code)平台,正在引领设计到代码转化的新潮流。该平台专注于将Sketch、PSD、静态图片等视觉稿作为输入,通过先进的智能化技术,一键生成高质量、可维护的前端代码,涵盖了视图代码、数据字段绑定、组件代码和部分业务逻辑代码等关键元素。

image.png


  • 一键代码生成

    ​Imgcook简化了从设计到代码的转化流程。用户可以选择两种方式将设计稿中的数据导入到imgcook的可视化编辑器中:一是通过安装imgcook插件将Sketch/PSD文件中的图层信息导出,粘贴到编辑器中;二是在编辑器中直接上传Sketch/PSD/图片文件,imgcook将自动解析图层信息并还原到编辑器中。

  • 可视化编辑

    在imgcook的可视化编辑器中,用户享有高度的编辑自由。不仅可以轻松调整视图布局、设置动态样式和循环,还能直接编写逻辑代码、绑定数据字段。这种直观的操作方式大大降低了开发门槛,提升了开发效率。

  • 代码导出

    imgcook支持多种DSL(如React/Vue/小程序DSL等),满足用户的不同需求。用户可以根据项目需要选择合适的DSL,或者自定义DSL以满足特殊需求。一旦代码确定,用户可以通过点击“导出”按钮,或使用VS code imgcook插件将代码导出到本地目录,继续后续的开发工作。


  • Imgcook广泛适用于各种场景下的页面或模块开发。特别是在移动端细粒度模块开发、移动端活动页开发等方面,imgcook凭借其高效的转化速度和精准的还原度,得到了用户的特别推荐。此外,在PC端toC应用、toB应用等场景下,imgcook同样表现出色。然而,由于游戏场景对交互性和实时性的要求极高,imgcook目前并不推荐用于游戏开发。

使

  • 首先,确保您已登录到imgcook帐户。

  • 然后,在Figma中选择Plugins并找到imgcook插件。

  • 接下来,选择需要导出的文件图层组并点击“导出”。imgcook将自动将导出的内容复制到剪贴板,并提示您“导出成功”。

  • 最后,点击“转到粘贴”将内容粘贴到imgcook的编辑器中,保存为模块即可。

@版权声明:部分内容从网络收集整理,如有侵权,请联系删除!

类似网站