After months of testing different AI coding tools, I've settled into a workflow that actually works for me—and it might work for you too, especially if you're not a traditional developer. Everyone's talking about Cursor and Windsurf, but here's the thing: I'm already paying $20 for Claude, so why add another subscription when I can build full-stack apps with what I already have?
Let me walk you through how I built a complete wine course platform using Claude Projects, Bolt (free tier), and plain VS Code. No fancy AI editors required.
The Core Philosophy: Start with Requirements, Not Code
Most people jump straight into coding when they want to build something. I've learned that starting with a solid Product Requirements Document (PRD) saves hours of back-and-forth prompting later.
For my wine course platform, I told Claude exactly what I wanted:
- A landing page for three courses (Pairing Wines 101, Seven Noble Grapes, and Wines of Piedmont)
- An accordion interface that forces sequential completion
Key Detail: I specifically asked for "a PRD for an AI app builder, not for a software engineer."
This distinction matters. When you tell Claude you're giving instructions to an AI tool versus a human developer, it adjusts the language and specificity accordingly. The result was a comprehensive document that both Bolt and Lovable could understand immediately.
Step 1: Claude Projects for Planning
I start every project in Claude Projects—not because I need the knowledge base initially, but because it gives me consistent context as I develop. My first prompt is always asking for that PRD.
The PRD Claude generated included everything I needed:
- Color schemes
- Accordion functionality with locked progression
- Assessment requirements
- Content management structure
- User authentication needs
Having this upfront meant I could feed the same clear instructions to different tools and get consistent results.
Step 2: Testing with AI Builders (Bolt vs Lovable)
Here's where my workflow differs from the typical "pick one tool and stick with it" approach. I take my PRD to both Bolt and Lovable to see which one nails the initial design better.
For this wine course project:
Bolt's Results
- ✅ Cleaner UI with better visual hierarchy
- ✅ Nice animations
- ✅ Spot-on icons
- ✅ More polished overall design
Lovable's Results
- ✅ Better functionality implementation
- ✅ More reliable sequential course logic
- ❌ Weaker design aesthetic
Decision: I chose to move forward with Bolt's version because I figured I could prompt my way to better functionality, but starting with good design as the foundation felt more valuable.
Step 3: Adding Authentication (The Tricky Part)
Both tools handled Supabase integration differently. When I prompted for authentication setup, Bolt connected to Supabase but didn't automatically create the necessary database tables. Lovable had similar issues.
The solution was manual database setup through Supabase's SQL editor. I had to run the table creation scripts myself, but once that was done, authentication worked perfectly.
Pro tip: Always check your Supabase dashboard after prompting for database integration. Don't assume the tables were created automatically.
Step 4: Moving to GitHub and VS Code
Once I had a working foundation from Bolt, I connected both versions to GitHub repositories. This is where the real development begins.
Instead of using Cursor or Windsurf, I clone the repository into VS Code using the standard Git workflow:
- Copy the GitHub repository URL
- Open VS Code, hit
Shift + Ctrl + P, select "Git: Clone" - Run
npm installto pull in all dependencies - Create the necessary
.envfiles for Supabase connection - Run
npm run devto start local development
The beauty of this approach is that I'm working with standard tools that every developer uses, not proprietary AI editors that lock me into specific workflows.
Step 5: Claude Projects for Ongoing Development
Here's where Claude Projects really shines. Once I have the codebase connected as project knowledge, I can have Claude:
- Evaluate code quality
- Suggest optimizations
- Help implement new features
For example, when I connected my wine course repository, Claude immediately flagged potential performance issues like unnecessary re-renders and suggested image optimization strategies. Having this kind of architectural insight upfront prevents technical debt later.
The Development Loop That Actually Works
My ongoing workflow looks like this:
- Make changes locally in VS Code based on Claude's suggestions
- Test the changes to ensure they work as expected
- Commit and push to GitHub with descriptive commit messages
- Refresh the Claude Projects knowledge to pull in the latest code
- Start a new thread for the next feature or improvement
Important: Claude doesn't have memory across threads, so keeping your project knowledge updated allows you to start fresh conversations without losing context.
When I Add Features (Real Example: About Page)
Let me show you exactly how I added an About page to demonstrate the workflow:
My prompt: "I need an About page for the wine course platform. Make it professional but approachable, highlighting expertise in wine education."
Claude's response was perfect: it gave me the complete component code AND the implementation instructions. It told me exactly:
- Where to create the file (
src/pages/AboutPage.tsx) - How to add the route to
App.tsx
The key is Claude shows you both what to build and how to integrate it. For someone learning to code, this educational aspect is invaluable.
Why This Works Better Than Cursor (For Me)
Don't get me wrong—Cursor is powerful. But for my use case, this workflow has several advantages:
| Advantage | Description |
|---|---|
| Cost efficiency | I'm already paying for Claude Pro. Why add another subscription? |
| Learning value | Working in standard VS Code helps me understand the underlying code structure better |
| Flexibility | I can switch between different AI tools (Claude, ChatGPT, etc.) without being locked in |
| Debugging skills | When something breaks, I learn to read error messages and understand the codebase |
The Current State: A Working App
After following this workflow, I have a fully functional wine course platform with:
- ✅ User authentication through Supabase
- ✅ Sequential course progression with locked content
- ✅ Responsive design that works across devices
- ✅ Database integration for user progress tracking
- ✅ Clean, maintainable code structure
The app isn't perfect—there are still improvements to make around course data management and admin functionality—but it's a solid foundation that I can iterate on.
Who This Workflow Works For
This approach particularly suits people who:
- Want to learn how code actually works, not just generate it
- Are building on a budget with existing AI subscriptions
- Prefer understanding their stack over having everything automated
- Need the flexibility to switch between different AI tools
- Want standard development practices that translate to team environments
When Cursor Might Be Better
If you're a professional developer who values speed above learning, Cursor might be better. But if you're building side projects, learning to code, or working solo, this workflow gives you more control and understanding for less money.
The Free Tool Strategy
One final note about my approach: I use Bolt's free tier (5 prompts) just to get the initial design and basic functionality right. Then I transfer everything to Claude Projects where I have unlimited conversations as part of my existing subscription.
Hybrid Approach Benefits:
├── Bolt's excellent design capabilities
├── Claude's superior reasoning and code analysis
└── No multiple premium AI coding subscriptions
This hybrid approach means I get the best of both worlds without paying for multiple premium AI coding subscriptions.
Summary
The result? I can build complete full-stack applications using tools I already pay for, with a workflow that actually teaches me something along the way.
What's your current vibe coding setup? I'd love to hear if you've found workflows that work better for your situation.
Quick Reference: My Tech Stack
| Tool | Purpose | Cost |
|---|---|---|
| Claude Projects | Planning, code analysis, ongoing development | $20/month (existing) |
| Bolt | Initial design and prototyping | Free tier (5 prompts) |
| VS Code | Local development environment | Free |
| GitHub | Version control and repository hosting | Free |
| Supabase | Backend and authentication | Free tier |
Key Workflow Commands
# Clone repository
git clone [repository-url]
# Install dependencies
npm install
# Start development server
npm run dev
# VS Code: Open command palette
Shift + Ctrl + P
Top comments (0)