So I tried to automate this process. I trained a deep learning (DL) model to visually understand what elements are in a webpage (e.g. input, button, nav, etc) and build the front-end boiler plate automatically for me. I learned a lot in the process, the actual site builder is a mathematical interpretation of a Sketch file and the DL model outputs what elements to include in what section.
To be completely transparent I'm not quite there yet. I'm only able to have ~90% of the site right. The other ~10% are misinterpretations or incorrect positioning of the elements. In order for this to work properly, it requires manual validation - which for my own projects I’m more than happy to do.
Even at this stage I think this tool can help others as well, so please let me know if you have any questions.
We can be more productive without repetitive tasks.
 Demo: https://zecoda.com/#demo
 Request early access: https://zecoda.com/#subscribe
So I tried to automate this process.
The reason for all the meetings and questions is that the designs you're working from are ambiguous, and you don't really have enough information to turn the design files in to working code. I can't quite see how a deep learning model solves that problem. By the sounds of it you've automated turning the original, ambiguous, wrong designs the you have at the start in to code and tried to remove the discussion process that takes those files and turns them in to the right solution to the customer's problem. This is not going to lead to better front end code.
It's annoying to do, but if you can automate producing the initially wrong product for review it'd be easier.
End result: you end up having to redo the website. This tool helps get that Beta up even if just for the client to try it and show his friends/wife/boss
The benefit of automating the production of code is useful, and plenty of people would want that, but targeting the messaging at developers isn't going to work. I would have thought selling this tool to people who employ developers as a way to reduce the number of people they need is a far better route to market.
If designers have the ability to work closer to the web, more power to them. It should be our job as software engineers to make this as easy as possible and this tool could be one specific implementation.
If anything, by automating the process of producing code you're going to leave front end developers with nothing but meetings because the rest of the job is going to become a matter of pushing an AI-powered button. They won't thank you for that.
I've done something similar in the past (building models that translated paper drawings into HTML+css) and ultimately found it usually didn't save me much time.
Translating a look into code is much less labor intensive than it once was and code reuse and stylesheet preprocessers and the ilk (webpack, etc) save tons of time.
I'd get something reasonable out of the model but then the actual look and feel work came into play.
My next step was to be able to reference other sites for styling hints but ultimately I wasn't getting enough utility out of it to continue.
Do you find the same with this approach? If so, what plans do you have to take it the next few yards so it's a more comprehensive front end tool.
1. Something I made and let people use but nobody uses: https://comic2gif.com
There is one. If you click on "show today's" button. But I guess default should be changed to show instead of hidden.
> Plus, it would be neat if panels with more text were visible longer.
There is some logic in code to do that, amount of white pixels (in mask) is proportional to the time it appears. But maybe it needs tweaking.
If you do share I'm happy to give you feedback here if I have any!
I've used a few tools over the years that automatically generate code, mostly in C, but I've usually had to rewrite it as it never fits in with any decent coding standard
I would really love to see the output zip file, any change you have something less complicated that goes responsive to show?
The next step up has been pushing ML/DL/AI to do more sophisticated tasks and that means more sophisticated tools.
Trying to answer all your questions:
- Our models learnt website's components visually (e.g. what is a navbar, an input, a button, etc)
- The output is a .zip file with the .html files and directories for css, js and img
- All Vue components can be found in main.js inside the js directory
- Vue components are built when 'duplication' is recognized (e.g. a sequence of cards or several links for a navbar). Nothing fancy
- CSS is vanilla, trying to ditch as many inline style as possible (working on it as we speak :) )
- All SVGs are imported with the img element.
Let me know if you have more great questions.
Regarding the output, it's great to know your thoughts on the frameworks. We actually went for a framework to make it simple for our users. In the future we want to allow our users to chose what output they want. So, it makes total sense.
 Pix2Code: https://arxiv.org/abs/1705.07962
 Sketch2Code: https://airbnb.design/sketching-interfaces/
 ScreenShot2Code: https://blog.floydhub.com/turning-design-mockups-into-code-w...
