程序员经验分享-hwhale

一键部署设计稿至线上 —— D2C国产神器

2023-11-14

微软近期推出了Power Apps 新功能 Express Design。只要上传一个草图或者是 Figma 文件，Express Design 都会在几秒钟之内用 AI 技术将其转化为一个应用程序。

不写代码就能生成一个应用，一直以来是我们的梦想，目前主要分为两个派别，一种是面向非开发人员为主的平台：Low Code、No Code ，另一种是面向所有人员的智能化平台：Design to Code，那我们今天就来体验一下 Power Apps 到底如何，在后面我们也将讨论与微软竞争的国产软件们。

Power Apps功能体验

我们今天来体验一下这个 Express Design。

首先登录 https://make.powerapps.com/ 首页，登录必须是教育账号，或者是公司账号。我这里申请了个 a1 的教育账号来体验。

点击 + 创建

Express Design 支持图片或者是 figma 文件的方式导入，我们先选择 图片 的方式导入

然后看效果

总体来说情况比较一般，我们再来试试导入 figma 的情况

这是一个 figma 的设计稿

首先需要获取到 figma 的设计url 和 token

效果非常的一般。

3.介绍目前国内业界有的一些产品 （code.fun 、imgcook 、58、蓝湖 等众多公司等

国内业界目前也有很多这种方向的优秀低代码平台/方案，像 code.fun ，imgcook，58 的 毕加索等等

首先我们来看看大名鼎鼎阿里出品的 imgcook，首先在 figma 插件中 找到 imgcook 插件，点击 run

然后出来一个弹窗，点击导出

成功后前往 https://www.imgcook.com/editor#/ 粘贴数据

然后就生成了我们的项目

我们可以可以到，大概的布局都还原了，但是一看细节，却不太尽人意。

当然我们可以使用右侧的面板来自己进行后期调整

但是这链接颜色，真的也太累人了吧。

然后再看看我们比较关注的拟人化的代码书写 + 布局方式

好吧。。。布局已经稀巴烂了。

我将生成后的代码放到了 codesandbox 方便大家编辑和体验。

可以在 codesandbox 编辑看效果：https://codesandbox.io/s/eager-dirac-9mt732

在线预览地址：https://9mt732.csb.app/

我们再来看看另外的几家产品，由于蓝湖、58毕加索不支持 figma 文件，暂时测试不了。我们就来试试 code.fun 的效果吧。

继续在 figma 搜索 codefun 插件，点击 run 后， 微信扫码登录

然后选择创建的方式，以及设计稿类型

然后我们来到编辑界面，几乎就是完美实现，除了头图有部分色差外，基于一模一样。

然后我们点击在线预览按钮，即可生成在线地址，无须手动导入到 codesandbox

大家可以在线体验一下：https://ide.code.fun/api/p/63256206d85c64001131b656?token=6ec6d8b5e0631e9ac2b582bdd602cad3

当然 codefun 也和 imgcook 类似，具有右侧的后期处理功能

还实现了类似 chrome tools 中的元素选择器，用于快速定位元素。

默认情况下复杂的配置面板也是收起的，需要点击可视化编辑器后才 会出现

设计稿中的列表也是自动识别了，从布局上使用了 flex 纵向布局，从代码上，使用 data 数据循环生成，可以说这个思路非常的程序员化，而不是中看不中用的 “人工智障”

接着我也从 figma、即时设计上找了几个设计稿在 codefun 上生成效果，感觉都非常的不错，如果你想生成一个静态的落地页，真的强烈推荐，秒级部署。

冬日饮品潮流

设计稿：

https://js.design/resourceDetails?id=621cd4aa9b62637de0ac84d5

地址：

https://ide.code.fun/api/p/63255fd5d85c64001131b5b0?token=757879138388f714ebd34832f6351e15#/

效果图：（页面也是响应式的）

冬日饮品潮流

设计稿：

