Frontend code generation using CursorAI

Nowaday, AI can do many tasks in the development process. It helps us to speed up the many phases, example: Coding, reviewing, testing...
In this post, I will introduce how to use AI to support the coding phase (Frontend)

CursorAI can understand the screenshot image of the web design, then automatically convert it into code in many frameworks (VueJS, ReactJS...)

Below are the steps

• Install CursorAI

Download CursorAI from this link https://www.cursor.com/en/downloads 

Install and apply for Trial version (In Trial version, we will have about 50 free requests)

After install, we will have the CursorAI IDE as following

• Open Frontend project

Using the CursorAI IDE, open the frontend project folder

• Get the design screenshot

We go the the screenshot of the screen design, then capture it (In this example, I will use the table in the Excel file directly)

• Request CursorAI to generate the source code

In the CursorAI chat window, type the request (also attach the screenshot which we captured in the above step)

Then wait for the AI agent do the generation, we will have the output like below

• Tuning the generated source code

After the source code generation, we will need to check if the output matches our needs.

Then, if we need to modify somethings, we will request the AI for that

Example:

1. 1. Add dropdown list for Language column
      
   2. Fields validation
      

• Finally, we will have the output as below

We can use CursorAI to generate others screenshot source code in another framework also.
Hope this can help you in coding.

For more detailed usage instructions, you can visit the official site:
https://www.cursor.com/