项目背景

前端开发领域中，最为头疼的就是页面布局，即便是工作经验丰富的老前端程序员，在面对一个新的设计稿时仍旧会有很多需要从头开始敲的布局。那么为什么不让设计师直接来操刀写前端呢br> 设计师写前端由于前端布局不太熟练，也不知道后续的点击区域大小、弹性关系，即使是手敲出来代码也极有可能无法直接用于前端项目。那么前端程序员想要指导UI设计师来完成前端切图工作，不得不面对动辄上百行的代码进行Review，就这样的工作量导致了前端程序员一眼就能看出切图问题所在的可能性变得极低，导致UI设计师短时间之内无法成长为全栈UI。
那么有没有一种工具，能让设计师可视化的把前端界面做出来，前端程序员扫一眼就能看出切图的问题，并快速给予指导。剩下的时间专注于前端JS实现呢br> 这个时候就能用FrontendBlocks这个项目了，实测一个熟练程序员一天可以最多做200多张页面！

我们先做一个简单的APP界面，只需要点击空白区域，然后在左侧“在内部插入”按图上的指示点击即可

调整一下自适应，可以看到界面更像是一个手机界面了，这说明咱们的界面是支持自适应的

同理，我们可以设置底部导航栏的背景色，并且可以清除掉徽章上自带的阴影，选择颜色的时候点清除按钮即可。

然后我们填写文本内容，设置文字大小、粗体，即可实时看到效果

要注意的是，如果你的浏览器没有经过任何设置，可能无法显示12号以下的字体，如何设置看这里：

回到FrontendBlocks，我们发现文字之间没有空隙会很难看，这时我们可以用调整外边距的方式来布局

有时候我们设计的时候div是一条线，不太容易点，这里我们可以把设计时高度拉大点，就容易点了。设计时高度并不会影响最终输出的效果。

如果不想受到弹性的挤压，则可以点选要固定宽高的元素（对于横向布局来说是宽，对于纵向布局来说是高），选择“钢化”，它对应的是flex-shrink:0，然后设置宽度为一个固定值即可。

但是大家都知道的，图片URL地址可能会失效，实战中，我会给团队搭一个FTP服务，素材都往项目的一个路径里放，填写相对路径即可，打包做成组件时直接拷贝过去即可。如果只是想看看效果，还有一种方式，那就是使用Base64图片编码。
我们可以搜索在线图片转Base64工具，这里我随便找了一个网站：

预览模式看一下，可以看到图片已经显示出来了。

在代码预览界面里，我们可以直接Ctrl+A，Ctrl+C把它复制到你喜爱的IDE里。这对于不愿意生成文件的小伙伴们是非常友好的。

生成的文件我们可以在F12下看到，代码非常的规整，Style样式和DOM结构分离。
到这里，可能大家还有一个小问题，我们生成的所有class都是block-开头的，可不可以自定义案一定是可以的。

css样式也会随之更名
瑜美科技 官网 致力于研发耦合度更低、实用性更强的软件工程，为企业和个人带来更多的价值。

来源：杨若瑜