Convert Design to React

Use Hero AI Assistant to convert the design to React.

The Monday Hero Team is working hard to enable you to create the React projects. However, without this support, you can still get React code from Monday Hero using the steps below:

How to Get React Code:

1. Log in to your Monday Hero account.

2. Create a Flutter project.

3. Upload designs to your project. Please make sure the designs are revised to get the best code results on Monday Hero.

4. Create custom Flutter components like Custom Widgets, Buttons, Lists, and more. Preview the code on Monday Hero if you like.

5. Once the component code is ready, click 'AI Assistant' to start.

   

   Hero AI Assistant

Once you start the Assistant, it will automatically generate the Flutter code.

1. Select 'Convert to React' on the prompts and then click 'Submit'.

Prompts Screen

Now you have the React code created for you!

React Code

1. Once you have the React code, you can either use it in the way that's provided or write your own prompt. For example you can type: 'Create Styled Components' in order to get the styles separately(like the example below). It's done!

Here is another React code example:

React Code Example

React Code Example Continued

Please remember to add the Colors Code to the AI Assistant prompt to ensure the correct colors in the generated React code.

Color Code

If you have new prompt requests or any questions, please contact us at [email protected] or visit https://mondayhero.io and start a chat from the bottom right of the page.