Training an AI to convert design mockups into HTML and CSS

Just have the AI include a duck with every creation.

https://blog.codinghorror.com/new-programming-jargon/ #5

Perhaps you should find a new place to work. There are engineering firms that value talent and capability. While it's still important to be aware of business needs and deadlines, that doesn't mean you can't have a solid engineering culture coupled to the business vision.

>chrisfosterelli: This is a neural network that takes an image and predicts very simple blocks (like BODY, TEXT, BTN-GREEN in the bootstrap example) and then uses a map to convert them to well-formed HTML

>jamesjyu: I've always wanted to do a contest with other frontend coders to see who could get closest to a complex layout—like the NYTimes—in one go. >>janneklouman: these types of contests exist! I went to one of these[1] maybe two years ago in Stockholm and I had a blast [1] http://codeinthedark.com/

Pix2code: Generating Code from a GUI Screenshot | https://news.ycombinator.com/item?id=14416530 (May 2017)

The final html code from the first example is not that bad. There's the usual problem of beginner coders of too much div wrapping that probably isn't really necessary. I'm curious if the system can also create the css. The css also suggests a beginner coder, such as an overuse of unnecessary clear classes because of the overuse of floats for layout. Or having extra class names for things that are easily handled by a parent class reference, such as a "last" class on the last li in the list. Although, it appears the css is just a template obtained online. More on that later.

The second example using bootstrap is a soft failure in my eyes. Although the html does render correctly in the browser, which is because browsers do their best to render crappy html, the code is rough. The main problem is it decided to render the head element as a header element. Compared to the first example I'm shocked that this is the generated output. The usage of bootstrap does pose an interesting thought in that the content section of the html is more precise than the first example.

My reaction to this is it's a decent try at generating a website based on very strict rules assuming that more than half of the website creation process still requires a human to complete. For example, I could see this working quite well if one were to design your mockups strictly be bootstrap, or a template, and provide that css beforehand. If the mockup is custom outside of the template/bootstrap css then it'll have to generate that css itself. Which I think I'm more curious if that's possible. Generating html is easy as you can establish ground rules of "use this series of nested elements for this situation" and so on. The examples provided could just as easily be created by a drag-and-drop system that allows a non-coder to build a basic website. For that matter, use a markdown to bootstrap converter and train your writers/editors on the bootstrap basics and off you go.

But it sure did look like a fun learning exercise. As a front end dev, I'm not worried over my future and would be curious to see where it goes.