像untiy开发游戏，有可视化的界面，拖拽式的开发过程非常舒服便捷，极大程度实现功能模块复用，相比现在的web开发方式，相当于提前步入共产主义。受此启发所以想有一款属于自己的服务于web开发的可视化开发编辑工具，能按照unity的模式，实现模块的共享分享，现在有了初步成果，在此分享给大家听。

最近正好有一个项目，作为系统开发第一个程序，也比较简单拿来做示范讲解。

现在的web应用开发流程，先是出设计图，现在设计师采用的设计工具一般结合插件直接可以导出样式代码,所以往往在界面开发阶段，工程师就是在拷贝代码，如果没有实时可视化界面，通常要等待页面刷新来反馈更改，比较低效。

我在这里设计一个CSS Component可以粘贴样式代码，符合现在的流程。

将一些常用独立样式表录入，像flex flex-center可供选择，进一步去代码化。

引入脚本系统。一般的web框架开发，都要涉及到父子级通信，unity有另外一种思路，

可以将不同的"组件" 拖到一个脚本里去处理逻辑，脚本内部会高度独立，所以非常适合复用。

预制件系统，我们开发过程中有很多可以被重复使用的模块，可以将它设为预制件，可以在以后的项目使用或者在项目中被反复使用的 比如列表项可以设为预制件，可以拖拽放入，也可以导出，这样的预制件是你的代码资产，也可以分享给其他人当资源使用。

项目构建与导入导出，是一个编辑器系统不可缺少的模块。我将项目格式命名为WD1P，另外导出的代码，与我们手写的一致，具有可阅读和维护性，这与原型编辑器产生的 有本质不同。

整体编辑器是在playcanvas的编辑器基础上改造而成。有了可视化开发，开发效率提高许多，并且在代码共享这个方面有了质的飞跃，开发过程也非常的好玩 不枯燥了，放出一个阉割体验版 ，只有继承树功能

https://songshujitu.github.io/web-designer/