Prompting Techniques

List of prompting strategies and approaches.

What exactly prompting is ?

Prompting refers to the method of providing instructions to our coding co-pilot through natural language. You just type a message, and PureCode AI replies based on what you've inputted.

Effective Prompting Strategies

1

Contextual Prompting

Providing context involves offering background information to help the AI understand the environment or scenario, leading to more accurate and relevant responses.​

Example:

Prompt:

// In @Navbar.jsx
// Develop a responsive navigation bar featuring dropdown menus for user settings and notifications.
// Ensure the design is mobile-friendly and aligns with the project's existing styling conventions.

Here, specifying @Navbar.jsx directs the AI to focus on that particular file. Describing the desired features and design considerations provides clear guidance, resulting in code that seamlessly integrates with your project.​

What to Avoid:

Prompt:

// @form.jsx
// Create a form.

This prompt is too vague, lacking details about the form's purpose, fields, validation requirements, or design preferences, making it challenging for the AI to generate useful code.

2

Using Image Prompts

Incorporating images into your prompts allows PureCode AI to generate solutions that closely match your visual expectations.​

Simple Image Upload Prompting:

Prompt:

// Build and refine the UI to closely match the attached image. Ensure precise styling, spacing, and responsiveness.

Image Prompting with Detailed Instructions:

Prompt:

// Develop a mind-mapping application resembling the attached screenshot. The app should allow users to:
// - Add, edit, and delete nodes representing ideas.
// - Connect nodes with draggable lines to illustrate relationships.
// - Move nodes around the canvas with a smooth drag-and-drop interface for easy organization.

Combining detailed descriptions with visual references provides the AI with a clear understanding of your expectations, leading to more accurate and satisfactory code outputs.​

Tips for Effective Image Prompting:

• Be Specific: Clearly describe the desired features, functionalities, and design elements.​

• Provide Context: Explain the purpose of the application or component to guide the AI's focus.​

• Use Visual References: Attach relevant images to offer a concrete example of your expectations.​

This approach aligns with best practices for AI image prompting, emphasizing the importance of specificity and context to achieve desired results.

3

Incremental prompting

Breaking down complex tasks into smaller, sequential steps helps guide PureCode AI through the development process methodically.​

Example:

Prompt:

// @api.js
// Implement a user authentication function with the following steps:
// 1. Validate the provided credentials against the user database.
// 2. Generate a JWT token upon successful validation.
// 3. Set up secure session management to store the token.
// 4. Implement token expiration and renewal mechanisms to maintain session security.

This structured approach ensures that each aspect of the authentication function is addressed systematically, leading to comprehensive and secure code implementation.​

Best Practices:

• Sequential Steps: Outline the process in a logical order to facilitate step-by-step development.​

• Clear Objectives: Define the goal of each step to maintain focus and clarity.​

• Comprehensive Coverage: Ensure all necessary components are included to avoid omissions.​

This method aligns with the principle of encouraging step-by-step reasoning, enhancing the AI's ability to generate detailed and accurate code.

4

Feedback integration

Providing constructive feedback on the AI's outputs allows for refinements, ensuring the generated code meets your specific requirements.​

Example:

Prompt:

// @useAuth.js
// The authentication function performs well. However, please ensure it:
// - Handles token expiration gracefully by prompting users to re-authenticate.
// - Provides clear error messages for failed authentication attempts.
// - Includes logging for monitoring authentication processes.

This feedback highlights specific areas for improvement, guiding the AI to refine the code accordingly.​

Tips for Effective Feedback:

• Be Specific: Identify particular aspects that need adjustment or enhancement.​

• Be Constructive: Frame feedback positively to encourage productive revisions.​

• Be Concise: Communicate your points clearly without unnecessary details.

5

Utilizing File References for Specific Guidance

Referencing specific files or components in your prompts directs PureCode AI's focus, ensuring that code generation aligns with your project's structure.​

Example:

Prompt:

// In @Dashboard.jsx
// Implement a feature that displays user statistics in a graphical format using Chart.js.
// The dashboard should present:
// - A line chart depicting user engagement over the past year.
// - A pie chart showing the distribution of user demographics.
// - A bar chart comparing monthly active users across different regions.

By specifying @Dashboard.jsx, you guide the AI to generate code pertinent to that file, ensuring consistency and relevance within your project's architecture.​

Best Practices:

• Explicit References: Clearly mention the file or component to focus the AI's attention.​

• Detailed Descriptions: Provide comprehensive details about the desired functionality or feature.​

• Consistency: Ensure that the generated code aligns with your project's existing structure and conventions.

Best Practices for Prompt Engineering

1. Be Specific and Provide Context

   Clearly define the task and offer sufficient background information. This helps the AI model understand the scope and nuances of your request.

   Example:

   //In @Navbar.jsx Create a responsive navigation bar component with dropdown menus for user settings and notif

In this example, @Navbar.jsx specifies the exact file, guiding the AI to update the navigation bar component accordingly.

Example to Avoid:

// @form.jsx
// Create a form.

1. Use Structured Formats

Organize your prompts using bullet points, numbered lists, or templates to outline requirements clearly.

Example:

// In @Form.jsx
// Implement a user registration form with the following fields:
// Full Name, Email Address, Password, Confirm Password and Agree to Terms and Conditions
// Ensure form validation, responsive design, and user-friendly error messages.

1. Encourage Step-by-Step Reasoning

   Break down complex tasks into sequential steps to guide the AI through the process.

   Example:

   // @api.js
   // Implement a function to authenticate a user:
   // 1. Validate the provided credentials.
   // 2. Generate a JWT token for valid credentials.
   // 3. Set up session management to store the token securely.
   // 4. Implement token expiration and renewal logic.

4. Provide Feedback for Refinement

After the AI generates a response, give it specific feedback for refinement.

Example:

// @useAuth.js
// The authentication function works fine, but make sure it handles token expiration and asks 

5. Utilize File References for Specific Guidance

Reference specific files or components using the @ symbol to guide the AI's focus.

Example:

// @index.jsx
// Refactor the 'HomePage' component to ensure it loads efficiently by minimizing unnecessary

Common Mistakes to Avoid in Prompt Engineering

1. Being Too Vague

Vague prompts lead to unclear responses. Always ensure your prompt provides sufficient detail.

Example to Avoid:

// @page.jsx
// Generate a component.

Improvement:

// @page.jsx
// Create a responsive navigation bar with a dropdown menu for user settings and notifications

2. Combining Multiple Tasks

Avoid combining too many tasks in a single prompt as it might confuse the AI and lead to incomplete or irrelevant responses.

Example to Avoid:

// @helpers.js
// Refactor the fetchData function and also write unit tests for it.

Improvement:

// @helpers.js
// Refactor the fetchData function to improve performance and readability.

// @helpers.test.js
// Write unit tests to ensure the fetchData function is working correctly.