Zecoda 0.1
Turn design files into front-end code automatically
Start new thread

Zecoda - Turn Sketch files into Vue.js code automatically

by•
Built with artificial intelligence and human touch. Just upload a Sketch file and Zecoda will automatically generate the front-end code for you (HTML, CSS and JavaScript). Use Zecoda to turn any Sketch file into a fully responsive web project.

Add a comment

Replies

Best
Maker
Hey PH! 👋 Founder here. As a front-end developer I turn designs into code regularly. But it’s a tedious and repetitive task. It takes time, lots of meetings and boring back and forth questions. I want to change that. So I automated this process. I trained a deep learning model to visually understand what UI elements are in the design and build the front-end boiler plate automatically for me (HTML, CSS and JS - with Vue.js components). In parallel we parse the Sketch file to get all elements’ styles. To guarantee a good service we have a human validation layer in the end of the process. This way you know you’ll receive a perfect front-end code to start your project! Hope this makes sense to you. Let me know in the comments! - John
Love this. I bought into Yotako.io which failed to do what it promised but your project looks considerably better. What did you make your ai with?
Maker
we are taking a visual approach to the problem. Our AI doesn't output code, it outputs UI elements. We are using Computer Vision to understand where the UI elements are. On the frameworks side we use Keras with TensorFlow backend. Thanks for the love! :)
Do you think you would be able to offer a lifetime subscription for part of your product (no developer revision of course)
This is mad 🔥. Is it gonna come to Adobe XD & Figma in the future?
Maker
absolutely! We are working on adding different design inputs and framework inputs (such as React).
Hi is there any trial to test out instead of example?
I have the same question. I get that there is a 14 day trial but I want to test it with a few pages before giving any money or credit card. I will have to talk my company into letting me get this and I can't do that without any trial.
Can you share more on pricing model? Seems like it wouldn’t work for an agency who builds on vue/react as they may not get ongoing services. Seems an upfront option would scale better. Thoughts?
Maker
absolutely. You are not the first to suggest that. We'll definitely iterate on the pricing model to find the best suit for our clients.
That's amazing. I'll try the Zecoda on my next projects.
Omg! Something I think big big companies has been trying to do for years!! Well done!
I am interested in this product but would love to trial it. Also, interested to see the Sketch files that you used to create the examples. There are all kinds of things you can do to a sketch file to make it work better in a generator but most designers won't know how to do this. If the designer needs to know how to group and arrange to make it work better in the generator, we are just moving coding from the dev to the designers. Conversely, if there isn't anything special that has to be done, then there is no way that a tool is going to understand what is the header, footer, sections, content areas, etc. Any way we can see the source sketch files and get a way to trial the tool?
Maker
we don't require any grouping or specific work from the designer. The source Sketch file from the Foundation example can be found here: It's a fairly common request we have but at this stage we feel we are solving a real world problem that has intrinsic value. I totally understand your thought process but unfortunately we don't have a free tier yet.
How long does the developer review take?
Maker
at the moment our average is between 24 to 48 hours. Does this works for you?
good.
why only vue.js ? not angular
Maker
we started with the tools we master. React and Angular are definitely next.