## 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 prompt vs Good prompt

**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?)

### CRAFT in action

```
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

**Pro tip:** Create a PROJECT.md file in your repo that describes your app, tech stack, and coding conventions. Reference it when starting new conversations.

## 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:

1. **Ask:** Make your initial request
2. **Review:** Look at what AI generated
3. **Refine:** Ask for specific changes
4. **Repeat:** Keep going until it is right

### Iteration example

```
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.

**Warning:** AI can generate code that looks correct but has security vulnerabilities. Be especially careful with authentication, database queries, and user input handling.

## 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.
```

## Checklist

I understand the CRAFT framework
I know how to provide context to AI
I understand that vibe coding is iterative
I will review all AI-generated code before using it
I have saved useful prompt templates for later