The 6 Levels of Frontend Development Automation
By: Or Arbel
Tags: Frontend Development, AI, Frontend Automation, CSS, Machine Learning

Level 0 (No Automation) — Engineer does everything

This is the process that occurs when engineers receive static mockups, without any additional data. No red-lines, no generated CSS properties, or anything other than a mockup image that represents the end result. Engineers look at the mockup image and re-create everything with code. Since static images can only convey some information, much of it is guess-work. Even font sizes need to be guessed, as there is no accompanying data that provides them.

Level 1 (Engineer Assistance)— Automated system can sometimes assist the engineer by providing the styling of the front-end code.

The engineer is provided with an interactive webpage that includes red-lines and styling code snippets (such as CSS, SASS or LESS). There are plenty of tools that provide this level of automation. Amongst them are Zeplin, Avocode, InVision Inspect, Sketch Measure, and others. The generated CSS is readable both by humans and devices. It can be copy-pasted or used a reference. This level of automation saves typing errors and a bit of time. It is still partial since it can only automate Styling (part one out of four).

Level 2 (Partial Automation)— Automated system can generate a responsive layout of the front-end code.

The system produces code for laying out the interface. This means Styling, and Layout (DOM). The code can be HTML, React, Swift, Java (for Android), React Native, Flutter, or any other front-end language. For the first time, the code can run on a device (such as a browser) and display a pixel perfect interface which is identical to the original mockup.

Level 3 (Conditional Automation)— Automated system can generate interactive parts of the front-end code.

The system produces code for most parts (all except Naming). This means Styling, Layout (DOM), and Interactivity. The interface is interactive and animated. It’s no longer static but can have micro-interactions, animations, states, and transitions.

Level 4 — (High Automation) —Automated system can generate all parts of the front-end code.

All 4 parts of front-end are included: Styling, Layout, Interactivity and Semantic Naming. The code should be full, clear and maintainable by a human engineer. Complete components can be used as-is or as a reference for the engineer. The code is readable both to humans and devices.

Semantic Naming means that elements are named based on what they are, rather than based on accompanying data.

In the following wireframe, try to guess the name of the pointed element. When you’re finished, scroll down.

Can you come up with a good name for this element?

In wireframe above, a human engineer would, most likely, deduce that the element is a “Profile Picture”. Notice that it doesn’t say “Profile Picture” anywhere, but since as humans have seen many profile pages, we are trained to perform pattern matching to accomplish this. Machines can learn this as well.

Level 5 — (Full Automation)—Automated system can generate all of the front-end code in human-level.

Automated system can generate code for all design specs, whereas the generated code is indistinguishable from a human-written code.

In this level, if a code review is performed, it should pass a “Turing Test” in which the reviewer can’t tell if an automated system produced the code or a human engineer.