Talking to AI
The quality of AI output depends on how you communicate with it. This is the most important skill in vibe coding. Learn it well.
The art of prompting
A prompt is what you type to the AI. Good prompts get good results. Bad prompts waste time.
The key insight: AI does not read your mind. It only knows what you tell it. The more context and clarity you provide, the better it performs.
Bad: "Make a login form"
Good: "Create a login form with email and password fields. Use React and Tailwind CSS. Include validation that shows error messages below each field. Add a 'Forgot password' link and a 'Sign up' link at the bottom."
The CRAFT framework
Use this framework to write better prompts:
- C - Context: What is the project? What have you built so far?
- R - Role: What should the AI act as? (React developer, UX designer, etc.)
- A - Action: What specific thing should it do?
- F - Format: How should the output look? (Code, list, explanation?)
- T - Tone: Any style preferences? (Simple, detailed, commented?)
Context: I am building a task manager app with Next.js and Supabase. I already have user authentication working. Role: Act as a senior React developer. Action: Create a TaskList component that fetches tasks from Supabase and displays them in a list. Each task should show the title, due date, and a checkbox to mark it complete. Format: Give me the complete component code with TypeScript types. Tone: Add brief comments explaining key parts.
Providing context
Context is everything AI knows about your project. More context = better suggestions.
Ways to provide context:
- Project description: Start each session by describing what you are building
- File references: Point to specific files ("Look at src/components/Header.jsx")
- Code snippets: Paste relevant code into your prompt
- Error messages: Include the full error when debugging
- Screenshots: Some tools accept images of UI you want to recreate
Iterative refinement
You rarely get perfect results on the first try. That is normal. Vibe coding is a conversation, not a one-shot request.
The iteration loop:
- Ask: Make your initial request
- Review: Look at what AI generated
- Refine: Ask for specific changes
- Repeat: Keep going until it is right
You: Create a Button component AI: [creates basic button] You: Add hover and active states with smooth transitions AI: [updates with transitions] You: Make the font slightly larger and add padding AI: [adjusts sizing] You: Perfect. Now add a loading state with a spinner AI: [adds loading prop and spinner]
Each iteration builds on the previous one. This is faster than trying to specify everything upfront.
Common mistakes
Being too vague
Vague prompts like "make it better" or "fix the bug" do not work well. Be specific about what you want changed.
Asking for too much at once
Asking AI to "build the entire authentication system" will give poor results. Break it into smaller tasks: login form, signup form, password reset, session management.
Not reviewing the output
Always read the code AI generates. It can make mistakes. You are responsible for what goes into your project.
Ignoring errors
If something does not work, tell AI exactly what went wrong. Copy the error message. Show where it fails.
Useful prompt templates
Starting a new feature
I need to add [feature name] to my app. Current setup: - Framework: [Next.js/React/etc] - Database: [Supabase/PostgreSQL/etc] - Styling: [Tailwind/CSS Modules/etc] The feature should: - [Requirement 1] - [Requirement 2] - [Requirement 3] Start by creating the basic structure, then we will iterate.
Debugging an error
I am getting this error: [Paste full error message] It happens when I [describe what you were doing]. Here is the relevant code: [Paste code] What is causing this and how do I fix it?
Refactoring code
I have this code that works but needs improvement: [Paste code] Please refactor it to: - [Specific improvement 1] - [Specific improvement 2] Keep the same functionality.