The Workflow That Ties It All Together

You've got your tools. You've got your configurations. Now let's connect them into a workflow that takes a blank idea to production code — with AI assisting every step, but you staying in control.

This isn't a theoretical framework. It's the actual workflow used by developers shipping production code with AI tools daily. Six phases, each with a specific tool choice and a specific reason for that choice.

Phase 1: Plan (Claude Code, 10-15 minutes)

This is the highest-leverage phase. Ten minutes of planning with Claude Code saves hours of wrong-direction coding later.

Open Claude Code in your project root and describe what you want to build. Be specific about the user-facing behavior, not the implementation. "Users should get real-time notifications when someone comments on their post" is better than "Set up a WebSocket server."

Claude Code reads your codebase — your package.json, your database schema, your existing modules, your architectural patterns — and proposes an approach that fits. It might say "Your current setup uses Server-Sent Events for the dashboard updates — we should use the same pattern for notifications instead of adding WebSockets."

That insight alone, understanding what already exists before proposing something new, is worth the entire subscription cost.

What to Ask During Planning

"What files would need to change?" — Scopes the work before you start
"Are there any conflicts with our existing architecture?" — Catches integration issues early
"What's the simplest approach that handles our requirements?" — Prevents over-engineering
"What could go wrong?" — Surfaces edge cases before they become bugs

Phase 2: Scaffold (Claude Code, 5-10 minutes)

With a plan in hand, ask Claude Code to create the file structure. "Create the files for the notification system: database migration, API route, service layer, React hook, and UI component. Use placeholder implementations that show the shape of each module."

Claude Code creates all the files with the right imports, types, and function signatures. The implementations are stubs, but the architecture is real. You now have a skeleton that shows how everything connects.

Why Claude Code for scaffolding? Because it creates all files in one coherent pass. Each file already imports from the others. Types are shared correctly. The service layer matches the API route signatures. An IDE tool would scaffold one file at a time and you'd spend time manually wiring them together.

Phase 3: Build (Cursor or Windsurf, 60-70% of total time)

Switch to your AI editor. This is where you spend most of your time, and where inline completions and Composer earn their keep.

Open the scaffolded files and start implementing. Cursor's Tab completions will be especially effective here because the function signatures and types already exist — the AI knows exactly what the implementation should look like.

Building Tips

Work from the inside out. Implement the core service logic first, then the API route, then the frontend. Each layer can be tested independently, and the AI suggestions get better as more context exists in adjacent files.

Use Composer for connected changes. When implementing the service layer requires updating a type definition and a database query, use Cmd+I and reference all three files with @ mentions. Cursor edits them in one coordinated pass.

Don't fight the AI. If the AI keeps suggesting an approach different from your plan, it might be seeing something you missed. Open Chat (Cmd+L) and ask why. Sometimes the AI is wrong. Sometimes it spotted a better pattern in your existing code.

Phase 4: Test (Both tools, 15-20% of time)

Testing is where the two-tool approach really shines.

Step 1: In your editor, use Composer to generate test files. "Generate comprehensive tests for @notification-service.ts. Follow the patterns in @__tests__/user-service.test.ts." The AI matches your existing test style.

Step 2: Switch to Claude Code. "Run the notification tests and fix any failures." Claude Code runs your test suite, reads the error output, identifies the issues, fixes them, and reruns until everything passes.

This loop — editor generates tests, Claude Code runs and fixes them — is dramatically faster than the manual cycle of write-run-read-fix-repeat.

Step 3: Manually add edge cases. AI tests cover the happy path and obvious error cases. You add the scenarios that require business knowledge: "What happens if a user unsubscribes from notifications while a batch is in flight?" These are the tests that prevent real production incidents.

Phase 5: Review (Claude Code + Cursor, 10-15% of time)

Before committing, run two layers of AI review:

Architecture review with Claude Code. "Review all the changes I've made for the notification system. Check for: security issues, missing error handling, inconsistencies with our existing patterns, and potential performance problems." Claude Code reads every changed file and provides a detailed review, often catching issues that a human reviewer would miss on first pass.

Quick scan with Cursor Chat. Highlight individual functions and ask "Is there a better way to do this?" or "What edge cases am I missing here?" This catches function-level issues that the architectural review might skip.

AI review doesn't replace human review. It makes human review faster by catching the mechanical issues (missing null checks, inconsistent error handling, unused imports) so human reviewers can focus on design decisions and business logic.

Phase 6: Deploy (Copilot + CI/CD)

Commit your changes and push. If you use GitHub, Copilot generates PR descriptions automatically from your commit messages and diffs. Review and refine — Copilot's descriptions are accurate but often miss the "why" behind changes.

Your CI/CD pipeline runs the tests AI helped you write. If anything fails, Claude Code can diagnose CI failures from the log output: "Here's the CI failure log from GitHub Actions. What went wrong and how do I fix it?"

The Workflow in Practice: Time Breakdown

For a medium-complexity feature (like the notification system above), here's a realistic time breakdown with and without AI tools:

Without AI: Plan (30 min) + Build (4 hours) + Test (2 hours) + Review (1 hour) + Deploy (30 min) = 8 hours
With AI stack: Plan (15 min) + Scaffold (10 min) + Build (2 hours) + Test (45 min) + Review (30 min) + Deploy (15 min) = ~4 hours

That's roughly 50% faster. Not because AI writes perfect code, but because it handles the predictable parts instantly, leaving you to focus on the parts that actually require human judgment.

The One Rule That Makes It All Work

Switch tools by phase, not by habit. The most common mistake is picking one tool and using it for everything. Claude Code is a terrible choice for rapid inline edits. Cursor is a terrible choice for codebase-wide analysis. Each tool earns its place in a specific phase.

Build the habit of asking: "Which phase am I in?" and reach for the right tool. Within a week, the switching becomes automatic. Within a month, you'll wonder how you ever coded without a stack.

Your AI Coding Stack — Complete

You now have everything you need:

An AI editor (Cursor or Windsurf) configured with shortcuts, rules, and model preferences
An autonomous agent (Claude Code) with a CLAUDE.md project memory file
A testing workflow that combines AI generation with human edge cases
A phase-based workflow that uses the right tool at the right time

The AI coding stack isn't about replacing your skills. It's about amplifying them. You still make the decisions. You still review the code. You still own the architecture. The AI handles the typing — and quite a lot of the thinking that used to be typing.

Start with one tool. Add the second when the first feels natural. Within a month, your complete stack will feel as essential as your terminal.

The Complete AI Dev Workflow — From Idea to Production

Related Resources