Subscribe
Sign in
Zecoda 0.1
p/zecoda-0-1Turn design files into front-end code automatically
Start new thread
John da Maia

Zecoda - Turn Sketch files into Vue.js code automatically

by
Top Product
•

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
John da Maia
Top Product
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
Daniel Roger Casanova
@joaodmj 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?
John da Maia
Top Product
Maker
@danirogerc 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! :)
Daniel Roger Casanova
@joaodmj Do you think you would be able to offer a lifetime subscription for part of your product (no developer revision of course)
Awesome Osisindu
This is mad 🔥. Is it gonna come to Adobe XD & Figma in the future?
John da Maia
Top Product
Maker
@awesomeosisindu absolutely! We are working on adding different design inputs and framework inputs (such as React).
Andy Nguyen
Hi is there any trial to test out instead of example?
Corey O'Brien
@__andynguyen__ 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.
Tom Frazier
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?
John da Maia
Top Product
Maker
@tomfrazier 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.
volkan
That's amazing. I'll try the Zecoda on my next projects.
Tayler O'Dea
Omg! Something I think big big companies has been trying to do for years!! Well done!
Corey O'Brien
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?
John da Maia
Top Product
Maker
@corey_o_brien1 we don't require any grouping or specific work from the designer. The source Sketch file from the Foundation example can be found here: https://niceverynice.com/free-la... 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.
Shruti Kaushik
How long does the developer review take?
John da Maia
Top Product
Maker
@shrutikaushikit at the moment our average is between 24 to 48 hours. Does this works for you?
Bhushan Jain
good.
Bhushan Jain
why only vue.js ? not angular
John da Maia
Top Product
Maker
@bhushan_jain we started with the tools we master. React and Angular are definitely next.