
Show HN: Building websites from Sketch using deep learning – public launch - johndamaia
https://zecoda.com/product
======
johndamaia
Founder here, again [1]. In August I’ve shared a side project that partially
converted Sketch files into front-end code with the help of deep learning.
Because of the feedback I got here and the number of early access requests I
decided to open a private Beta in September.

It was the best decision I’ve ever made. In the last 3 months I found too many
bugs and had incorrect assumptions. But learned so much because of all manual
validation required to deliver projects. I now understand better my target
market. Most importantly I’ve learned from actual paying customers [2].

We still don’t have the whole process 100% automated though. We are delivering
projects, on average, within 48 hours (too much time IMHO). Our goal is to
decrease the delivery time for 12 hours in the next quarter. To achieve this
we need more training data and a better human validation workflow.

Because we have more under control - but really far from knowing it all - we
are ready to launch publicly. Zecoda it’s a payed product because:

\- We still have human validation

\- We are solving a real world problem that has intrinsic value

\- We are in the business of making our customers happy and will never ship
bad code

What we guarantee is that, if you are unhappy with the results, we'll refund
you. Hopefully we’ll be able to open a free tier in the future. Just need to
reduce human verification to the minimum.

I’d love to hear your feedback and questions. This time you can actual try it
:)

We can be more productive without repetitive tasks.

//

