Clarissa Creates

When developers talk about using AI tools, you'll often hear the term "vibe coding." It's everywhere and I really dislike it. Not because "vibe" sounds more suitable for an energy drink brand, but because it trivializes the real skill and structure that AI-assisted development requires. Writing high-quality code with AI isn't about vibes. It's about careful coordination, thoughtful sequencing, and system-level reasoning. When we prompt AI without structure, we bypass all of that and end up with unpredictable results.

Steve Kinney's course on Frontend Masters, Developing with AI Tools, perfectly captures this ethos. His framework solves this with one simple mantra:

Plan → Implement → Verify

It's a developer-first way of working with AI that brings intentionality back into the picture. Rather than jumping straight into code generation, this approach forces AI to think through problems systematically—breaking down tasks into specific steps, identifying dependencies, and defining success criteria upfront.

In this post, I will cover this framework and how to use AI tools like Claude Code and Cursor to build systematic, scalable development workflows that treat AI as a true development partner rather than just an advanced autocomplete.

Plan → Implement → Verify

Kinney's framework is a gentle nudge away from reactive prompting and toward a collaborative, intentional process. Think of AI not as a code genie, but as a junior developer with an excellent memory and 24/7 availability—who still needs your guidance.

1. Plan

I'm guilty of skipping this step, especially when I'm in a flow state and having fun building, but it's essential. The time spent planning can help you avoid future time spent debugging or worse, git reset --hard, down the line.

Ask the AI to:

List which files to touch
Break the task into steps
Define what "done" means
Include tests as part of the plan, not an afterthought

The goal here isn't just to get the AI working—it's to make you think clearly. Planning with AI forces you to externalize your mental model.

2. Implement

Here's where the magic happens—but only because you've done the prep work.

Now, the AI:

Follows the plan
Writes the code
Handles errors
Writes the tests it already committed to

It's like watching code get written from your blueprint.

3. Verify

Code isn't done until it works. This step is where AI can really shine.

Run the tests
Check for linting/type issues
Compare to the original success criteria
Add assertions, edge cases, and polish

And if something's off? Loop back and adjust.

Tools to integrate into your workflow

In the course, Kinney covers a range of tools, but ultimately lands on a workflow centered around Cursor (an AI-optimized version of VS Code) and Claude Code (a terminal-based dev assistant by Anthropic).

Context is King

If you've spent time coding with web-based AI tools like ChatGPT or Claude in the browser, you've likely experienced the frustration of context amnesia—where the AI forgets crucial project details, coding patterns, or previous decisions as conversations grow longer. Many developers start projects with ChatGPT or web-based Claude, copy-pasting code back and forth, trying various workarounds to maintain context across sessions. The result is often a disjointed experience where you spend more time re-explaining your project than actually building it.

Traditional web-based AI tools—whether ChatGPT, Claude on the web, or others—treat each interaction as relatively isolated, lacking the persistent project awareness that real development work requires. This fundamental limitation makes them better suited for quick questions than sustained development collaboration.

Cursor and Claude Code solve the context amnesia problem by becoming part of your actual development environment via the IDE and Terminal. This ensures that the tools have direct access to all of your project files, so context is naturally retained without any manual copying or pasting. The AI can see your entire codebase structure, understand your dependencies, track your recent changes, and maintain awareness of your project's evolution over time—eliminating the constant need to re-explain what you're working on.

Cursor

Cursor is an AI-powered code editor built specifically for AI-assisted development. Think of it as VS Code enhanced with deeply integrated AI capabilities that go far beyond simple autocomplete.

Session context

Cursor intelligently builds contextual awareness through both automatic gathering and explicit targeting to ensure AI responses are precise and relevant.

Automatic Context Collection Cursor continuously monitors your development environment to provide relevant background information:

Current file content: Complete understanding of what you're actively working on
Recent file activity: Maintains awareness of your recent navigation and edits
Codebase intelligence: Semantic search results that understand relationships between code components
Error awareness: Real-time linter and compiler errors for immediate problem-solving context
Edit patterns: Recent changes that inform the AI about your current objectives

Explicit Context Targeting (@ System) When automatic context isn't sufficient, use the @ symbol to surgically direct AI attention:

File-Level Context:

@Files: Include specific file content (@src/components/Button.tsx)
@Folders: Reference entire directory structures (@src/api/v1)

Code-Level Context:

@Code/@Symbols: Target specific functions, classes, or variables (@useUserData hook)

External Context:

@Docs: Pull in official documentation (@React Router Docs)
@Web: Access real-time information (@Web latest Node.js version)
@Git: Reference version control data (@Commit (Diff of Working State))

Persistent Context: Rules and Notepads

Cursor provides powerful tools to maintain consistent AI behavior across all sessions through persistent context that acts like the AI's long-term memory.

Cursor Rules (.cursor/rules): Think of Rules as the AI's operational manual - fundamental guidelines that automatically apply to every interaction:

Constitutional authority: Define non-negotiable coding standards, architectural patterns, and project conventions
Team consistency: Version-controlled files shared across your entire development team
Hierarchical system: Combines project-level rules with personal preferences
Always active: Automatically loaded into every AI conversation without manual activation

Notepads: Reusable context bundles that function as intelligent reference materials accessible on-demand:

Rich content storage: Combine documentation, file references (@file), links, and architectural overviews
On-demand activation: Reference specific notepads using @NotepadName syntax when relevant
Knowledge preservation: Capture complex patterns, troubleshooting guides, and institutional knowledge
Onboarding acceleration: New team members can instantly access project context and best practices

Here's some Cursor rules you can use:

Claude Code

