Deco smart code experience version is officially online, come to experience design draft one click to generate code ~
What is Deco?
Deco Smart Code project is our team’s exploration in the direction of “front-end intelligence”. It focuses on the one-click generation of multi-terminal code from design draft, and realizes the ability to parse design draft such as Sketch/Photoshop and directly generate multi-terminal code (Taro/React/Vue). Deco enables front-end engineers not to spend a lot of energy on the design draft, greatly saving the development cost, providing powerful support for the output of more multi-terminal pages, and bringing great power for the business cost reduction and efficiency increase.
In the past year, Deco has successfully landed in two major promotions of JD. In the construction of personalized event venue, the r&d efficiency has increased by 48%.
Today, Deco is out!
In the past period of time, Deco was faced with the internal scene of JINGdong, and the outside world could not experience Deco. Many external users expressed their demands for Deco to us, and we have been recording the demands of each user’s feedback in a small book.
Today, we are finally releasing the first beta of our product! !
Dear users, please visit the following link to experience intelligent code.
Usage guide for nanny class
Installing a plug-in
This plug-in applies to Mac. Currently, only Sketch is supported. Ensure that the Sketch has been installed before installing the Deco plug-in
-
On the homepage of the official website, click to download the plugin
-
Double-click to install the plug-in
-
If “Deco” is displayed in the tail plug-in of the Tool, the installation is successful. If “Deco” is displayed in the tail plug-in of the tool, exit The Tool completely and perform the preceding steps to open The Tool again.
Export data
-
Open the plug-in. In the Expand menu, click export Data.
-
After selecting the Sketch palette or a layer in Sketch, click on the Plugins panel and wait for the thumbnail and the name of the palette to appear. Then click export Data. (If you have not logged in, the login window is displayed first, and you can export it again after login.)
-
Wait to upload. If the following message is displayed, the upload is successful
Click the button “Paste data to the workbench” to jump directly to the workbench to view the intelligent code, click the “back button” to continue to upload other design draft modules.
Workbench view
-
Enter the personal workstation. Use the shortcut key “Control + V” to paste raw data into the workbench.
-
After the load is complete, you can view the page generated by the structure and style
-
Download the code
Click the “Download code” button in the upper right corner to open the dialog box. You can select the code framework provided and click Download to get the code package for the corresponding framework.
Future plans
Due to time constraints, many features have not been released, but don’t worry, more powerful features are on the way! We will gradually open up the internal version of Deco so that Deco can be a great helper for developers in the industry.
Component identification and automatic replacement
In the realization of static code generation, based on THE AI algorithm, we realized the existing components in the page for identification, positioning, and efficient mapping to components in the component library, finally free the hands of developers.
Cover more r&d scenarios
We also customized a low-code platform for the whole process of r&d, with functions covering property editing, event definition, data binding, asynchronous data request and other functions, covering the core process of R&D, which can realize one-stop page development, reduce the development threshold and improve development efficiency.
More and more
We’ve written a number of technical articles about it in the past, and we’ve received a lot of feedback, so you can see the technical implementation behind smart code.
Design draft one key generation code, research and development of intelligent exploration and practice
Help double 11 personalized venue efficient delivery: Deco intelligent code technology revealed
Introduction to ultra-basic machine learning – Principles