8 min read
The AI-First Development Workflow
Learn the plan-prompt-review-test-commit loop that turns AI into a reliable development partner.
AI Changes How You Work, Not What You Build
You've set up your tools, created a project, and learned Git. Now let's talk about the workflow that ties it all together.
Working with AI isn't about typing a prompt and hoping for the best. It's a structured loop — and the developers who get the most out of AI are the ones who treat it as a process, not a magic trick.
The Dev Loop
Every feature you build should follow this cycle:
Before touching code or writing a prompt, get clear on the outcome. What should this feature do? What should the user see? Write it down in plain language — even a single sentence is enough.
A vague plan leads to vague code. "Make the dashboard better" will produce junk. "Add a bar chart showing monthly revenue using Recharts" will produce something useful.
Give the AI your plan along with context: what framework you're using, what files are involved, what constraints matter. The more specific you are, the better the output.
Good prompts include:
- What the code should do
- What tech/libraries to use
- Where the code should live in your project
- Edge cases or constraints
This is the most important step. AI-generated code can look correct and still have subtle bugs, security holes, or bad patterns. Read through it. Make sure you understand what it does and why.
You don't need to memorize every syntax detail — but you should be able to explain the logic to someone else.
Run the code. Click through the feature. Try edge cases. Does it handle empty states? Does it break on weird input? Testing is where theory meets reality.
Once it works and you've reviewed it, commit with a clear message. This creates a checkpoint you can always return to.
git add .
git commit -m "add monthly revenue bar chart to dashboard"
git pushThen you start the loop again for the next feature. Plan, prompt, review, test, commit. Every time.
When to Use AI vs Do It Yourself
AI is incredibly powerful, but it's not the right tool for every task. Here's a practical breakdown:
| Let AI Handle It | Do It Yourself |
|---|---|
| Generating boilerplate code (components, API routes, config files) | Architectural decisions — which database, which auth provider, how to structure your app |
| Writing repetitive CRUD operations | Designing your data model and schema relationships |
| Converting designs into Tailwind-styled components | Reviewing and understanding the generated code |
| Writing unit tests for existing functions | Debugging production issues that require deep context |
| Refactoring code to follow a pattern you've defined | Security-critical logic like payment processing or access control |
| Generating TypeScript types from API responses | Deciding what to build next and why it matters to users |
The pattern: AI is great at generating code when the requirements are clear. You're better at deciding what to build, reviewing whether it's correct, and understanding how the pieces fit together.
The Critical Skill: Code Review
Let's be blunt about this.
Never commit code you don't understand. If AI generates something and you can't explain what it does, stop. Ask the AI to explain it. Look up the concepts. Break it into smaller pieces. Shipping code you don't understand is how you end up with bugs you can't fix and security holes you can't find.
Here's what to look for when reviewing AI-generated code:
- Does it do what you asked? Not what you think you asked — what you actually need.
- Are there hardcoded values that should be environment variables or props?
- Is it handling errors? What happens when the API call fails or the data is missing?
- Is it secure? Is user input being validated? Are secrets exposed on the client?
- Is it readable? Could you come back in a month and understand this code?
You don't need to catch everything on your first pass. You'll get faster at this over time. The habit is what matters — always review before you commit.
A Realistic Example
Say you want to add a contact form to your site. Here's what the loop looks like in practice:
Plan: "Add a contact form with name, email, and message fields. On submit, send the data to a /api/contact endpoint. Show a success message after submission."
Prompt: You ask your AI coding tool (we'll use Claude Code throughout this course) to build it, specifying Next.js App Router, server actions (you'll learn about server actions in Module 5), and Tailwind for styling.
Review: Claude generates the form component and the server action. You read through it. You notice it's not validating the email format — you ask Claude to add validation with Zod (a validation library you'll use in Module 5).
Test: You run the dev server, fill out the form, submit it. You also test with an empty form, an invalid email, and a very long message.
Commit: Everything works. You commit: git commit -m "add contact form with validation and server action".
That's one loop. The whole thing might take 15 minutes. Without AI, the same feature would take an hour or more. The speed gain is real — but only if you don't skip the review step.
Module 1 Complete
You now have everything you need to start building:
- A development environment with professional tools
- A Next.js project with TypeScript and Tailwind
- Git and GitHub for version control
- A structured workflow for building with AI
That's not a small thing. Most people who want to build products get stuck somewhere in this setup phase. You're past it.
What's the correct order of the AI-first dev loop?
When should you NOT rely on AI-generated code?
What should you do if AI generates code you don't understand?
The following prompt is vague and will produce inconsistent results:
"Make the dashboard look better"
Rewrite it using the Plan-Prompt-Review-Test-Commit loop from this lesson. Be specific about what page, what "better" means, what layout you want, and what to reference.
Show hint
Think about: Which file is the dashboard? What specific improvements do you want (layout, spacing, colors)? What existing components or pages should Claude Code reference for consistency?
Show solution
"Update the dashboard page at src/app/dashboard/page.tsx. Add a card grid layout (3 columns on desktop, 1 on mobile) using Tailwind. Each card should display a stat label, value, and trend percentage. Use our existing Card component from src/components/ui/card.tsx for styling consistency. Match the spacing and typography from the settings page at src/app/settings/page.tsx."
This prompt will produce completely unpredictable results. Rewrite it so Claude Code knows exactly what to build and where.
Add some features to the app
Next Up
Next up, you'll learn to use Claude Code — the AI development partner you'll rely on for the rest of this course. We'll cover prompting strategies, context management, and how to get production-ready code on the first try.