Utilizing We0 to convert design drafts into code

In this tutorial, we will learn how to use We0 to convert design drafts into code.

Start Using

Before use, please make sure you have Figma or Sketch files and know their file locations clearly.
Note: This function is only available for the online version!

Step One: Upload the Design Draft

Click on the "Upload Sketch or Figma" option above the chat area on the page, or click the upload button below the chat box. You can also directly drag the Figma or Sketch file into the chat area to upload it.

Step Two: Select the content of the design draft and obtain the code

1. After uploading the file and completing the loading process, the Sketch editor will appear. In the lower left corner of the Sketch editor, select the content of the design draft.

2. After completing the content of the selected design draft, click the "Get Code" button at the bottom right corner and send the design draft content to the AI.

Step Three: Select the technology stack

1. After completing the "Obtaining Code" process, a new pop-up window will appear. There are available technical stacks for selection: React, Vue, and WeChat Mini Program. Please choose as needed.

2. After the selection is completed, AI will start converting the design draft into the code of the selected technology stack. After the conversion operation and loading operation are completed, it will automatically jump to the "Preview" section to view the code effect.

Step Four: Select the preview page ratio

Select the preview page ratio at the red frame position. There are four options available: Desktop, Mobile Phone, Tablet PC and Laptop PC.

Try It Yourself

It's your turn now! Open We0 and try to convert the design drafts into codes. Experiment with different designs and functions. Try out various prompts to see what AI can generate for you.

Wish you a smooth and successful experience with We0, and a significant improvement in your business processing speed!