https://js.design/resourceDetails?id=62dfb23420b7c8b67acc7489

地址：

https://ide.code.fun/api/p/63255fd5d85c64001131b5b0?token=757879138388f714ebd34832f6351e15#/

效果图：

在生产多次页面的时候也发现了一些问题：

1.每次生成链接的时候，我并没有改动都需要重新生成链接

2.有时候会出现图片丢失的情况

3.部分情况有色差需要手动调整

不过总的来说，从 微软的 power apps 再到 imgcook 最后到 codefun ，可以发现我们国产的软件并不比国外的差，也许有一天我们会引领者标准！

参考资料

https://zhuanlan.zhihu.com/p/52065184

https://github.com/Microsoft/ailab/tree/master/Sketch2Code

https://sketch2code.azurewebsites.net/

https://powerapps.microsoft.com/zh-cn/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

D2C

前端

html5

javascript

低代码

一键部署设计稿至线上 —— D2C国产神器 的相关文章

  • 为什么 IE9+ 上的网络浏览器不支持 document.createEvent 以及如何修复它？

    我使用的是 Windows 8 Internet Explorer 10 Visual Studio 2013 这是 JavaScript 代码 function simulate element eventName var options

  • D3更新circle-pack数据新节点与现有节点重叠

    我正在关注一般更新模式 http bl ocks org mbostock 3808234但在分层方面存在问题 使用圆形包装布局 我pack新数据 update enter and exit圆形元素 然而 当新元素enter 它们重叠upd

  • JS文件中的System.register是什么意思？

    在 Angular 2 中使用指令时 JS 文件中的 System register 是什么意思 我认为这个问题并不特定于 Angular2 中的指令 它是关于 ES6 TypeScript 和其他使用 SystemJS 的现代编译器的一般

  • 在 Cordova 中合并文件的多个部分

    在我的 Cordova 应用程序中 我正在下载任意文件 例如图像或视频文件 这是通过 Cordova 文件传输插件和 Range 标头完成的 因为我需要分段下载文件 我的问题是 我想将几 个小 字节 文件合并回原来的文件中 他们曾经在其中使

  • 将 SVG 路径转换为绝对命令

    给定一个 SVG Path 元素 如何将所有路径命令转换为绝对坐标 例如 转换此路径

  • jslint 配置 |传递全局变量

    我如何提醒 jshint 我有全局变量 即命名它们 我知道你可以做到这一点 但我不记得语法了 我在这里定义了一个全局的 function window glob1 local var 稍后像这样使用 不同的 IIFE function gl

  • Angular UI-Router：多个 URL 到单一状态

    我已经开始使用 Angular 的 ui router 并且我正在尝试弄清楚如何让多个 URL 引用单个状态 例如 orgs 12354 overview retyrns the same pages as org overview 我的

  • 在 UIWebView 中禁用复制和粘贴

    几乎 我已经尝试了一切方法来禁用复制 粘贴UIWebView但对我来说没有任何作用 我正在加载我的UIWebView来自字符串 字符串数组 如下所示 webView loadHTMLString NSString stringWithFor

  • 如何将本地文本文件上传到文本区域（网页内）

    我是一名新手程序员 需要一些帮助来弄清楚如何将本地文本文件上传到我正在构建的网站内的文本区域 我非常精通 HTML CSS 对 Javascript JQuery 有相当的了解 而且我刚刚学习 PHP 您能提供的任何帮助我将不胜感激 我有一

  • 如何防止输入文本中出现“后重音”

    我相信这是一个简单的问题 但在谷歌上搜索几个小时后我找不到任何答案 也许我无法在搜索中使用正确的单词 P 我有一个 javascript 方法 可以防止用户用数字以外的其他字符填充文本框 如下面的代码所示 它在 KeyDown 事件中使用

  • 将文本字段限制为仅包含数字的最佳方法？

    I m using the following Javascript to restrict a text field on my website to only accept numerical input and no other le

  • 如何绕过Access-Control-Allow-Origin？

    我正在一个平台上对我自己的服务器进行ajax调用 他们设置了阻止这些ajax调用的平台 但我需要它从我的服务器获取数据以显示从我的服务器数据库检索到的数据 我的 ajax 脚本正在运行 它可以将数据发送到我的服务器的 php 脚本以允许其处

  • 在 javascript 中实现固定位置会导致 Safari 滚动时出现抖动

    固定位置不适用于我的用例 因为它固定在浏览器窗口上 您可能会处于文本在屏幕右侧之外且无法到达的状态 无论如何 我尝试使用绝对定位 然后调整javascript中的 顶部 它在 Firefox 和 Chrome 中运行良好 但在 Safari

  • 从请求url获取hash参数

    我有这样的网址 http www coolsite com daily plan id 1 http www coolsite com daily plan id 1解析该字符串并读取哈希值 id 之后的值 的最简单方法是什么 谢谢 在客户

  • 如果 jquery 验证激活，如何在单选按钮中放置红色边框[重复]

    这个问题在这里已经有答案了 我的问题是 如果 jquery 验证像示例图片中那样激活 我无法使单选按钮具有红色边框 任何人都可以帮我解决这个问题吗 http i38 photobucket com albums e149 eloginko

  • 根据文本内容从 jquery 对象中过滤元素

    我正在尝试使用contains带有 this 关键字 但它给出了错误 JS function var check ul find li filter function return this contains two css color r

  • 如何将数据推送到嵌套对象

    如何将另一个元素推入variables来自以下对象的属性 var request name Name id 3 rules name Rule name tags tagId 1 variables variable var1 matchT

  • highchart堆积柱每个类别的总数据

    我想获取每个类别的总数据 这point stackTotal只给出活动数据的总数 从我粘贴的代码示例中 我想知道每种水果的总消耗量 因此 即使我单击右上角图例上的乔的名字 这使得堆叠图表上的所有乔信息都处于非活动状态 我仍然可以知道约翰 简

  • Array.of 与“[ ]”。何时使用 Array.of 而不是“[ ]”？

    当我发现时我正在读一些书Array of https developer mozilla org en docs Web JavaScript Reference Global Objects Array of 根据 MDN Array o

  • 在 Firestore 文本字段中存储文本文件并删除换行符

    我正在尝试将 CSV 文件存储在 Cloud Firestore 内的文本字段中 然而 Firestore 正在删除所有换行符并将整个 CSV 文件存储为一行 这Firestore 数据类型文档 https firebase google

