2.1 Prompting for Code

Time: ~25 minutes

What You'll Learn

• Why writing prompts and code prompts are fundamentally different
• The anatomy of a great code prompt
• Common prompting mistakes that waste time
• Templates you can use immediately

Writing Prompts vs Code Prompts

If you've used AI to write emails, blog posts, or social media content, you might think you know how to prompt. But code prompts are different in important ways.

Writing prompts are about tone, style, and creativity. Vague inputs can produce great outputs because there are many good answers.

Code prompts are about precision, context, and constraints. Vague inputs produce broken outputs because code either works or it doesn't. There's no "pretty close" in code.

The Anatomy of a Great Code Prompt

Every great code prompt has four parts:

1. Context -- What exists

Tell the AI what your project looks like right now:

I have a Next.js 14 app with a src/components directory. I'm using Tailwind CSS for styling. I already have a Header and Footer component.

2. Task -- What you want

Be specific about what you want built:

Create a ContactForm component that collects name, email, and message.

3. Constraints -- How it should work

Specify the rules and requirements:

The form should validate that email is a real email address. Show inline errors under each field. The submit button should be disabled while submitting.

4. Output -- Where it goes

Tell the AI exactly where to put things:

Put the component in src/components/ContactForm.tsx. Export it as default. It should accept an onSubmit prop that receives the form data.

Good vs Bad Prompts

Bad: Vague and context-free

Make me a login page

This will produce something, but it probably won't match your project's style, framework, or requirements.

Good: Specific with context

I have a Next.js app using Tailwind CSS. Create a login page at src/pages/login.tsx with email and password fields. Use the existing Button component from src/components/Button.tsx. On submit, call the signIn function from src/lib/auth.ts. Show a loading spinner while authenticating and display error messages from the API below the form.

Same task, completely different results.

Common Prompting Mistakes

1. Not mentioning your tech stack

AI doesn't know if you're using React, Vue, vanilla JS, Tailwind, or Bootstrap unless you tell it. Always mention your framework and styling approach.

2. Asking for too much at once

Build me a full e-commerce site with product listings, cart, checkout, user accounts, and admin dashboard

This will produce a mess. Break it into smaller pieces:

Create the product listing page that displays items from the /api/products endpoint

3. Not specifying the file path

If you don't tell AI where to put the code, it'll make its own decisions. Those decisions might not match your project structure.

4. Forgetting to mention existing code

AI will reinvent the wheel if you don't tell it what already exists:

I already have a useAuth hook that provides user and signOut. Use that instead of creating new auth logic.

Prompt Templates

New Component

Create a [component name] component in `src/components/[ComponentName].tsx`.

Tech stack: [framework], [styling approach]
Purpose: [what it does]
Props: [list props and their types]
Behavior: [how it should work]

Bug Fix

I'm getting this error: [error message]
File: [file path], line [number]
Here's the relevant code: [paste code]
This happens when: [describe the trigger]
Expected behavior: [what should happen instead]

New Feature

I want to add [feature] to my [framework] app.

Current structure:
- [list relevant existing files]
- [mention relevant existing components/functions]

The feature should:
1. [requirement 1]
2. [requirement 2]
3. [requirement 3]

Put new files in: [directory]
Modify existing files: [list files that need changes]

Practice

Take a feature you want to build (or have recently built) and write a prompt using the four-part structure: Context, Task, Constraints, Output.

Compare it to how you would have prompted before. Notice the difference in specificity.

Key Takeaways

• Code prompts need precision; writing prompts need creativity
• Great prompts include context, task, constraints, and output location
• Mention your tech stack, existing code, and file paths every time
• Break big tasks into smaller, specific prompts
• A detailed first prompt saves more time than three vague ones

Next Up

You know how to ask AI for code. But how do you know if what it gives you is actually good? Time to learn when to accept and when to push back.

Continue to 2.2 When to Accept vs Push Back