Low-code open source, one-click design draft to generate code to help you solve production pain points

As a front-end or manager, have you encountered the following scenarios

As a front-end veteran, you still need to write the page layout. Although you have written it countless times, the efficiency is not much different from that of you three years ago.
The death line of the project is getting closer, and you also end up with pages/components, unable to focus on business logic
You have tried to abstract a lot of components, but you still find that a lot of page content cannot be expressed in components, and then start writing pages again
After trying all the engineering and componentization solutions, the CTO/front-end architecture still cannot find a way to effectively improve the output of the front-end
Just finished the page, the boss/customer/product said that this page needs to be revised/changed interaction....
The UI walk-through is deducting pixels a little bit, and you said: My heart is so tired

Does it make you more distressed?

But please, have you thought about changing it?

Did you try to solve these problems in the past?

In order to completely solve these problems, I have done in-depth and extensive research and thinking. It has been more than three years from research, pre-research, practice, and verification.

SVG设计稿描述 ， 系统字体识别和字蛛转换 ， 多种空间/特征算法 ， 视觉识别 ， 机器学习 ， DSL和AST转换 and other technologies, it has achieved a smooth and straight-out from the design draft to the front-end page, and has no intrusion on the front-end, design, and operating system.

In the project practice, the median of the design draft reduction degree is 0.95, the highest is 0.99, the code retention rate of complex pages is 70%, and it meets the development expectations, and the second-opening experience is first-class.

Solution Portal: https://gitee.com/d2-c/lens

introduce

zuoyan lens is a product (design to code) that converts a design draft into a front-end page through an intelligent algorithm. It is a branch direction of the 低代码 platform. Its input is the design draft and the output is the front-end page. Watching can be done automatically.

This project can convert Sketch and Photoshop design drafts into maintainable front-end code with one click. 100 个 page 的工作量 10 分钟内即可轻松搞定 , which greatly releases front-end productivity.

Features

production code

The same structure and css logic as handwritten code are calculated through intelligent algorithms, and the output code is approximately equal to the level of an intermediate front-end
Full flex layout
According to the environment in which the element is located, the pixel error is automatically corrected to conform to the design expression.
Code is readable and maintainable.

Smart Cut

Automatically generate transparent png cuts, no need to design or develop manual cut maps
Automatically generate icon svg file, which can be directly uploaded to iconfont as a font icon, or converted to svg Sprite

Automatic font detection

Automatically detect the fonts in the design draft. If the fonts are missing, the installation will be automatically prompted. If the fonts are inconsistent, the page restoration will be affected. If the fonts are inconvenient to install, you can let the designer or merge the layers by himself.

Circular layout recognition

Automatic recognition list , grid and other layout methods
Unique node space structure matching algorithm, intelligently eliminates the interference of noise elements, accurately calculates the loop body, and has excellent performance

Cross-platform, system independent

Compatible with all platforms, it can also be parsed on windows and linux Sketch file

Designer learning cost is 0

You only need to abide by the normal design specifications, and there are no other requirements

Open DSL conversion, you can freely define the output

Using GoGoCode to do AST conversion, you can freely define the output language, syntax, such as: React, WeChat native, Vue, uniapp, Taro, RN, etc.

High degree of restoration

The median reduction degree of the measured design draft of the project is 0.95, which can fully meet the production delivery standard and greatly reduce the cost of UI walkthrough.

scenes to be used

Recommended for mobile, no adaptation for PC

Full-page development on mobile terminal - highly recommended
Mobile terminal fine-grained module development scenarios - especially recommended
Mobile Activity Page - Recommended

What group does it apply to?

1. Front-end developers

2. Business operators

what problem was solved

1. Front-end developers can quickly complete page delivery in front-end development without worrying about UI walkthroughs and focus on core issues such as page logic. It has immediate effects on rapid project delivery and reduction of technical debt.

2. The business operation personnel can solve the problems that the business operation personnel can quickly implement the planning and implementation, without waiting for the technical schedule or the short technical construction period, and can quickly complete the innovation, verification, trial and error problems,

You can also quickly create an experience demo for customers/bosses to experience, quickly reach a deal intention, or reduce rework and other issues

Technical Difficulties

For D2C type projects, the accuracy, usability and maintainability of the generated code are the keys to success or failure, and the analysis and calculation of the design draft itself is very complicated.

I only do a simple list here, not a detailed analysis, because the complexity of this thing is quite high, and people who have no experience will only be confused. At the same time, I will publish a series of articles on these issues to share my own experience. , welcome to discuss

If converting design drafts to analyzable DSLs and images for intelligent algorithm recognition, and to be system-agnostic
How to divide the box model
If you define absolute positioning
How to deal with fonts
If dealing with icon
How to Identify Similar Structures and Divide Recurrent Units
How to deal with redundant layers
How component recognition is accurate enough, and the application of machine learning in the derivation process

Congenital deficiency: a static thing cannot fully express dynamic effects

Because the design draft is purely static, if you want to express dynamic interactive effects, you can only rely on brain supplementation.
At present, whether it is based on environmental derivation or AI recognition, the effect is not ideal.
This is divided into several scenarios to elaborate.

1. You can pre-defined dynamic interaction,
The dynamic effect of this part can be expressed by component identification, because the dynamic effect has been defined in the component, just hit the component directly

2. There is no pre-defined or non-pre-defined transformation code that can be supplemented by the brain, or even refactoring the layout structure, there is no solution that can be solved.

3. Not to mention the product or UI, there is no way to interact with the front-end that you can't think of at all, and you can't hit the development through the brain, let alone a machine system.

planning

For a project that aims to reduce costs and increase efficiency: D2C is only one part of it (although this part is enough to lose hair), and the following development links include:

Logic/Event Orchestration

Server-side data understanding

Only after these two pieces of content are fully developed, can we barely say that the design goal has been achieved. At this time, it can be regarded as a complete closed-loop link for development, product, and operation. Fortunately, the algorithmic complexity of these two pieces does not have D2C links. height of

follow-up

For developers, this open source project ( https://gitee.com/d2-c/lens ), the degree of completion is not perfect, you are welcome to use it, submit issues or add me to WeChat to discuss.

At the same time, the series of articles are also being sorted out, so stay tuned