Show HN: Building websites from Sketch using deep learning – public launch | Hacker News Reader

Show HN: Building websites from Sketch using deep learning – public launch

zecoda.com

140 pointsjohndamaia68 comments

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.

Demo: https://zecoda.com/#demo

Follow our journey: https://twitter.com/zecodahq

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

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

PS - Have a great Thanksgiving everybody!

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.

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

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.

Ok, that's obvious! Will definitely add that. Thanks so much for the suggestion.

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

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

Excellent!

I am looking forward to this too.

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'

I see your point. And I also understand your skepticism. You're not the first and don't expect you to be the last :) Trying to sum why we are calling AI to our product:

- Our model learned the website's components visually (e.g. what is a navbar, an input, a button, etc) - The AI outputs the UI elements' coordinates - Without the output from our deep learning model we aren't able to automate the whole process

Regarding examples of the generated code, as said previously, it's definitely on our top priorities.

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

Or even an if else.

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 ?

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.

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.

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

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.

One price and unlimited artboard would look more beneficial. Only 3 sounds limiting even though people may not use more than 3. Like unlimited gmail vs old 2 gb yahoo mail.

Hm, interesting. Like $X per month for unlimited artboards conversions? The only thing keeping us from doing that is the direct cost we still have per project - because of the human validation layer.

Check out designpickle.com. They have unlimited design work for a set price per month. The founder has been on a number of podcasts and always gets asked if people abuse this (white label their own design company for example) and it's not been a problem.

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.

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?

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

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

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.

You should care as a customer because if the page needs fixes that the converter did not code properly (and probably cannot fix by itself), the code should be simple enough so that a single developer (or a small team) can change & fix it quickly

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?

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.

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.

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.

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

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.

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.

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

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.

Thanks for the support!

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.

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.

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.

Working on it as we speak :)

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.

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!

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.

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

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

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

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

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

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.

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.

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.

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

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

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.

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.

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

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

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

Already made the change, thanks!

You can enable fullscreen in the embedded video. Specifically change &fs=0 to &fs=1 in the iframe src and add an "allowfullscreen" attribute to the iframe element.

Thanks! Will push to production later today.

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!

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.

all AI is meat based

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.

Did you watch the good place? xD

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?

You can't post like this here. It breaks not only the site guidelines (https://news.ycombinator.com/newsguidelines.html) but also the Show HN rules: 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.

Reply on news.ycombinator.com