Hello! It's great to see you again.
In our previous lessons, we've explored how to give the AI a direct command (zero-shot prompting) and how to guide it with examples (few-shot prompting). These are fundamental skills for generating initial ideas and ensuring design consistency. But to truly collaborate with an AI on complex projects like building an app, you need to elevate the conversation. You need to brief the AI the way you would a human expert.
This lesson focuses on exactly that. You will learn how to structure prompts using role-playing and context-setting. Think of it as moving from a manager who gives simple tasks to a project lead who provides a full briefing. By giving the AI a specific role to play and the context it needs to succeed, you can unlock a new level of precision and quality in the code and designs it generates.
Why Just Telling Isn't Enough
When you're vibe coding, you're not just asking for a static image; you're asking for functional code, logical structure, and a specific user experience. A simple command like "build a login page" leaves too much to chance. What technology should it use? What should the design feel like? Who is the user?
Without answers to these questions, the AI has to guess, and its guesses might not align with your vision. By providing a role and context, you replace guesswork with clear direction.
Part 1: Setting the Role - Get the Right Advice
The first technique is incredibly simple but powerful: tell the AI who it should be. Large language models are trained on a vast ocean of text from countless experts. By assigning a role, you're telling the AI which "hat" to wear, focusing its response through the lens of a specific persona.
This is called role-playing. You can ask the AI to be anything from a helpful teacher to a critical code reviewer. Let's watch a quick, non-coding example from the Visual Studio Code team that makes this concept very clear.
Essential AI prompts for developers
This video from the official Visual Studio Code channel demonstrates several essential prompting techniques for developers. We'll focus on the 'role prompt'.
Watch the segment from the beginning of the 'role prompt' section. Notice how the user tells the AI it's a teacher who is good at making complex topics simple and then asks it to teach a subject. This primes the AI for a specific style of interaction.
Now, how does this apply to vibe coding? You can get much more specific and sophisticated results by assigning a role relevant to your project.
Mastering prompting techniques for vibe coding | by Zahwah Jameel | Medium
This article from Medium provides a great overview of prompting for code generation. We'll focus on its section on role-playing.
Please read the section titled "Role play and style to steer the output." Pay close attention to the different types of personas you can assign, such as a "senior React Native developer" or a "cybersecurity expert."
As the article highlights, you can use role-playing to influence not just the technical content but also the style and quality of the output. Here are some examples relevant to your goals:
- For a landing page: "You are an expert front-end developer specializing in high-conversion marketing websites. You write clean HTML and CSS that is optimized for speed and user engagement."
- For a business app: "You are a full-stack developer with expertise in building secure and scalable business applications using React and Node.js."
- For debugging: "You are a meticulous code reviewer. Your job is to find potential bugs, performance issues, and deviations from best practices in the code I provide."
Assigning a role is like pointing the AI's vast intelligence in a specific direction. But to get to the destination, it also needs a map.
Part 2: Setting the Scene - Providing Context
Giving the AI a role is only half the story. A senior developer, no matter how skilled, can't work effectively without a project brief. This is where context-setting comes in. You must provide the AI with all the relevant background information it needs to understand the project's goals, constraints, and environment.
The "Prompt Engineering Playbook" explains this fundamental principle well.
The Prompt Engineering Playbook for Programmers
This playbook offers deep, practical advice for programmers using AI. We'll focus on its core principle of providing context.
Read the first bullet point in the "Foundations of effective code prompting" section, titled "Provide rich context." The key takeaway is to assume the AI knows nothing about your project initially.
So, what does "rich context" look like for a vibe coding project? It can include several types of information. Let's turn back to the "Mastering prompting techniques" article, which breaks this down beautifully.
Mastering prompting techniques for vibe coding | by Zahwah Jameel | Medium
This article provides an excellent breakdown of how to give the AI the background it needs.
Please read the section titled "Set the scene with context and constraints." As you read, focus on the different kinds of context you can provide: A user story to explain the why. The tech stack to define the how. Constraints to set the boundaries. Existing code to ensure consistency. Must-have requirements like accessibility or responsiveness.
Providing this context up front saves you from endless back-and-forth corrections. It frames the problem for the AI so that its first attempt is much closer to your desired outcome.
For example, a vague prompt might be:
"Build a contact form."
An effective prompt with context would be:
"Build a contact form for a portfolio website. The user is a potential client, so the tone should be professional. It needs fields for name, email, and a message. Use React for the front-end and ensure the form is fully responsive for mobile devices. On submission, it should display a 'Thank you' message."
See the difference? The second prompt provides a story, tech requirements, and functional details, giving the AI a much clearer target.
Part 3: The Structured Prompt Framework
Now, let's put these two powerful techniques—role-playing and context-setting—together. A great way to do this is to use a structured framework for your prompts. This ensures you cover all your bases every time.
This image provides a fantastic mental model for structuring your prompts.
Let's break down how this structure maps to what you've learned:
- Persona: This is the role-playing part. Who is the AI? (e.g., "You are a senior startup advisor...")
- Goal (Task): This is the core instruction, the what you want the AI to do. (e.g., "...draft a concise, Series A investor update...")
- Context: This is the context-setting part. It includes all the background information, user stories, and environmental details. (e.g., "...for a European startup that just closed a €3M round...")
- Constraint: These are the rules and guardrails. This could be a word count, a specific technology, or a coding standard. (e.g., "Keep it under 200 words. Use a confident but approachable tone...")
- Example: This is the few-shot prompting technique you learned in the last lesson. Providing an example of the desired output style is a powerful way to guide the AI.
By consistently using this framework, you transform your prompts from simple commands into comprehensive project briefs, dramatically improving the quality and relevance of the AI's output.
Your Turn: Draft a Structured Prompt
Let's put this into practice. Imagine you're building the landing page for the freelance virtual assistant business we've used in previous lessons. Your task is to create a structured prompt for an AI coding assistant to generate the code for the main "hero" section of the page (the very first thing a visitor sees).
Your Task:
Using the five-part framework (Persona, Goal, Context, Constraint, Example), write a single, detailed prompt to generate the HTML and CSS for this hero section.
Brand & Project Details:
- Business: Virtual Assistant for small business owners.
- Brand Vibe: Professional, organized, trustworthy, modern, clean.
- Key Services: Database Collection, Data Entry, Report Generation.
- Call to Action: "Get Your Free Consultation"
Take about 10 minutes to draft your prompt. Don't worry about writing perfect code, focus on providing clear instructions in each part of the framework. Think about what a real developer would need to know to build this for you.
Conclusion
Great job! Today, you've learned how to conduct a much more sophisticated conversation with AI assistants. By moving beyond simple commands to providing detailed briefings, you are now equipped to tackle more complex "vibe coding" projects.
Here are the key takeaways from this lesson:
- Role-Playing: Assigning a persona to the AI (e.g., "You are an expert UX designer") focuses its knowledge and shapes the style of its response.
- Context-Setting: Providing the AI with the project's background, goals, tech stack, and constraints is crucial for getting relevant and accurate results. It's the difference between the AI guessing and knowing.
- Structured Prompts: Using a framework like Persona, Goal, Context, Constraint, and Example ensures your prompts are comprehensive, clear, and effective.
In our next lesson, we will discuss a critical technical limitation of AI assistants: the context window. Everything you put in your prompt—the role, the context, the code—has to fit into the AI's limited short-term memory. We'll explore what this "context window" is and why you'll sometimes see the AI "forget" things in a long conversation.