Basic components of an effective prompt
- Be specific
- Use technical terms
- Provide context
- Ask for examples
- Iterate
Other helpful components:
- Ask for use cases
- Inform if you are a beginner and want simple instructions
- Ask how or why you might use something
- Ask for atypical examples or a very specific example
- Inform it of the programming language(s) you are using
- Inform where and how it will be used (is this a new project or one that already exists, what libraries are in use, etc)
- e.g., "Assume I already have a setup a React project"
Examples:
❌ "How do I center something?"
✅ "What's the best way to center a div element horizontally and vertically on a webpage?"
❌ "Explain reduce"
✅ Specify language/technology and request examples: "Explain JavaScript's reduce() method, and include two code examples."
✅ Include additional context like audience and project status: "Explain JavaScript's reduce() method to me as if I am a beginning developer just learning how to code. Provide an example of how I can use reduce() to calculate the total price of several items in a shopping cart"
❌ "How do I create a form?"
✅ "Please create a form in JavaScript with one input that accepts a string and, on submit, prints that word to the webpage in reverse."
❌ "Show me an example React component"
✅ "Please create an example React component that takes in at least one prop and demonstrates how to use hooks like useState and useEffect. The example should not be a typical 'Hello World' example like a counter or a greeting. Assume that I have already set up a React project."
A Simple Template
[Context]
+ [Supplemental information]
+ [Intent / Use of result]
+ [Format you would like the result in]
Control the length and format of responses
Ask it to respond...
- with a specific number of steps, words, sentences, bullet points, etc
- in a tabular or flow-chart format
- by creating pseudo-code in the form of code comments
- using an analogy
- by specifically including or excluding things
- with the TL;DR
- by providing it with some code and have it explain every line
- with only the code that needs to be modified
- step-by-step using a simple code example such as ...
- with an acronym that will help you remember things
Examples:
✅ Ask for steps: "Provide a brief 2-step explanation of creating a custom JavaScript event"
✅ Info as a table: "Highlight the differences between React and Vue in a tabular format"
✅ Summarize with bullet points: "Please summarize in 3 bullet points why innerHTML should be avoided"
✅ Prompt for most important concepts: "List the 5 most important JavaScript concepts a beginning developer should know before learning React."
✅ Summarize as flow chart: "Use a flowchart to explain how to make a pull request on Github"
✅ Summarize as pseudo code: "Create pseudo code in the form of code comments describing how I can write a React component that displays the time in a user's local timezone."
✅ Ask for analogy or metaphor: "Explain the concept of the JavaScript event loop using an analogy"
Break down tasks into smaller steps
Be sure to understand and test the code as you go (to prevent bugs).
How might you break it down?
- overall intent and functionality
- data structure and working with it
- layout
- responsiveness
- accessibility
- features
- components
- pages
- styling
Important considerations:
- Put it all into a list
- Define requirements
Examples:
❌ Avoid very long prompts with many instructions:
"Help me build a small React application to help users visualize their budget. The application should consist of a form with three inputs: a budget title, a total budget, and current expenditures. When the user submits the form, a progress bar should be added to the page. The progress bar should be green if less than 50% ..."
✅ Break project into subtasks, and subtasks into numbered or bulleted lists:
"Help me build a small React application to help users visualize their budget. Make sure it meets the following requirements:
- Include a form component with three inputs: budget title, budget and spent
- When the form is submitted, add the new budget to an array of budgets"
Optimize Prompts
Use the same AI to optimize and improve your prompts that you then feed back into it.
- Give ChatGPT an overview of what you're trying to accomplish and prompt it to ask you clarifying questions.
- "I'm going to give you a prompt, and I want you to help me optimize it. Ask me clarifying questions, then suggest a more effective prompt that will yield a more accurate and detailed output. Got it?"
- "I'm going to give you a prompt and I want you to ask me clarifying questions to help optimize the prompt. Suggest a more effective prompt based on my answers. Here's the prompt: ..."
- Answer its clarifying questions
- When it returns an optimized prompt you can further refine it and then feed that prompt back into ChatGPT.
Role-Based Prompting
You ask the AI to take on a specific persona while interacting with you.
- "Act as a..." or "You are a..."
- "Project manager. Help me define features / help me define an MVP for an app that does XYZ."
- "Software architect. Advise me on how to scaffold my project / advise me about what technologies I should use to build my app."
- "Career coach. Review my resume / ask me interview questions / help me figure out what to ask the interviewer."
- Prompt ChatGPT to ask clarifying questions.
- Assume a role to define technologies, determine key features, and write user stories.
- Start with a prompt that yields a broad overview of what you might need for an MVP.
- Pick one area to focus on and answer the clarifying questions.
Example (planning out an entire application):
- "Act as an expert in systems design and architecture, and advise me on how to design the front end of a React application that helps users keep track of how often to water and fertilize their house plants."
- "You are now a Product Owner tasked with gathering requirements for this project. What features and functionality should this application have? Ask me clarifying questions, if necessary."
- "Let's concentrate first on Plant Information. Include: plant nickname, plant image, watering and fertilizer frequency, last watered (in days), last fertilized (in days), and notes."
- "I now want you to act as a Product Manager. Write user stories based on the above requirement."
- "You are the Product Manager of this application. Please advise me, as a software engineer, which user stories are most necessary to create an MVP for prototyping and demo purposes."
- "Act as a software architect and give me advice on how to design the front end of a React application based on the following user stories: As a user, I want to be able to assign a unique nickname to my plant, so that I can easily identify and personalize each plant I own. This is a basic feature to allow users to manage multiple plants. As a user, I want to upload an image of my plant, so I can visualize it within the app. Having visual representation is key to the user experience."
- "You and I are a software engineering team. Discuss the requirements for the first 3 user stories and turn them into tickets to be entered in Jira."
Prompt With Examples
- "Please write a function to total an array of numbers and return the value as a dollar amount: Example input: [5, 40.5, 9, 45, 23, 50], Example output: $172.50"
You can even first describe some mock data you would like it generate, then use that mock data within your prompt as an example of the sort of data you want it to work with.
- "Please generate some dummy JSON data for music events. Include the following properties:
- band name
- event date and time
- ticket cost
- venue
- band genre"
From the Prompt Engineering for Web Developers↗ course on FreeCodeCamp↗ taught by Treasure Porth↗.