随机推荐

  • Taylor theorem

    In calculus Taylor s theorem gives an approximation of a k times differentiable function around a given point by a polyn

  • 极客头条贡献者招募：欢迎懂分享的人

    极客头条 人人都是主编 http geek csdn net 发现 分享干货 我们组建了一个极客头条贡献者群 建立这个群 其实目的很明确 就是为了挖掘我们社区中热爱分享的成员 我们可以一块讨论技术 讨论极客头条 讨论社区 我们认为 每个技术

  • ActiveX控件中加载BCB编写的dll的注意事项

    最近写了一个ActiveX控件 使用MFC 控件中添加方法 其中调用BCB编写的一个dll进行读卡器的读卡并且返回卡号给前端页面 前台用JS调用activex控件的方法 测试中发现 BCB写好的dll 在Activex中加载时总是提示缺失相

  • require.js

    一 为什么要用require js 最早的时候 所有Javascript代码都写在一个文件里面 只要加载这一个文件就够了 后来 代码越来越多 一个文件不够了 必须分成多个文件 依次加载 下面的网页代码 相信很多人都见过 这段代码依次加载多个

  • 浅谈TCP滑动窗口机制

    1 浅谈TCP滑动窗口机制 概念 滑动窗口是两台主机间传送数据时的缓冲区 每台TCP IP 主机支持两个滑动窗口 一个用于接收数据 另一个用于发送数据 窗口尺寸表示计算机可能缓冲的数据量大小 2 工作原理 1 滑动窗口工作过程 TCP 协议

  • Quartus II 之1位全加器

    文章目录 一 半加器和1位全加器原理 1 半加器 2 1位全加器 二 实验目的 三 设计半加器 1 新建项目 2 创建原理图 3 半加器仿真 四 设计全加器 五 硬件下载测试 1 引脚绑定 2 下载测试 六 Verilog语言设计 七 总结

  • 分享一个轻量级免费UML绘图工具JUDE

    一 介绍 JUDE Java and UML Developers Environment 一个小巧实用的UML建模软件 绝对可以符合UML建模的要求 可以画CLASS USECASE STATECHART ACTIVITY OBJECT

  • jmeter 参数传递 无效

    问题 上个接口的返回值用于下个接口的入参 上个接口的返回值获取失败 解决 返回值获取需要从第一级开始 而不是想要的字段位置开始 且 后有一个点

  • 性能测试 —— Jmeter 命令行详细

    我们在启动Jmeter时 会看见 Don t use GUI mode for load testing only for Test creation and Test debugging For load testing use CLI

  • Ant Design Pro安装及简单搭建

    目录 一 node js npm及yarn安装及配置 二 Ant Design Pro安装及简单构建 Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端 设计解决方案 致力于在设计规范和基

  • Linux opencv打开摄像头和opencv旋转90和180度

    1 opencv打开摄像头 include

  • Unity与安卓arr简单调用

    前言 简单记录一下 方便后期第三方SDK做参考 一 在AndroidStudio创建空项目 二 创建空模块 复制classes jar至创建新模块的lib中 并加入设置Library classes jar文件来自你当前要使用的arr的Un

  • 深度学习MRI重建综述

    参考文章 A review and experimental evaluation of deep learningmethods for MRI reconstruction 文字有点乱 可以看表格 基于展开的方法 Yang et al

  • C#中对txt文件的读写操作

    C 中对txt文件进行读写操作包括两种方式 一种是基于FileInfo类 调用该类的Read方法 但是该方法读出来的数据是byte格式 需要对其进行解码 将相应的字节数转换为字符 而C 中System Text引用就包含的解码的方法 相应代

  • php消息队列的应用

    欢迎加入 新群号码 99640845 最近打算开发一个新功能 计划应用消息队列 以前对消息队列都是简单的理论了解 真正应用之后把自己的感觉和一些理解整理下来 说正事分割线 具体的业务场景如下 用户下单 生成订单 支付 返回支付信息 就是正常

  • el-tab切换时echarts图表宽度变为100px

    由于el tabs切换的时候 不显示的tab内容默认通过display none 所以导致echarts图表为100px 解决办法 在图表上使用v if来解决

  • c++ 九九乘法表，倒计时，成语接龙等游戏源代码

    include

  • 数据结构之顺序表详解

    目录 前言 1 顺序表 2 顺序表及其功能实现 2 1 准备工作 2 2 顺序表结构的创建 2 3 顺序表的初始化 2 4 顺序表向后插入数据 2 5 打印函数的实现 2 5 顺序表从后删除数据 2 6 顺序表向前插入数据 2 7 顺序表从

  • chrome45以后的版本安装lodop后，仍提示未安装解决

    请先查看你chrome浏览器的版本 如果是45版本以前的版本 安装后仍提示 未安装 或 请升级 请参照本链接解决 http blog sina com cn s blog 721e77e50102vfjl html 以下是chrome版本4

  • 一键部署设计稿至线上 —— D2C国产神器

    微软近期推出了Power Apps 新功能 Express Design 只要上传一个草图或者是 Figma 文件 Express Design 都会在几秒钟之内用 AI 技术将其转化为一个应用程序 不写代码就能生成一个应用 一直以来是我们

热门标签