# Convert 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](/getting-started/login-create-project-in-monday-hero.md) to your Monday Hero account.
2. [Create a Flutter project](/getting-started/login-create-project-in-monday-hero.md). 
3. [Upload](/getting-started/import-design-files-into-monday-hero.md) designs to your project. Please make sure the designs are revised to[ get the best code results](/getting-started/design-handoff-to-ios-android-developer.md) on Monday Hero.
4. Create[ custom Flutter components](/design-to-flutter/creating-components/custom-components.md) 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.

   <figure><img src="/files/HnZ6PpKsI0LTfsiIIreY" alt=""><figcaption><p>Hero AI Assistant</p></figcaption></figure>

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

<figure><img src="/files/6aYe6sZ8TB8zHs5elUoS" alt=""><figcaption></figcaption></figure>

6. Select '**Convert to React**' on the prompts and then click '**Submit**'.&#x20;

<figure><img src="/files/CEzv9vKa3DnZszUcXIUO" alt=""><figcaption><p>Prompts Screen</p></figcaption></figure>

Now you have the React code created for you!

<figure><img src="/files/UlqDEK1i8NtJ414UJQwC" alt=""><figcaption><p>React Code</p></figcaption></figure>

7. 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:

<figure><img src="/files/FVAu2IAY46QIl8m4EQzu" alt=""><figcaption><p>React Code Example</p></figcaption></figure>

<figure><img src="/files/8WdtnwIaS1zgqruZ895K" alt=""><figcaption><p>React Code Example Continued</p></figcaption></figure>

{% hint style="info" %}
Please remember to add the Colors Code to the AI Assistant prompt to ensure the correct colors in the generated React code.
{% endhint %}

<figure><img src="/files/J271ZoiG8rHEGA2JXdAp" alt=""><figcaption><p>Color Code</p></figcaption></figure>

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn.mondayhero.io/design-to-react/convert-design-to-react.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.