Built by Anthropic, Claude Code represents a fundamentally different approach to AI-assisted development—it's not a web interface you visit, but a terminal-native AI teammate that becomes part of your actual development workflow.

Terminal-Native Intelligence

Unlike browser-based AI tools, Claude Code runs directly in your terminal where real development happens:

Instant access: No context switching between browser and editor
Direct file manipulation: Can read, write, and execute code in your actual project
Command-line integration: Works seamlessly with git, npm, testing frameworks, and deployment tools
Session persistence: Survives system restarts and can resume exactly where you left off

CLAUDE.md as Shared Brain

CLAUDE.md as Shared Brain:

Acts as your project's persistent memory that survives sessions and system restarts
Team synchronization: Version-controlled file that ensures every team member's AI has the same project knowledge
Hierarchical context: Automatically loads context from parent directories (perfect for monorepos)
Living documentation: Grows smarter as your project evolves

What goes in CLAUDE.md:

Project architecture and key components
Coding standards and conventions
Common commands and workflows
Known gotchas and troubleshooting steps
Deployment procedures and environment setup

Claude also provides tools to store complex workflows and multi-agent orchestration—features I haven't fully explored yet, but they hint at how much more sophisticated this tool becomes once you move beyond simple Q&A interactions.

See Steve's CLAUDE.md recommendations.

Model Context Protocol (MCP): The Hidden Superpower

Here's where the AI experience levels up in a way that absolutely blows my mind. If you've ever wished your AI could "just know" what's in your GitHub issues, your database schema, or your team docs—this is the technology that makes it happen, and it's honestly transformative.

Model Context Protocol (MCP) is like USB-C for AI—a universal standard that gives AI models direct, live access to the tools and sources of truth your project actually depends on. The implications are staggering.

From Hallucination to Reality

With MCP, AI doesn't guess anymore. It knows:

GitHub issues - Checks actual open bugs before writing code
Database schemas - Queries your live Postgres structure for accurate field names
Team documentation - Reads your actual architectural decisions in Notion
CI/CD status - Pulls real test failures and deployment logs
Local commands - Executes and responds to actual system output

This fundamentally changes the AI from a creative guesser into a well-informed collaborator working with your actual systems in real-time.

What This Looks Like in Practice

With Cursor or Claude Code:

Claude automatically pulls the latest test failures from your CI before suggesting fixes
Cursor autocompletes API calls based on your live database schema via Supabase MCP
Background agents can open PRs that reference actual repo state through GitHub MCP
AI debugging sessions can query your production logs and metrics in real-time

The shift from "AI that knows about coding in general" to "AI that knows about your specific project right now" is mind-bending.

Popular MCP Servers

Knowledge & Documentation:

Context 7 - Pulls up-to-date docs and examples from libraries
Notion MCP - Live access to your team's documentation and processes

Development & DevOps:

GitHub MCP - Complete repository integration and workflow automation
Desktop Commander - Direct command line interaction and system control

Data & Infrastructure:

Postgres MCP Pro - Live database schema exploration and querying
Supabase MCP - Real-time backend service integration

Web & Automation:

Brave Search - Current web information grounded in reality
Firecrawl - Live website data extraction and analysis
Playwright - Browser automation for testing and validation

MCP servers can access external services and execute commands on your behalf, so source vetting is critical. Review permissions carefully, use environment variables for secrets, and consider running sensitive servers locally. The convenience is incredible, but treat these integrations like you would any production system access.

MCP resources:

The Big Takeaways

AI isn't replacing developers—it's supercharging our workflow. But to harness that leverage effectively, we have to approach development with systems, not vibes. The difference between developers who get massive productivity gains and those who struggle with AI tools often comes down to this fundamental shift in mindset.

Core Principles That Actually Work

Ditch vibe coding — Don't abandon proven software engineering practices. AI amplifies whatever approach you bring to it—good practices get better, bad habits get worse faster.
Use Plan–Implement–Verify — This isn't a rigid formula, but a foundation that prevents AI from making expensive assumptions. Force it to think before it codes.
Context is everything — The difference between mediocre and extraordinary AI assistance is almost entirely about context. Invest heavily in CLAUDE.md files, master the @ symbol system, and leverage MCP connections to your actual tools.
Human oversight is essential — Think of AI as an incredibly capable junior developer who needs clear direction and regular check-ins. It can handle complex implementation, but you're still the architect.
Start simple, iterate — Don't try to build the perfect AI workflow on day one. Begin with basic rules and gradually add hooks, custom commands, and integrations as you discover what works for your team.

The Broader Landscape

While this course focused on Cursor and Claude Code, the underlying principles apply universally. Every AI development tool—whether it's GitHub Copilot, Replit's AI, or future tools we haven't seen yet—relies on the same fundamentals:

Quality context input
Clear instructions and constraints
Integration with your actual development ecosystem
Systematic approaches over ad-hoc prompting

MCP and similar protocols are becoming the standard way AI tools connect to external services. Understanding these patterns now positions you to leverage whatever tools emerge next.

The Mindset Shift

The developers who thrive with AI tools aren't necessarily the ones who prompt the best—they're the ones who build systems around AI collaboration. They create persistent context, establish clear workflows, and treat AI integration as seriously as they would any other critical development tool.

This isn't about learning to talk to computers better. It's about architecting your development process to include AI as a first-class participant in your workflow. That's the real superpower.

Resources

Enjoyed this post? If this helped you think differently about using AI in your dev workflow, consider subscribing on Substack for more posts like this—covering thoughtful tooling, modern frontend practices, and the human side of tech.

Build Systems, Not Vibes: A Dev-Friendly Guide to Coding with AI