Prompt Patterns — VibeCode

The Kickoff Prompt

Your first prompt sets the tone for the entire project. A good kickoff prompt includes what you're building, the tech stack (or let the AI choose), key features, and design preferences.

Strong Kickoff Prompt Build a recipe sharing website with: Tech: Next.js, Tailwind CSS, SQLite Features: - Homepage showing featured recipes in a grid - Recipe detail page with ingredients, steps, cook time - Search and filter by cuisine type - User can submit new recipes via a form - Dark mode toggle Design: Clean, modern, lots of white space, food-themed color palette (warm oranges, greens) Start with the data model and homepage.

Why This Works

Specifies the tech stack — no guessing
Lists concrete features with enough detail
Describes the visual style
Gives a starting point ("Start with the data model and homepage")

The Iteration Prompt

After the initial generation, you refine. Good iteration prompts are specific and actionable.

Good Iteration The recipe cards on the homepage need these changes: 1. Add a small thumbnail image placeholder on the left 2. Show the cook time in the bottom-right corner 3. Add a subtle hover effect with a slight scale up 4. The card text is too small — bump it up by 2px

Bad Iteration (too vague) Make the cards look better

The Debugging Prompt

When something breaks, give the AI the error message and context.

Effective Debug Prompt I'm getting this error when I click the submit button on the recipe form: TypeError: Cannot read properties of undefined (reading 'title') at handleSubmit (RecipeForm.jsx:42) The form fields are: title, description, ingredients, steps, cookTime, cuisine. I'm using controlled inputs with useState.

Debugging Tips

Always include the exact error message
Mention the file and line number if available
Describe what you were doing when the error occurred
Include relevant code context — paste the function or component

The Refactoring Prompt

When your code works but needs cleanup:

Refactoring Prompt The RecipeForm component is 300 lines long. Break it into smaller components: - FormField (reusable input wrapper) - IngredientList (the dynamic ingredient inputs) - StepList (the dynamic step inputs) - FormActions (submit/cancel buttons) Keep all the same functionality. Don't change the form submission logic.

The Context-Setting Prompt

When starting a new conversation about an existing project, set context first:

Context-Setting Prompt I'm working on a recipe sharing website built with Next.js and Tailwind. Here's the current project structure: /app /page.tsx (homepage with recipe grid) /recipe/[id]/page.tsx (recipe detail) /submit/page.tsx (recipe form) /components /RecipeCard.tsx /RecipeForm.tsx /Navbar.tsx /lib /db.ts (SQLite connection) /types.ts I need to add user authentication. The user should be able to sign up, log in, and only edit their own recipes.

Anti-Patterns (What NOT to Do)

Too Vague

"Make a website" — gives the AI nothing to work with. You'll get something generic and spend more time iterating than if you'd been specific upfront.

Too Much at Once

"Build a full e-commerce platform with payments, inventory, shipping, admin dashboard, analytics, and email notifications" — break it into phases.

Contradictory Requirements

"Make it minimal and simple but also add every possible feature" — pick a direction and stick with it.

No Design Direction

Not mentioning any visual preferences means the AI defaults to generic Bootstrap-looking layouts. Mention colors, spacing, style.

Pro Tips

1. Start small, expand: Begin with core functionality, then add features in subsequent prompts.

2. Use numbered lists: When you want multiple changes, number them. The AI tracks them better.

3. Say "don't change X": If something works, explicitly say not to modify it when requesting other changes.

4. Paste error messages: Never paraphrase an error. Copy and paste the exact message.

5. Reference files by name: "In RecipeCard.tsx, change the..." is better than "in the card component, change..."

See Real Projects → Back to Getting Started →