Boosty

We transform visual design into code

0 followers

We transform visual design into code

0 followers

At Boosty we help web developers by converting design images into code — automatically. Don't waste time on basic HTML/CSS implementation and dive into what matters !

Launch tags:Design Tools•Productivity•Developer Tools

Launch Team

CloudflareYour next app belongs on Cloudflare Workers. Deploy for free

Promoted

Hi, Are you planning to do the source code manegement or version control? not only generate the source code, but also integrated with the best practices mainstream solutions (github, jenkings, etc).

Report

7yr ago

Maker

@andres_burbano Hi ! Thank you for this question ! On this V0.1 there is no design system version control but as I said it's just the beginning. Considering that design system will be mainly equivalent to a classical code project we will certainly propose a versioning system not yet determined. Once this is done, every CI/CD solutions will be available to react to change on the design system. This implies a way of "committing" design system modification not yet implemented neither ! By the way, it also means we will have to handle designers changes within their designs, which means we have to connect with all existing design tools ! I should get back to work ! haha ;)

Report

7yr ago

Very interesting. Clearly, the work of turning a designer's visual design into code based layout is a pain. Inputs from tools that allow animation and UX preview such as Indesign or some of the many wireframe tools as well could be a nice addition. Also Android layout XML and Java skeleton would be great and the equivalent for iOS.

Report

7yr ago

Maker

@pierre_wargnier Thanks Pierre ! You completely get the point : we want to avoid obvious and boring coding for the developers and let them do the fun part ! Integration of famous tools like Sketch, Figma, InVision or Adobe XD are a must be and we know that. For now, converting these designs to a screenshot is what it takes to start but we will take advantages of the pixel perfect information contained in layer based files. Actually, our way of processing allows us to get the big picture of the screen and understand the goal of the component (not only its shape, position or colors). It will allow us to generate "logical" code in addition to the "styling" code. Concerning code generation, we will generate different translators, going from the extracted design to several outputs. First of them will be Typescript/javascript frameworks/libraries (Angular for instance) then we will work on native app (Android & iOS obviously).

Report

7yr ago

Maker

Hi everyone ! Here comes the work of the holidays : almost 3 weeks of code to extract information from static visual design (aka screenshots). We trained several neural networks to detect an arbitrary list of web components in order to produce the hierarchy of the design and its properties. It is far from exhaustive but still, we would like your feedbacks on this V0.1 ! :) The final objective here is to help the developers by producing the first lines of code of their webapp. We are focusing first on the Design System extraction to produce a vanilla HTML/CSS webpage. We will then go towards Angular, React and Vue code generation. At its core, Boosty extracts a hierarchy with its secret sauce, but we plan on open-sourcing the translating part (from hierarchy to actual code). Available features : - text extraction - palette extraction - components hierarchy - design system extraction V0.1 - web page reconstruction Features to come : - API endpoints (of course !) - integration of GrapeJS to allow user to edit generated pages - font recognition - image matching between a source folder and the proposed design - modern framework code generation (Angular, React, Vue) - Storybook integration - and others ! ;) Other companies working on the same subject: - Uizard.io (from hand-drawn sketch to Sketch file): we want to be able to analyse any kind of design, not only hand drawn sketches. - Fronty.com (from screenshots to editable web pages): instead of an editable hosted result (#noCode) we are here for developers and we want to give exportable code !

Report

7yr ago

Very interesting concept and application of deep learning algorithms. I think the main contribution is definitely the idea of having clean and reusable code generation 👍 The integration with a tool like GrapeJS would make the solution more complete. I would love to see an expansion for Android apps !!!

Report

7yr ago

Maker

@susana_sanchez_restrepo Thank you Susana, GrapeJS is actually in our roadmap in order to be able to simply edit the detected components. Concerning code generation, we will generate different translators, going from the extracted design to several outputs. First of them will be Typescript/javascript frameworks/libraries (Angular for instance) then we will work on native app (Android & iOS obviously).

Report

7yr ago

What a win of time !!

Report

7yr ago

Maker

@casini Thanks you ! And it's only the beginning ! ;)

Report

7yr ago

Reviews

No reviews yetBe the first to leave a review for Boosty