Generate Better Code Snippets with AI: Prompt Engineering Guide

What you’ll get

You will learn how to craft effective prompts to get better code snippets from AI coding assistants. This approach works by providing the AI with specific context and requirements, leading to more accurate and useful code, which is crucial for learning and building projects efficiently.

Tools you need

• ChatGPT (freemium) - A conversational AI model that can generate and explain code.
• GitHub Copilot (paid) - An AI pair programmer that suggests code and entire functions in real-time.
• Cursor (freemium) - A code editor with integrated AI features that can help write and debug code.

Steps

1. Understand the core principle: Be Specific Recognize that AI, like human programmers, needs clear instructions. Vague requests lead to unhelpful code. The key is to provide details about what you want the code to do, its appearance, and its functionality.

2. Rule 1: Tell AI What You’re Building Provide context about the project you are working on. Instead of asking for a generic piece of code, explain the bigger picture.

   I'm building a simple to-do list app for beginners. I need a function that adds a new task to an array and displays it on the webpage. Use JavaScript and make it easy to understand.

   You should see a JavaScript function designed to manage to-do list items, with explanations suitable for a beginner.

3. Rule 2: Mention Your Skill Level Inform the AI about your experience level so it can tailor its response and explanations accordingly.

   I'm new to JavaScript. Can you create a simple calculator that adds two numbers? Please explain each line of code so I can learn.

   Expect a JavaScript calculator code snippet with detailed, line-by-line explanations.

4. Rule 3: Specify the Languages/Tools Clearly state the programming languages, frameworks, or tools you want the AI to use.

   Create a contact form using HTML for structure, CSS for styling, and JavaScript for validation. I'm learning web development basics.

   The AI should provide separate code blocks for HTML, CSS, and JavaScript, all related to a functional contact form.

5. Rule 4: Ask for Explanations Explicitly request that the AI explain the code it generates. This helps in understanding the logic and learning from the output.

   Create a simple function that checks if a password is strong enough. Use Python and explain what each part does so I can understand the logic.

   You will receive a Python function for password strength checking, accompanied by clear explanations of its components.

6. Rule 5: Be Clear About the Output Format Specify how you want the code and any accompanying information to be presented.

   Give me the HTML and CSS code separately, add comments to explain each section, and include instructions on how to test it in a browser.

   The output should be well-organized, with distinct HTML and CSS code sections, inline comments, and testing instructions.

7. Apply to Real Examples: Creating a Simple Webpage Use the rules to refine a vague request into a specific one.

   • Bad Prompt: “Make a webpage”

   • Good Prompt:

     Create a simple personal webpage for a beginner. Include:
     - A header with my name 'John Doe'
     - A paragraph about me
     - A list of my hobbies
     - Basic CSS to make it look nice
     - Comments explaining each HTML tag
     Use beginner-friendly HTML and CSS only.

   You should receive a complete, commented HTML and CSS structure for a basic personal webpage.

8. Apply to Real Examples: JavaScript Function Refine a generic coding request.

   • Bad Prompt: “Write a function”

   • Good Prompt:

     I'm learning JavaScript functions. Create a simple function that:
     - Takes a person's age as input
     - Returns whether they can vote (18 or older)
     - Include comments explaining how if/else statements work
     - Show me how to test the function with different ages

   Expect a JavaScript function that checks voting eligibility, with explanations and testing examples.

Original source

This workflow is based on insights from the blog post “The Art of Talking to AI: Prompts That Actually Work for Coding” by extinctsion, shared on DEV Community. The author emphasizes clear communication with AI tools to achieve better coding results.

Notes & variations

• Free Tier Viability: ChatGPT’s free tier is excellent for learning and generating code snippets. For more advanced or integrated experiences, paid tools like GitHub Copilot or Cursor might be necessary.
• Common Pitfall: Forgetting to specify the programming language or framework. This can lead the AI to generate code in a language you don’t know or aren’t using.
• Tip for Better Results: Always review the AI-generated code. Treat it as a starting point or a learning tool, not a final solution. Test it thoroughly and adapt it to your specific needs.