Cursor: Front-End Development with Enhanced Efficiency

This article was published on other platforms in early December 2024. It is shared here to complement related readings.

Please allow me to use a shocking title, as my experience with Cursor version 0.43 has truly surprised me.

The previous article on <span>Windsurf</span> claimed to surpass Cursor, ranking second on the “AI 7-Day Chart.” For a newcomer like me, this is quite motivating. When I wrote that article, Cursor was still on version 0.42. I left a note to try out version 0.43, and here I am.

This article will not directly list or compare official features but will showcase the capabilities of Cursor 0.43 through real development scenarios.

Preparation Steps

  1. Install Cursor version 0.43.
  2. Register and log in.
  3. Ensure you have quota; throughout this article, I will be using the model<span>claude-3.5-sonnet</span>.

Practical Process

Scenario

Implement the following interface.

Cursor: Front-End Development with Enhanced Efficiency

I feel the interface looks quite good and should reflect the level of a junior front-end engineer to some extent.

This page is a screenshot of “Daily Workbench – Efficient Office, Used Every Day.” The software is quite interesting, and if you need it, you can try it out.

Initialize Project

Start

Open an empty folder,<span>Ctrl+I</span> to bring up the<span>Composer</span> panel.

Cursor: Front-End Development with Enhanced Efficiency

Create a Clean Project

Enter the content for the initialized project, and remember to select<span>agent</span> in the image above. Once selected, you can experience the most important upgrade feature of Cursor 0.43.

Create a clean Vue 2 project using vue-cli
Cursor: Front-End Development with Enhanced Efficiency

The interactivity has improved; the terminal commands will only run after I confirm. The built-in terminal in Composer executes similarly to<span>Windsurf</span>.

Although this change is minor, the workflow during development has become more logical, eliminating the need to switch contexts.

Start Project

After execution is complete, you can also run the project directly within Composer.

Cursor: Front-End Development with Enhanced Efficiency

Effect

The effect after running.

Cursor: Front-End Development with Enhanced Efficiency

Implement Initial Version of the Interface

Implement Interface

Send the image to Cursor and let it implement the interface without using specific prompts, just ordinary conversation.

Help me implement this page, especially the layout, style, and appearance, while keeping them consistent
Cursor: Front-End Development with Enhanced Efficiency

Error Fixing

After running, I previewed and found an error.

Cursor: Front-End Development with Enhanced Efficiency

Just send the error screenshot to Cursor; you can paste the copied screenshot directly into the Composer dialogue box without needing to click upload.

Cursor: Front-End Development with Enhanced Efficiency

Response requesting a fix.

Cursor: Front-End Development with Enhanced Efficiency

From the image, you can see that the summary of each file change mentioned in the<span>Windsurf</span> article has also been added by Cursor.

Effect

At this point, the preview effect is as follows. The main elements’ effects have emerged, but there are still some layout and detail issues. Let’s continue.

Cursor: Front-End Development with Enhanced Efficiency

Optimize Display Effects

To make the interface closer to expectations, we need to tell Cursor the points for improvement.

Please carefully refer to the design diagram; the overall background is an image, and these contents do not fill the entire screen but occupy the center of the view.

This adjustment command may generate modifications in multiple areas, and you can determine if anything is missing by checking the position shown in the image below.

Cursor: Front-End Development with Enhanced Efficiency

After previewing again, the effect seems better; multiple issues in the command have been fixed, and even a background image has been found through<span>unsplash</span>. The key is that the overall interface effect is quite consistent.

Cursor: Front-End Development with Enhanced Efficiency

Alright, that’s it.

Final Effect

Original image:

Cursor: Front-End Development with Enhanced Efficiency

Generated:

Cursor: Front-End Development with Enhanced Efficiency

Conclusion

Recently, there has been a voice saying, “Large models can only rank and have no substantial landing.” I personally feel this is somewhat one-sided. Just like today’s scenario, perhaps Cursor doesn’t directly solve the client’s needs in one step, but the time for front-end engineers to implement a specific interface has indeed been greatly reduced.

It took quite a bit of time to organize this case into an article, but the entire process, from creating an empty folder to the final effect, took<span>less than 30 minutes</span>. Moreover, I was also using another large model to write the project plan simultaneously, as the waiting time for generation can be a waste.

Finally, let me explain the title.

I have always believed that large models can indeed enhance development efficiency, whether in front-end or back-end development, and I also believe that the profession of programmer will certainly not disappear.

  • One reason is that complex requirements are still something large models cannot solve at present, which is an objective reality.
  • The other is that many programmers understand large models better than non-programmers; the results generated by programmers for the same problem can often be much better.

Although the profession of programmer will not disappear, the demand for junior programmers will surely adjust with the improvement of development efficiency. Therefore, I advise everyone to learn about large models as soon as possible, just like the first batch of workers who tried using machines; those who take the first step will likely benefit. If nothing else, it will also add a competitive skill.

From my personal experience, the work originally done by three junior programmers can now be completed by one junior programmer and one large model. I even feel I might be conservative, as large models tend to generate fewer bugs.

The development of technological trends will not stop because of personal preferences, and I hope everyone finds their work increasingly easier and job searching becomes more manageable.

Leave a Comment