Aside: I actually built react-sketchapp as a roundabout way of being able to build more interesting AI plugins for Sketch.
This style of pastel colors, wavy svg graphics, and happy avatars seems super popular right now   . I'm curious if it has a name and where it originated from (if anywhere?)
Overall I like the aesthetic quite a bit, but it's such a distinctive look. I'm surprised I keep seeing it crop up nearly copy+pasted between all of these companies
I'm imagining it has to do with the way designers work. They generally have stakeholders moodboard (basically creating a pinterest board with inspiration from different brands), and then they create a similar "feeling".
As humans, we're kind of evolved to recognize patterns, so when we start seeing the same branding art direction it stands out to us and we may try to conflate some deeper meaning to it. But in reality, it's just a few brands that share the same branding art direction probably because some execs liked the way it looked and felt and asked their designers to do something similar.
At least for me the net emotional effect of the "For Desigers & Developers" section of the homepage was a strong impulse to bounce. (I'm in the target market.) Ultimately for the sake of research I clicked through to the ~/product page, where I found the diagrammatic graphics much more compelling.
I'm working on a product in a similar space, and struggling with the question for our own marketing materials. Amy Hoy's material  on audience "worldviews" has been helpful so far. (No personal affiliation.)
Best of luck with your launch!
Q. Will I pay to use your problem?
A. Probably not, with the current version
Q. What problems I see with the platform?
A. I seriously don't know how you'd proceed forward with the platform. If it would only be used for creating static webpages then you'd end up creating a platform similar to Wix or other such website generation platforms.
Please let me know what you think about the suggestion.
Even if you wouldn't pay for this I know a lot of high-revenue generating businesses that would. The time savings afforded by this tool (if it works) would be incredible.
1. What's not enough in this current version for you to pay? What would make you be able to pay?
2. Do you have this problem recurrently? i.e. going from design to code.
I know we are decades past that, and the machine learning algos may do a better job but without seeing some code examples it has limited appeal to me.
I don't really know the kind of person that has to turn around so many websites that the boilerplating exercise is a big enough problem to pay to solve. I can see the appeal to people who have no experience building websites and a company like Wix might be interested in the tech. But professionals who need a monthly subscription has to be a tiny niche.
Impressive all the same though, what you have learned in doing this will lead to other great things I am sure.
From my perspective, one of the difficulties I’d have is that we already have a pretty extensive Vue application, but we _still_ have problems with translating updates in place. So, we’d want to be able to compare one of the screens we have with one of the screens generated (and our designers tend to create multiple Sketches to illustrate different state possibilities).
The next question would be how updates might be flagged to minimize code churn after initial generation.
You might be thinking about react-sketchapp or SharpieClassifier 
(I built both :P)
Anyway, it’s a pleasure to meet you - I’ve been impressed with both your projects and following them for a while now. Love to talk more about them.
Whats the difference? Yotako seems to be in the deadpool though...havn't seen anything new in ages. Hard to scale this stuff.
Where's the building of websites? What's the difference between this solution and something which simply converts .sketch into html with far simpler methods?
Looks cool so far.
The problem is that round-tripping is what almost everyone wants, and it's really hard to get to work.
At least that was one issue i thought about reading OP.
Can you share the input file and an estimate on how long it took to work with the output to make it production ready?
Regarding the time for the optimization of the output, we are estimating ~20/30 minutes per page. It could be very faraway from the reality or pretty close, not sure yet.
And I can't get past the fact that it becomes a responsive site, is the logic in the responsive design in the Sketch file too?
But seriously, I hope you guys do well, thanks for responding to all these skeptical comments
I can now see how AI would have made my job easier.
As I recall, it was literally upload your text and photo/video content, and their AI will design a static site for you, optimizing for SEO and engagement.
Sketch is like 1/10th of that
Is causing it and not needed.
> Show HN is for something you've made that other people can play with. HN users can try it out, give you feedback, and ask questions in the thread.
This should not be a Show HN as there is nothing to try out, just a video + early access list that currently doesn't give you access.
Also, I'm working on something similar, but from a different perspective. My problem with this is that you have to design your website in Sketch, then turn it into code with a different service potentially waiting hours until you'll see the end result.
So my idea is that I can build an app where you can basically draw the page elements, similarly to how you'd do it in Sketch, and it automagically turns the whole thing into a responsive website right away (no position:absolute hacks involved). I still have a lot to do though... :D