8 ms·

Founder here. As a front end developer, I turn design files into front-end code regularly. But it's a repetitive and demotivating task. It takes time, lots of m

Founder here. As a front end developer, I turn design files into front-end code regularly. But it's a repetitive and demotivating task. It takes time, lots of meetings and boring back and forth questions. I want to change that. 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. [1] Demo: https://zecoda.com/#demo https://zecoda.com/#demo [2] Request early access: https://zecoda.com/#subscribe https://zecoda.com/#subscribe

nkozyra 7y ago
Interested to see this. 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.
- johndamaia 7y ago
  Actually my workflow improved drastically after getting the boiler plate to work on the fun stuff (interactivity, animations, etc). I use this tool to get started much faster.
mkagenius 7y ago
Hey, why not give something for people to try. I know[1] it takes (GPU) resources and may give it a hug of death but its much better to let at least some people try it out and give this a feedback while its hot. People may lose interest later on, who knows. 1. Something I made and let people use but nobody uses: https://comic2gif.com https://comic2gif.com
- johndamaia 7y ago
  Good point. I'll definitely give it for people to try in the next couple weeks.
  - ioeatcode 7y ago
    Eh, if anything maybe invite one or two people for usability testing. Otherwise, having that many data points this early on might hurt your business.
- ALittleLight 7y ago
  You may want to have an example comic gif on the homepage. I didn't really understand what it did until I tried it. Plus, it would be neat if panels with more text were visible longer.
  - mkagenius 7y ago
    > You may want to have an example comic gif on the homepage 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.
gilbertmpanga12 7y ago
What stack did you use?
onion2k 7y ago
It takes time, lots of meetings and boring back and forth questions. I want to change that. 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.
- wlesieutre 7y ago
  Depending on the customer, that could still be helpful. I've worked with people where you can ask them very specific questions over and over and get nowhere - the only way they're capable of moving forward is if you give them something you know is wrong so they can look at it and say "No, it needs to X." It's annoying to do, but if you can automate producing the initially wrong product for review it'd be easier.
  - throwaway743 7y ago
    Couldn't agree with you more
  - kthejoker2 7y ago
    Cunningham's Law is one of the truest design patterns in all of mankind.
    - moehm 7y ago
      For everyone else: "Cunningham's Law states 'the best way to get the right answer on the internet is not to ask a question; it's to post the wrong answer.'" [0] [0] https://meta.wikimedia.org/wiki/Cunningham%27s_Law https://meta.wikimedia.org/wiki/Cunningham%27s_Law
  - sizzle 7y ago
friendlybus 7y ago
How well do you think this concept will scale to bigger code bases and bigger production tools like photoshop? The next step up has been pushing ML/DL/AI to do more sophisticated tasks and that means more sophisticated tools.
- johndamaia 7y ago
  At this stage we are working hard to solve this simple problem of going from a design file to a front-end boiler plate. No animations or logic. We are looking forward to get as much feedback as possible from our users to understand where to go next.
SteveMoody73 7y ago
Interesting idea but how maintainable is the code? 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
- johndamaia 7y ago
  That's our main goal. To always give you good code. Otherwise this tool doesn't make sense. Hopefully you'll find this code maintainable with close to zero rewrites.
digikata 7y ago
Is the access to provide data tagging inputs and outputs or to the model too? Will either the data or the model be open sourced?
thomasfl 7y ago
Seems like you’ e created the ultimate sketch plugin.
doubleorseven 7y ago
Wow, nice work! I used to work for Webydo on the part that translate the DB to static files, tons of work and the result was basically an "uneditable HTML blob". I would really love to see the output zip file, any change you have something less complicated that goes responsive to show?
- johndamaia 7y ago
  If you think it can help, I can send you the output code for the demo. Drop me a line at john [@] zecoda.com
nicklovescode 7y ago
Hi! I'm super curious about how you structured the input and output to the neural network, and which architecture you chose, if you're willing to share (I work at OpenAI) If you do share I'm happy to give you feedback here if I have any!

nkozyra 7y ago

Interested to see this. 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.

johndamaia 7y ago
Actually my workflow improved drastically after getting the boiler plate to work on the fun stuff (interactivity, animations, etc). I use this tool to get started much faster.

mkagenius 7y ago

Hey, why not give something for people to try. I know[1] it takes (GPU) resources and may give it a hug of death but its much better to let at least some people try it out and give this a feedback while its hot. People may lose interest later on, who knows. 1. Something I made and let people use but nobody uses: https://comic2gif.com https://comic2gif.com

johndamaia 7y ago
Good point. I'll definitely give it for people to try in the next couple weeks.
- ioeatcode 7y ago
  Eh, if anything maybe invite one or two people for usability testing. Otherwise, having that many data points this early on might hurt your business.
ALittleLight 7y ago
You may want to have an example comic gif on the homepage. I didn't really understand what it did until I tried it. Plus, it would be neat if panels with more text were visible longer.
- mkagenius 7y ago
  > You may want to have an example comic gif on the homepage 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.

gilbertmpanga12 7y ago

What stack did you use?

onion2k 7y ago

It takes time, lots of meetings and boring back and forth questions. I want to change that. 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.

wlesieutre 7y ago
Depending on the customer, that could still be helpful. I've worked with people where you can ask them very specific questions over and over and get nowhere - the only way they're capable of moving forward is if you give them something you know is wrong so they can look at it and say "No, it needs to X." It's annoying to do, but if you can automate producing the initially wrong product for review it'd be easier.
- throwaway743 7y ago
  Couldn't agree with you more
- kthejoker2 7y ago
  Cunningham's Law is one of the truest design patterns in all of mankind.
  - moehm 7y ago
    For everyone else: "Cunningham's Law states 'the best way to get the right answer on the internet is not to ask a question; it's to post the wrong answer.'" [0] [0] https://meta.wikimedia.org/wiki/Cunningham%27s_Law https://meta.wikimedia.org/wiki/Cunningham%27s_Law
- sizzle 7y ago

friendlybus 7y ago

How well do you think this concept will scale to bigger code bases and bigger production tools like photoshop? The next step up has been pushing ML/DL/AI to do more sophisticated tasks and that means more sophisticated tools.

johndamaia 7y ago
At this stage we are working hard to solve this simple problem of going from a design file to a front-end boiler plate. No animations or logic. We are looking forward to get as much feedback as possible from our users to understand where to go next.

SteveMoody73 7y ago

Interesting idea but how maintainable is the code? 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

johndamaia 7y ago
That's our main goal. To always give you good code. Otherwise this tool doesn't make sense. Hopefully you'll find this code maintainable with close to zero rewrites.

digikata 7y ago

Is the access to provide data tagging inputs and outputs or to the model too? Will either the data or the model be open sourced?

thomasfl 7y ago

Seems like you’ e created the ultimate sketch plugin.

doubleorseven 7y ago

Wow, nice work! I used to work for Webydo on the part that translate the DB to static files, tons of work and the result was basically an "uneditable HTML blob". I would really love to see the output zip file, any change you have something less complicated that goes responsive to show?

johndamaia 7y ago
If you think it can help, I can send you the output code for the demo. Drop me a line at john [@] zecoda.com

nicklovescode 7y ago

Hi! I'm super curious about how you structured the input and output to the neural network, and which architecture you chose, if you're willing to share (I work at OpenAI) If you do share I'm happy to give you feedback here if I have any!