
Show HN: I trained a deep learning model to build sites for me - johndamaia
https://zecoda.com/
======
johndamaia
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)

~~~
onion2k
_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
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.

~~~
sizzle
Wouldn't you achieve the same feedback with minimal dev effort by simply
modifying the sketch files with the client until they are signed off on it,
which is what designers would be doing before discussing the technical
feasibility/performance tradeoffs with devs for implementation? Assuming you
are working with a designer that is creating sketch files.

~~~
sprafa
Have you worked with clients? If you have a good producer/leader yes you can
get a lot done. But many times this just happens as A. Client approves design
B. You build the Beta of the website and launch it for testing with client C.
Client shows wife/boss/friend who says “I think we should change this”

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

~~~
onion2k
The point I made in my reply is that this tool won't save you from those
meetings and rounds of changes. As it'll speed up the coding side of the
iterative development process by making exactly what the client has described
rather than the developer using their experience to build what the client
actually wants, there'll have be _more_ meetings in order to get to what the
client really needs.

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.

------
potench
I’m sorry but this feels really hand-wavy to me. What did you feed your model
for it to learn how to build vuejs sites? Vuejs template language is total
chaos if you haven’t put in quite a bit of time with vue before, there are 2
or 3 ways to do everything. I am having trouble believing this was auto-
generated from a deeply learned model. How do you write css, are you writing
sass, vue inline styles, or something vanilla? Are you bundling with with
webpack, what custom modules does your webpack use for handling those inline
svgs? So so many questions about how and if this was auto generated...

~~~
johndamaia
Great questions. And I also understand your skepticism. You're not the first
and don't expect you to be the last :)

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.

~~~
potench
Cool, thanks for the reply. For me making components is the hard work,
anything that helps automate organizing / naming / and synchronizing a
component library with sketch sounds intriguing to me. Is the output intended
to be code-edited by a developer to add hrefs, interactivity? Is it intended
to generate pseudo components for later finessing or is it intended to produce
the final outcome of a site directly from sketch (making Sketch the new
dreamweaver?)

~~~
johndamaia
It's intended to be code-edited by a developer. The goal is to have an advance
starting point. You'll start with "everything" ready to work on the fun stuff.
If you curious enough to see the output I'm happy to share the code from our
demo. If it makes sense drop me a line at john [@] zecoda.com

~~~
aznumeric
Hi. I would like to have an option of using just the automated part of the
service and do the developer part myself. If hypothetically you would include
that option, how cheaper do you think it wold be compared to the current price
? Also one more option: convert design to just HTML and CSS, without
javascript or framework of any kind. Would that make sense ?

~~~
johndamaia
Interesting feedback. Our main goal is to ditch the human verification, we
want to be confident enough to provide great code automatically. Not there
yet.

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.

~~~
aznumeric
Sounds good. Regarding the no-framework output, I'm not against frameworks, I
was just thinking for a moment from the perspective of a more traditional web
designer who only incorporates bits of pre-made JS code in their design. Such
a person might not even know what Vue.js is but may still greatly benefit from
your service if it allowed them to convert their designs to just html/css.

------
ReDeiPirati
It's really great to see more and more companies emerging in the market from
these initial ideas/PoC:

