Home Web Front-end JS Tutorial My first experience with Cursor + Claude Sonnet

My first experience with Cursor + Claude Sonnet

Sep 03, 2024 pm 05:04 PM

My first experience using Cursor as an IDE and Claude 3.5 Sonnet to develop software

Minha primeira experiência com Cursor + Claude Sonnet

I believe that by now you have heard of, or at least seen something related to Cursor. If not, here is a brief description of what it is, according to its own documentation:

Cursor is a fork of VS Code. This allows us to focus on making the best way to code with AI, while offering a familiar text editing experience.

In summary, Cursor is an IDE that has integration and functionalities directly linked to the use of AI for software development.

That said, let's look at my experience :)

I leave here the link to the repository: Game of Life

My background

So that you have a closer understanding of my experience, I will leave here some information that may be relevant to the result and my final considerations:

  • I'm a software developer, more specifically Front-end with 5 years of experience
  • I have a degree in Computer Science
  • I had never used any IDE-level extension other than Github Copilot that involved AI
  • Yes, I use ChatGPT in my daily life (I have several points about this, but that's for a next post)

Like every experience, we need to define rules:

I am REQUIRED to accept AI-generated code suggestions
Use English as a language of communication
I cannot change the code in order to find solutions to bugs and/or improve the quality of what was generated
Objective
To test everything that has been pointed out, the objective is to implement an interactive version of Jhon Cornway's "Game of Life" using Angular 17 (yes, the version is relevant to the content of this article)

Game of Life

The game of life is a cellular Automaton, which has some defined rules:

  • A living cell with 2 or 3 living neighbors remains alive.
  • A living cell with less than 2 living neighbors dies.
  • A living cell with more than 3 living neighbors dies.
  • A dead cell with exactly 3 living neighbors becomes alive.

Minha primeira experiência com Cursor + Claude Sonnet

Prompts

As previously stated, the language used was English for the entire interaction and the commands were given directly and clearly, such as:

Implements "Game of Life" in a grid with full width and height of the screen.
Add a button that randomizes the grid and another one that is going to start
the simulation. Please use Angular Material for the styles

Important: I decided to write this article a little after the test and I lost the history with the commands and the results, so I can't put 100% of what I wrote and that explains the absence of the result of each command. However, I will do a follow-up with the next steps and evolution of this project.

For each code generation, I accepted everything, ran it and asked for corrections such as layout adjustment, margin, bugs, etc.

Code quality

I can't say that the code is perfect, but I can say with ease that readable and understandable code was generated at all times, so that if necessary I would be able to intervene and correct/improve something that was generated.

Bugs/Problems

Just like us flesh-and-blood programmers, AIs also generate bugs, and my first contact was no different. I had a lot of problems with the positioning of elements in the layout (such as the statistics and visibility of the buttons), some problems with the colors of the grid and the main one: the pattern detection system doesn't work (but it is listed as next steps).

Even with the problems, the generated code was reliable and solved what was requested, requiring some adjustments here and there. It is worth highlighting that the rules of the Game of Life were all implemented without any problems or need for adjustment.

Time

I believe I spent less than 1h30m on the entire project, taking into account that I was still getting used to the shortcuts and testing some ways of carrying out the prompts. And although it's not a very complex project, I would need at least 2x that time (being optimistic) to implement it in the same way.

Positive points

  • Fast code generation
  • The flexibility of adding context to each command makes it much easier to fix bugs, create functions and look for problems you might not have known were there
  • Code that works :)
  • IDE based on VSCode, so I could simply import everything I use in my day-to-day life

Negative points

  • It is still difficult to solve some problems (mainly related to layout)
  • Although the code is functional, some implementations leave a little to be desired

Conclusion

I am very surprised and very satisfied with the quality of everything that was produced and I believe that I can benefit a lot from this on a daily basis for manual and repetitive work such as generating tests, fixing simple bugs, creating MVP's and concepts simple, so I still need to make adjustments so that the quality of the code pleases me.

Next Steps

Now that the first prototype has been made, the next steps will be to create new features for this project (I really want to fix Pattern detection and add some pre-implemented patterns like Logic Gates). Furthermore, I will create applications using technologies that I do not master (but I want to learn like Three.js) and not only accept the code, but also adjust and improve the quality of what was generated to understand the real potential.

Ah, I also want to see how v0 is working (it looks very interesting).

Again the link to the repository on Github: Game of Life.

If you've read this far, thank you very much :)
Leave your review or suggestion for future posts here

The above is the detailed content of My first experience with Cursor + Claude Sonnet. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What should I do if I encounter garbled code printing for front-end thermal paper receipts? What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

Demystifying JavaScript: What It Does and Why It Matters Demystifying JavaScript: What It Does and Why It Matters Apr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

Who gets paid more Python or JavaScript? Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

How to merge array elements with the same ID into one object using JavaScript? How to merge array elements with the same ID into one object using JavaScript? Apr 04, 2025 pm 05:09 PM

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

Is JavaScript hard to learn? Is JavaScript hard to learn? Apr 03, 2025 am 12:20 AM

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? How to achieve parallax scrolling and element animation effects, like Shiseido's official website? or: How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? Apr 04, 2025 pm 05:36 PM

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

The difference in console.log output result: Why are the two calls different? The difference in console.log output result: Why are the two calls different? Apr 04, 2025 pm 05:12 PM

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

The Evolution of JavaScript: Current Trends and Future Prospects The Evolution of JavaScript: Current Trends and Future Prospects Apr 10, 2025 am 09:33 AM

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

See all articles