AI编程工具

Imgcook

阿里推出的免费设计稿智能生成前端代码

标签:
PonderAI-智能助手

Imgcook(图像大厨)是由阿里巴巴-大淘宝技术-导购和营销产品团队推出的设计稿智能生成前端代码(D2C,Design to Code)的平台,专注以 Sketch、PSD、静态图片等形式的视觉稿作为输入,通过智能化技术一键生成可维护的前端代码,包含视图代码、数据字段绑定、组件代码、部分业务逻辑代码等。

Imgcook的主要功能

一键还原视觉稿

从视觉稿中还原生成代码需要将视觉稿中的数据导出到 imgcook 可视化编辑器中还原生成代码,支持两种方式:

  • 第1种:打开 Sketch/PSD 文件,通过安装好的 imgcook 插件将设计稿中的图层信息导出,粘贴到可视化编辑器中。
  • 第2种:在可视化编辑器中直接上传“导入” Sketch/PSD/图片文件,imgcook 会解析图层信息直接还原到编辑器中。

可视化编辑

在 imgcook 可视化编辑器中,用户可以对视图编辑,比如支持动态表达式样式、设置循环、修改布局。还可以编写逻辑代码、绑定字段等。

生成代码

官方有提供常用的 DSL(React/Vue/小程序 DSL等),点击下拉列表可切换使用其他 DSL。如果有特殊诉求,你也可以自定义 DSL。

代码确定后,可点击「导出」,你也可以使用 VS code imgcook 插件链路「导出」,此方式可以将整个模块代码文件生成到相应目录,直接继续使用 VS code 开发整个项目即可。导出后的代码到本地文件中,图片以相对路径的形式存放在 images 文件夹下。

Imgcook的应用场景

imgcook 目前支持各种场景的页面或模块的高度还原,您可以根据以下场景分类选择是否使用 imgcook。

  • 移动端细粒度模块开发场景 – 特别推荐
  • 移动端活动页 – 特别推荐
  • 移动端全页面开发 – 推荐
  • PC 端 toC 应用 – 推荐
  • PC 端 toB 应用
  • PC 端富交互应用 – 不推荐
  • 游戏场景 – 不推荐

如何使用imgcook插件?

  1. 确保你已登录到 imgcook 帐户。

  2. 在 Figma 中,转到 Plugins 并选择 imgcook,你应该看到一个新的导出窗口。

  3. 选择任意文件图层组,然后点击“导出”。 imgcook 将弹出“导出成功,已复制到剪贴板!” 提示弹出层,然后单击“转到粘贴”进行还原。

  4. imgcook将在新的浏览器选项卡中打开编辑器。 将其粘贴并恢复到“ ctr + v”编辑器中,然后另存为模块即可。

Imgcook是免费的吗?

Imgcook是完全免费的,用户可以使用其提供的Figma、Sketch、VSCode等插件来进行将设计稿免费转化为代码。

数据评估

Imgcook浏览人数已经达到3,029,如你需要查询该站的相关权重信息,可以点击"5118数据""爱站数据""Chinaz数据"进入;以目前的网站数据参考,建议大家请以爱站数据为准,更多网站价值评估因素如:Imgcook的访问速度、搜索引擎收录以及索引量、用户体验等;当然要评估一个站的价值,最主要还是需要根据您自身的需求以及需要,一些确切的数据则需要找Imgcook的站长进行洽谈提供。如该站的IP、PV、跳出率等!

关于Imgcook特别声明

本站TodayAI官方网站提供的Imgcook都来源于网络,不保证外部链接的准确性和完整性,同时,对于该外部链接的指向,不由TodayAI官方网站实际控制,在2024年3月29日 上午5:08收录时,该网页上的内容,都属于合规合法,后期网页的内容如出现违规,可以直接联系网站管理员进行删除,TodayAI官方网站不承担任何责任。

相关导航