Summary of Cursor AI prompt writing skills

It’s nice to see you in person. I’d like to share with you my experience and thoughts in practice.

Ambiguous prompt words are also one of the major pain points of AI writing. Have you everCursorDid you input a long description but didn't get the code you wanted? Do you keep trying to make the AI ​​understand your intentions?

Next, I will show you how to master efficient prompt word skills from three aspects, which can increase your development efficiency by more than 3 times. The article contains detailed templates, source code and online website preview.

• The basic structure and principles of prompt words
• Practical reminder word template
• Example of error in prompt word

Basic structure and principles of prompt words

A good Cursor prompt usually consists of three parts:Target Description + Contextual Information + Specific requirements.

For example:

Create a React login component, use Tailwind CSS style, and include email verification function and remember password option.

Effect demonstration:

The Golden Rule of Prompt Words

1. Specificity is better than vagueness : specifying languages, frameworks, and features

2. Brevity is better than verbosity : focus on one clear task at a time

3. Structure over disorder : Using notation to organize information

5 useful prompt word templates

1. Code generation template

Create [functional description] in [programming language], requiring:
1.  [Functional Point 1]
2.  [Functional Point 2]
3.  [Function Point 3]
Style reference: [file path already in the project]

Try it : Copy the following prompt words to Cursor.

Create a sign up page using JSX, requiring:
1.  Use React Jsx syntax
2.  Click Register Now on the login page to jump to this page
3.  The page UI style is consistent with the login page
4.  Reserve API call logic for subsequent implementation
Style reference: components/login.jsx already in the project

Effect display :

On the login page, clickRegister NowJump to the registration page, you can also clickSign in nowJump back. The registration page automatically generates elements for you: username, email address, password, confirm password, terms of service, and privacy policy. If you feel that it does not meet your expectations, you can make specific requirements in the function points.

2. Code explanation template

Explain what the following code does and how it works:
[Paste code that needs explanation]
Main concerns:
-  [Focus 1]
-  [Focus 2]

Try it : Copy the following prompt words.

Explain what the following code does and how it works:
Refer to the code snippet quoted by @
Main concerns:
-Email  and password verification logic
-Login  interface design

Effect display :

3. Code refactoring template

Refactor the following code to improve its [performance/readability/maintainability]:
[Paste the code that needs to be refactored]
Key improvements:
1. [Improvement point 1]
2. [Improvement 2]
But keep the original function unchanged

Try it : Copy the following prompt words.

Refactor the following code to improve the UI design of the page:
Reference @referenced code snippet or file
Key improvements:
1. Design a beautiful background image with gradient colors
2. Add a platform name to the login interface, such as Eric Technology Circle, and generate an icon in front of this name
But keep the original function unchanged

Effect display :

Not only does it help you modify the login page, but it also adjusts the background color of the registration page.

4. Debug auxiliary template

The following code has the [error description] problem:
[paste the code in question]
Error message: [paste error message]
I have tried: [the solution you have tried]
Help me find the problem and fix it

Since no errors were encountered during use, no examples are posted here. You can try it yourself.

5. Function extension template

Based on the existing code:
[Paste existing code]
Add [new function description] function, which needs to be consistent with the existing code style

Try it : Copy the following prompt words.

Based on the existing code:
References @referenced files
Add the following features:
1.  This page currently only supports login by email address and mobile phone number.
2.  Two login methods, you can switch quickly
3.  No password is required for mobile phone number login. Log in by obtaining a verification code
4.  The mobile phone number needs to be verified. Currently, it supports +86 China, 11 digits.
Need to be consistent with existing code style

Effect demonstration :

At present, AI is very powerful. The above generation effects are almost all generated in one go without any errors. I deployed the code directly to the cloud server so that everyone can experience it directly.

Source code: https://github.com/flyeric0212/react-login-demo ^[1]

URL: https://login-demo.flyeric.top/ ^[2]

Prompt word error case

Case 1: Fuzzy prompt words

Before optimization :

Help me write a login function

Possible AI response : Generate a basic generic login function that may not meet the needs of the project

After optimization :

Create a login component using React and Formik, including:
1.  Email and password input box (with verification)
2.  Remember me option
3.  Submit button (with loading state)
The style needs to use the existing tailwind.css class of the project, refer to the style of src/components/Button.js

Possible AI response : Generate a complete login component that conforms to the project's specific technology stack and style

Case 2: Function Implementation

Before optimization :

Write a picture upload

After optimization :

Implementing the React image upload component requires:
1. Support drag and drop and click selection
2. Preview function
3. File size limit (maximum 2MB)
4. Only jpg/png formats are allowed
Integrate existing API: uploadImageToServer(file)

Common Mistakes and How to Avoid Them

at last

Mastering efficient prompt word skills can not only save time, but also significantly improve the quality of the code generated by Cursor for you. Remember: specific, structured, and iterative improvements are the key to improving the quality of AI responses.