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.
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.
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.
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 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.
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
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.
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.
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.
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.
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.
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!
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
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.
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.
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.
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.
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.
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 [email protected] and give us reason to believe that you'll follow the rules in the future.
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
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!