[1] Pix2Code:
[https://arxiv.org/abs/1705.07962](https://arxiv.org/abs/1705.07962)

[2] Sketch2Code: [https://airbnb.design/sketching-
interfaces/](https://airbnb.design/sketching-interfaces/)

[3] ScreenShot2Code: [https://blog.floydhub.com/turning-design-mockups-into-
code-w...](https://blog.floydhub.com/turning-design-mockups-into-code-with-
deep-learning/)

~~~
jongold
Totally. The SharpieClassifier we built at Airbnb was super simple because we
had a relatively fixed set of components that could be declaratively rendered
with React or react-sketchapp as simply as <Marquee /> etc. I can't imagine
how much more complex UIzard & Zecoda are - mad respect to the developers and
for being able to commercialize these ideas.

Aside: I actually built react-sketchapp as a roundabout way of being able to
build more interesting AI plugins for Sketch.

------
modo_
Sorry to be a bit meta here-- but a question about the design of the site.

This style of pastel colors, wavy svg graphics, and happy avatars seems super
popular right now [1] [2] [3]. 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

[1] [https://www.gusto.com](https://www.gusto.com) [2]
[https://www.tandem.chat](https://www.tandem.chat) [3]
[https://www.notion.so](https://www.notion.so)

~~~
reneherse
Another question about the design of the page: Does this kind of
conversational / persona based pitch actually work to convert users? E.G. "Hi
I'm Clara, my life's goal is... I struggle with..." "If you relate with Clara,
try X now..."

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.

~~~
johndamaia
Great feedback! I guess we just need to find our best target market. We
believe the decision makers will be managers and not technical people
(engineers that relate more with the product page instead of the emotional
illustrations). But I could be wrong...

~~~
reneherse
Right, how to be relevant to both the decision maker as well as the end-user
is a key question.

I'm working on a product in a similar space, and struggling with the question
for our own marketing materials. Amy Hoy's material [1] on audience
"worldviews" has been helpful so far. (No personal affiliation.)

Best of luck with your launch!

[1] [https://stackingthebricks.com/niches-are-for-
suckers/](https://stackingthebricks.com/niches-are-for-suckers/)

------
itsmefaz
This is very interesting. I love the approach to the problem that you are
trying to solve. However, there are few questions that I will try to answer
with respective to the product.

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.

~~~
johndamaia
Let me turn back some questions to you:

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.

~~~
monkeynotes
It would be interesting to see the quality of the code. Way back in the 90s
Macromedia had a product called Fireworks, which Adobe subsequently bought
(along with Flash, Dreamweaver etc.). It could turn designs into HTML+CSS but
the code was horrible and no-one used it professionally.

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.

~~~
johndamaia
Thanks so much for your words. Happy to share our demo code, would love your
feedback. If you think it makes sense, drop me a line at john [@] zecoda.com

~~~
halostatue
It might be easier, since this is targeted at developers, to make a GitHub
repo with both the Sketch files and the generated code so that we can
determine whether this is something that we’d benefit from.

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.

------
mattkevan
Surprised it’s Vue and not React. Vue is great, but there’s a lot of activity
in the Sketch <-> React space, for example AirBnb’s Lona [0]. This could fit
in nicely.

[0] [https://github.com/airbnb/Lona](https://github.com/airbnb/Lona)

~~~
jongold
Lona is After Effects -> web / native.

You might be thinking about react-sketchapp[1] or SharpieClassifier [2]

(I built both :P)

[1] [https://airbnb.design/painting-with-
code/](https://airbnb.design/painting-with-code/) [2]
[https://airbnb.design/sketching-interfaces/](https://airbnb.design/sketching-
interfaces/)

~~~
mattkevan
I thought Lottie was the After Effects to code plugin. Happy to be wrong
though.

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.

------
247yak
Looks like Yotako...[https://www.yotako.io/](https://www.yotako.io/)

Whats the difference? Yotako seems to be in the deadpool though...havn't seen
anything new in ages. Hard to scale this stuff.

~~~
johndamaia
Didn't know them. The concept seems the same :)

~~~
preommr
Is this just a quick and short project or have you been working on this long
term?

~~~
johndamaia
One month full time; around one year part-time.

------
baalimago
Excuse my pessimism in this sea of optimism, but I see a .sketch-> vue.js
converter which has proprietary elements of DL which later on gets checked
with manual work anyway.

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?

------
markbnj
This is a really interesting project, thanks for sharing. I think it's going
to be difficult to get the model to the point where it generalizes well for
lots of different designs, but that's no reason not to try. Really hard
problems sometimes lead to really big wins.

------
gotrythis
Hi. Wish you had one-off pricing. I'm sure there are agencies that do that
kind of volume. I would love to use your service a few times a year.

~~~
acallaghan
I'm the same - I'd pay $30/40 for a single one, but yearly cost of $99 is too
much

~~~
johndamaia
Can you please clarify what you mean by "single one"? You'd pay $30/40 for how
many pages of one site?

~~~
acallaghan
As in using it a single time - I guess maybe at most 2/3 pages from one
design?

~~~
johndamaia
Ok, cool. In fact you are right in our price point of $9 per artboard. The
only think we need to evaluate is the one-off possibility which I'm sure we
can try.

------
noonespecial
I'm honestly kind of surprised nothing like this has found its way into Sketch
itself yet.

Looks cool so far.

~~~
stunt
I also always thought this is a natural thing for Sketch to have it. Webflow
gives similar experience of Sketch but to build web pages.

------
stormtv
This is really cool, it is really hard to evaluate the value of Zencoda
without the code output of the demo. I get that the full product is not ready
but being able to see the input and one good output would tell us a lot.

~~~
johndamaia
Thanks! Happy to share our demo code, would love your feedback. If you think
it makes sense, drop me a line at john [@] zecoda.com

------
nl
I built a thing like thi, and went quite a long way down the commercialization
path.

The problem is that round-tripping is what almost everyone wants, and it's
really hard to get to work.

~~~
johndamaia
Can you elaborate on what you mean by round-tripping please?

~~~
dminor
I assume they mean from web back to sketch.

~~~
johndamaia
Meaning going from front-end code to Sketch, right? Is this something you
need?

------
llarsson
Is the home page itself built with this?

Can you share the input file and an estimate on how long it took to work with
the output to make it production ready?

~~~
johndamaia
Most of the website was started with the model. However I was learning along
the way, so most pages were fairly changed.

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.

~~~
SandyAndyPerth
A dogfooding video, where you build your own site with it, would be _much_
more convincing.

------
bitL
The next step is to allow voice/touch-driven repositioning of elements that
the initial model didn't get right, e.g. telling it to "move Submit above
Cancel" or just grabbing it and placing it there. That would clear most issues
customers have and they could do that themselves, including changing
styles/themes and seeing how it behaves right away.

------
gitgud
Hi John, great idea but the demo didn't really convince me. How much of the
system relies on engineers cleaning up the code?

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?

~~~
johndamaia
Hey! No worries, I'm starting to like the skepticism, it makes the job
funnier. Right now we are doing it right ~90% of the whole page. The
responsiveness is done by the system automatically (it makes decisions on its
own, therefore they could be wrong). No need to have it on the Sketch file.

~~~
gitgud
I guess when you present magic, people get skeptical ;)

But seriously, I hope you guys do well, thanks for responding to all these
skeptical comments

------
xcubic
Hey john. Congrats on this, this is very interesting. From someone interested
in ML/AI, can you explain just a bit more how the deep learning works?

~~~
johndamaia
Without going into detail, our model outputs the coordinates of the html
elements it recognize. We are taking a visual approach to the problem.

~~~
xcubic
I imagine you do some kind of image recognition on the sketch files and then
do the code generation.

------
miguelrochefort
I once built a tool that generates XAML from Sketch files and Zeplin projects.

I can now see how AI would have made my job easier.

------
bkyan
I'm curious how you are handling ambiguity in the original design. Does the
algorithm create multiple variants when something could be interpreted in
multiple ways, and then the manual validation part of the process involves
picking from among the different variants that the algorithm created?

~~~
johndamaia
It's simpler than that. The model makes only one choice based on what it
learnt. However you gave an excellent idea :)

------
mrhappyunhappy
I predict that one day you'll be able to input your content, specify some site
layouts you like and press a button to generate a completely ujique website
based on your content, fully designed and coded. The first person to make that
is going to be very rich.

~~~
mLuby
Firedrop _was_ doing that, but it seems they've pivoted to something else.

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.

------
egman_ekki
Seems a bit similar to what Avocode was/is trying to solve. Haven't followed
them closely recently, but seems like they pivoted from pure design->code tool
to design & collaboration tool that enables easy export to code...

------
Nohak
Always a pleasure to see others end up with a project that I've working on
myself for 2 years on my free time... Don't expect to have the market... I'll.
(even if I have to set prices twice cheaper than yours). Sorry, I was working
on this project for... 2 years on my free time. I can't fail. I don't matter
if I "steal" your customers or what. Because during these 2 years, I was
working for my firm, then I was going to workout for 1 hour, then I was
working on this project for 3 hours, then bedtime. My weekends and holidays
were dedicated-only to the project dev. I didn't have any social life for 2
years in order to work on a Websites generator. And YOU come with your own
sites generator????? And you created it with a team, not me I was alone. I
will have the market for me only. Too many sacrifices.

------
aasasd
It would help if there were examples of input and output—images of Sketch
files and HTML pages that were generated (without manual fixes, if that's an
option in your offers).

------
forthispurpose
Since it is completely automated and the code is doing all the processing, why
is the price so high and why is there even a charge is per artboard?

Sketch is like 1/10th of that

~~~
johndamaia
Not completely automated at this stage. Check my last paragraph on my first
comment here. As soon we can make it work 100% automatically we will have much
more freedom to change our pricing model.

------
dudado
This looks promising, however, I'm not sure about the pricing model, $99 per
month (IF billed annually) for 10 designs (10 artboards)?

~~~
johndamaia
Yes, one artboard usually correspond to one webpage. How much were you willing
to pay? Is this a problem you have every week?

------
sombremesa
Your rates are higher than paying someone (offshore) to convert the artboards
- why? Should be much cheaper if it's automated.

~~~
johndamaia
Wow, do you know developers that convert artboards to full webpage for $9? But
I understand your point, we are intentionally pricing it at a high point.
Hopefully we'll be able to decrease it in the future.

~~~
sombremesa
The definition of "full webpage" can be scaled out of that price point, but
yes. I wish you best of luck.

------
thrownaway954
wouldn't be surprised if this dude is bought out by Invision in the coming
year or two.

------
iamleppert
How many FTE engineers can this replace? Do you have a case study or
whitepaper?

~~~
johndamaia
Our goal is not to replace engineers. Is to increase their productivity and
give them more time to create awesome products.

~~~
Kerrick
Sure, but every bit of automation that "increases productivity" and "gives
more time for other things" naturally ends up replacing those that it was
helping -- if not directly, at least replacing potential future hires in the
same role.

------
otsdr
There's a useless vertical scrollbar on desktop.

~~~
madhato
#app { ... overflow-y: scroll !important; }

Is causing it and not needed.

~~~
johndamaia
Thanks!!!

------
diggan
From
[https://news.ycombinator.com/showhn.html](https://news.ycombinator.com/showhn.html)

> 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.

~~~
johndamaia
Updated. Thanks for the heads up.

------
katsura
Sorry to be that guy, but fullstory, google tagmanager, and hotjar all on the
same page, without any indication to the user that their every move is being
tracked. This site is not too GDPR compatible.

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