Sign up: [https://zecoda.com/register](https://zecoda.com/register)

Demo: [https://zecoda.com/#demo](https://zecoda.com/#demo)

Follow our journey:
[https://twitter.com/zecodahq](https://twitter.com/zecodahq)

[1]
[https://news.ycombinator.com/item?id=20624140](https://news.ycombinator.com/item?id=20624140)

[2] [https://zecoda.com/#customers](https://zecoda.com/#customers)

PS - Have a great Thanksgiving everybody!

~~~
nautical
Just playing devil`s advocate here, in the demo video :

1) Part 1 : You upload the file to the application and say we will run AI in
background and a human verifies the file hence it will take time.

2) Part 2 : The code gets generated and you carry on from that point .

The problem is the time on your laptop for second part is 4:41pm and time
shown on laptop for first part is 4:54 pm.

So it looks like you had the code before you uploaded the file.

I understand this might be for demo but gives wrong impression to people.

~~~
johndamaia
Thanks for the heads up. Will definitely work on an examples page.

------
DrJid
Would be great if there was a section showing some sample example sites. That
was the first thing I was looking for and it seems like an omission on the
frontpage.

~~~
nicnash
yes, specifically the code it generates. I realize theres human intervention,
but on average what is the output.

~~~
johndamaia
Thanks for reinforcing the importance of this feature! :) Just added it to our
top priorities.

~~~
trenchgun
Excellent!

I am looking forward to this too.

------
wired_devil
I am skeptical with what people is calling 'AI' this days. I was expecting to
see the generated code before subscription, there is a lot of sass that clain
they have AI, but is only a bunch of if's and people 'helping the code'

~~~
avip
You're being overly harsh. Sometimes there's also an else.

~~~
johndamaia
Or even an if else.

------
bilekas
Why only a subscription based payment model ?

If I only want to 'convert' one sketch is there an option ?

Or do I have to process my 1 sketch in lets say your turnaround time is 1
week, then cancel my subscription ?

~~~
johndamaia
That's a great question. Why not a 'per usage' model? We went for subscription
because we learned, from our Beta, that our customers convert an average of 3
artboards per month. It's a valid point though and we are open to reiterate on
feedback.

~~~
didgeoridoo
I’m surprised by this observed usage pattern.

I would have expected a spike in usage upon initial signup representing
initial bulk artboard conversion, followed by a lower steady-state usage for
updates & iterations, with periodic annual/biannual spikes for major
redesigns.

Technically your pricing model supports this — a customer would just buy
“overages”. But people often don’t like paying both a baseline subscription
plus overage fees, as it can feel like the service is punishing them for
straying outside plan lines.

Have you looked into a “credit rollover” type pricing model, plus some kind of
kickoff bonus? E.g. you get 5 artboard credits on signup, then accumulate 2
per month that you can use whenever you want. (This is the approach Audible
uses, for example.)

Users would be able to top up their credits whenever they want, but are
rewarded for deferring low-priority usage so their credits build up in
anticipation of more important work. There’s also the additional advantage of
sunk-cost perceptions making users less likely to churn a service while they
have credits in the bank, even if they can’t envision exactly how they’d use
them today.

~~~
johndamaia
That's great feedback! I appreciate the detail suggestion. I'll definitely
have a close look at this possibility. It makes sense. The only hesitation I
have in giving credits is the direct cost I still have per project (because of
the human validation layer).

~~~
gbear605
I’d expect that you would make the getting two credits cost the same as the
current subscription, so the total income is the same, it just lets users feel
freer to not have to come up with new projects each month.

------
NewsAware
This looks impressive, kudos. Definately a novelty from HN audience
standpoint.

By why would I as typical customer care how an agency (who you are
substituting) converts sketch to site? I want quality, good price, fast
delivery. Everything else can be a black box.

Don't get me wrong, not criticizing your idea or business model, just the
marketing angle.

~~~
johndamaia
Exactly! You nailed it, our goal is to reduce the cost of Sketch to front-end
code keeping the quality. We hope to reduce that cost with the help of AI. How
can we improve our marketing angle then?

~~~
janekm
I had the same reaction... Is "AI" a selling point to your likely customers?
Otherwise it might be worth de-emphasizing it. You could turn it around... "We
have humans generate your front-end code assisted by AI so we can keep prices
affordable". To me, if I read "we use AI to do X" I read it as "we've got some
algorithms that do a crappy job of X but we sell it cheap".

~~~
johndamaia
Interesting point you are making. Never thought about it that way. Will
definitely think about it in detail because in the that's exactly our selling
point: "generate your front-end code assisted by AI so we can keep prices
affordable".

~~~
NewsAware
Of course you can leverage the uniqueness of the approach initially to get
trials/pr (as you are doing here in HN), just that won't be sustainable as
selling point.

------
dharma1
Looks interesting!

How do you generate the hover states, if they are not in the sketch file?

Do you have to structure the layers/components in a certain way, or do you use
ML from pixel data?

Any plans for Figma/React?

~~~
johndamaia
Yes, our goal is to have as much input and output tools as possible.

The hover state was indicated on the Sketch file with a pointer hand cursor.
This decision was made by the human layer.

------
tomxor
This looks a lot like a WYSIWYG editor, is that a fair description? e.g using
ML in place of some deterministic, manually defined heuristics for code
generation.

I can imagine how it might produce better results and code than the terrible
WYSIWYG editors of the early 2000s. However I would be careful about how much
you market with the term "AI", as it could create unrealistic expectations.

~~~
johndamaia
It basically turns Sketch into a WYSIWYG editor, yes. Regarding the marketing
angle, I agree. It has been a fairly common advice here; we'll review our
approach to market.

------
beaconstudios
I'm doing something similar-ish (not AI but attempting to allow people to
"draw" their UI and convert to a constraint-based layout ie HTML/CSS). It
seems to me that the fundamental issue is there's no explicit information as
to which edges of which nodes are meant to be constrained to which other
edges. Is this box meant to be fixed-width, or stretch with its container?

How are you addressing this issue? I could be missing something but it seems
to me that you can only really generate these constraints using guesswork
("this left-edge is only 10px away from its parent so it's probably meant to
be a padding") and that while that may work for the majority of cases, it
couldn't be fully automated as you're essentially guessing at user intents
that have not been made explicit.

Either way I'm supportive of the goal - I think this could be a great product
if you can either fix that issue or make it so it doesn't matter (with human
corrections or additional inputs from the user or something like that).

~~~
johndamaia
Good point. Our algorithm obviously has to make decisions. Sometimes it's
right, sometimes absolutely wrong. However the goal is to output a legible and
workable front-end code.

~~~
beaconstudios
that's great, it would definitely reduce the amount of time I have to spent
implementing sketch files. Do you have support for slicing sub-sections of a
sketch file? As I work on long-lived products in my contracting work, I'm
often implementing features that have been added as new UI to existing sketch
designs.

~~~
johndamaia
Not yet. It's on our backlog though. Totally agree that's an important feature
to add.

------
diveanon
Products like this are why I got out of FE dev. The overwhelming majority of
what most FE devs do can and will be automated.

Stringing together various API's to match a sketch file and integrate with a
backend is a task to be automated that should not require a full time
developer making a 6 figure salary.

I am interested to see how this product is received, good luck to the team
behind this.

~~~
johndamaia
Thanks for the support!

------
iudqnolq
Looks really useful.

Some small feedback: When I clicked "Front end created with Zecoda" I expected
to learn about how your site is an example of how your program works well. For
example, to see a side-by-side of the sketch file, rendered code, and raw
html/css/js. Instead, I got a signup prompt with no offer of what I'd get in
return (sign in to see our site in our editor or something).

The message "Be happy, we are doing this for you" is grammatically awkward and
sounds a little passive aggressive.

The acronym "IOHO" might be too causal, I think.

~~~
johndamaia
Thanks so much for all your feedback. We are working on a examples page and
we'll make the "Front end created with Zecoda" badge a link to that page.

~~~
iudqnolq
Cool! If you're not planning to already, I'd suggest showing the code you
produce on a "for developers" page. I'd want to know if for example the
function/variable names are reasonable, and if in general it looks
understandable and maintainable by a human.

~~~
johndamaia
Working on it as we speak :)

------
imvetri
Great idea and appreciate your efforts to action.

Q1: using sketch filesto convert it to code is a good idea. How scalable is
your project at its current status to scale it to work for mock up images. In
other words- how easy is for your software to convert an UX image to code. We
would like to see some POCs.

~~~
johndamaia
Our NN actually learn from images. However the Sketch file is essential to get
texts and specific element styles. It's a good idea to explore though. Thanks!

------
dynjo
So a few problems:

1\. No trial of any kind without subscribing (yes I know about the refund
option).

2\. No way to contact support when logged in.

3\. No way to delete my account (it's 2019 people...)

Will certainly take another look when I can try without buying.

~~~
johndamaia
All valid points you are making. Will definitely add 2 and 3 today. Thanks!

------
z3t4
You can get someone on any of the freelancing sites to convert your design to
HTML and even a WordPress site - at the cost of five bucks. For 30 bucks you
also get a design. If you want quality the prices will go up exponentially
though. But noone seem to care about quality /grumpy freelancer

------
cbowal
@johndamaia – your Zillow testimonial has "an" misspelt in "knock ant
artboard"

~~~
johndamaia
Thanks! It was a direct "copy paste" from the client quote. Will fix it later
today.

------
void445be54d48a
Can it build complex forms too or is this just "the robot makes a squarespace
website"?

~~~
johndamaia
It doesn't send any data or have axios integrated. It will output the form
(probably in Vue) for a developer on the client side to connect the dots with
an API.

~~~
ng12
Building the form widget is the easy part, "connecting the dots" as you say is
what takes 80% of the time and produces 99% of the bugs.

~~~
johndamaia
Not sure I agree. From our own experience the boring and time consuming part
is translating the specific design to front-end code. "Connecting the dots" is
the essential and most important part, not necessarily what it takes more
time.

~~~
ng12
I suppose if your use case is marketing sites or something similar. This
doesn't match my experience at all.

~~~
KaoruAoiShiho
Nah man, my sites are all very complex apps. Managing the UI is the
complicated part, reading data from an api is relatively trivial.

~~~
ng12
There's more to building your UI than just implementing the design. Even if
using this tool all the logic and state management you have to do by yourself.

Putting together the form is the easy part, especially in a large application.
You implement your inputs once and re-use them across the app. It's managing
the UX and business logic that's hard.

~~~
KaoruAoiShiho
Well I haven't used the tool but I kinda just assumed they would do a good job
at this. If all they do is implement each page independently of each other and
there's not vue best practices then it's really useless. But I assume it would
handle the complexity of the UI.

------
kierenj
The demo video was quite small on my screen, and I couldn't make it go
fullscreen. Might be good to allow fullscreen.

I also second the top comment: some demos would be necessary to prove the
value of the app, I think

~~~
johndamaia
We are using Youtube embed - they control the player. Which device were you
using?

~~~
xingyzt
YouTube embeds have an option to allow fullscreen (allowfullscreen="true").
You didn't turn it on.

~~~
johndamaia
Already made the change, thanks!

------
srikanthsrnvs
This is so cool. How did you build this? How did you train your net? Does it
even use a net? I'd love to know about how this works!

~~~
johndamaia
We trained a NN to learn UI elements like buttons, inputs, navbar, etc. With
that information we can grab the Sketch elements and build the correct UI in
the correct coordinates.

------
DyslexicAtheist
all AI is meat based

~~~
johndamaia
I agree. We are in a stage where human validation is essential to guarantee a
fair output. From "Amazon Go" to "Unbabel", all have "meat" behind it.

------
tyzerdak
Did you watch the good place? xD

------
trpc
nice to see more of these snake oil/fake SaaS by indie developers, enjoy the
easy money while it lasts, because it won't for so long, or will it?

~~~
dang
You can't post like this here. It breaks not only the site guidelines
([https://news.ycombinator.com/newsguidelines.html](https://news.ycombinator.com/newsguidelines.html))
but also the Show HN rules:
[https://news.ycombinator.com/showhn.html](https://news.ycombinator.com/showhn.html).

You've been posting comments that break the site guidelines at an alarming
rate. We've asked you several times to stop. Since you keep doing it. I've
banned this account. If you don't want to be banned, you're welcome to email
hn@ycombinator.com and give us reason to believe that you'll follow the rules
in the future.

