编程工具

Imgcook

Imgcook(图像大厨)是由阿里巴巴-大淘宝技术-导购和营销产品团队推出的设计稿智能生成前端代码(D2C,Design to Code)的平台,专注以 Sketch、PSD、静态图片等形式的视觉稿作为...

标签:
广告也精彩
广告也精彩

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等插件来进行将设计稿免费转化为代码。

数据统计

相关导航

新CodeRabbit
新CodeRabbit

CodeRabbit是什么 CodeRabbit是一个AI驱动的代码审查平台,通过自动化审查流程来提升代码质量,并显著减少手动审查所需的时间和精力。该平台利用人工智能技术,提供逐行的代码反馈,建议改进和修正,以增强代码的效率和健壮性。CodeRabbit与GitHub和GitLab无缝集成,支持通过智能聊天提供上下文感知的反馈,并且能够随着时间和用户互动变得更加智能。 CodeRabbit的主要功能 自动化代码审查:利用AI技术,CodeRabbit能够自动审查代码,提供改进建议和修正方案,以提升代码质量。 集成GitHub和GitLab:平台与流行的代码仓库服务紧密集成,支持通过Webhook监控Pull Request(PR)和Merge Request(MR)的变化。 上下文感知反馈:提供基于代码上下文的审查反馈,帮助开发者理解代码变更的意图和影响。 智能聊天助手:允许开发者与AI进行对话,以获得更深入的代码审查、解答问题或生成代码。 逐行代码审查:对代码变更进行细致的逐行审查,提供Diff格式的代码建议,便于直接应用。 问题验证:将Pull Request的变更与相关的GitHub或GitLab问题链接起来,验证并识别可能受影响的其他问题。 个性化和学习:CodeRabbit从与用户的互动中学习,随着时间变得更加智能,提供更个性化的审查。 拉取请求摘要:生成并更新拉取请求的高层次摘要,为团队提供变更的快速概览。 CodeRabbit的产品价格 CodeRabbit提供了一系列定价计划,以满足不同规模和需求的组织。 免费版:该计划允许用户为每个Pull Request获取总结和发布说明,并且包括Pro计划的7天免费试用,无需提供信用卡信息。此外,用户可以享受无限数量的公共和私有仓库支持,私有仓库的Pull Request摘要,以及公共仓库的Pull Request审查功能。 Pro专业版:对于需要更全面审查服务的开发者,专业版提供了对每个Pull Request的全面审查,定价为每月15美元(年付折合12美元/月),同样提供7天免费试用。Pro版包括无限数量的公共和私有仓库的逐行代码审查、智能聊天。 企业版:针对大型企业用户,CodeRabbit还提供了企业版计划,该计划包含了Pro版所有功能,提供私有化部署和优先支持,专为大型企业的需求设计。 开源项目:对于开源项目,CodeRabbit提供了一个特别的优惠,即Pro版功能对开源项目完全免费,支持无限数量的公共仓库。 具体定价详情可查看CodeRabbit的Pricing页面。 CodeRabbit的适用人群 软件开发团队:任何需要提高代码审查效率和质量的团队都可以从CodeRabbit的自动化AI驱动审查中受益。 开发者:个人开发者可以通过CodeRabbit获得即时的代码反馈,帮助他们改进代码质量,即使没有团队内其他成员的即时反馈。 技术领导者和项目经理:他们可以利用CodeRabbit来确保代码的质量和一致性,同时减少手动审查的工作量。 开源项目贡献者:由于CodeRabbit为开源项目提供免费的Pro版服务,因此开源项目的贡献者可以利用这一工具来提升代码审查的效率。 技术爱好者:对于喜欢尝试新技术并希望提高工作效率的技术爱好者和早期采用者,CodeRabbit提供了一个前沿的AI工具。

暂无评论

暂无评论...