Skip to content

AI_CODING_GUIDE.md

Latest commit

 

History

History
254 lines (192 loc) · 6.42 KB

AI_CODING_GUIDE.md

File metadata and controls

254 lines (192 loc) · 6.42 KB
Raw

🤖 The Vibe Coder's Guide to AI-Assisted Development

Welcome to the future of coding! This guide will help you become a master at coding with AI assistance.

🎯 What is "Vibe Coding"?

Vibe coding is about:

  • Describing what you want instead of how to build it
  • Iterating quickly with AI suggestions
  • Learning by doing rather than studying syntax
  • Focusing on ideas while AI handles the implementation

🚀 Getting Started with AI Coding

1. Choose Your AI Assistant

Cursor (Recommended)

  • Built-in AI that understands your entire project
  • Press Cmd+K to ask questions or generate code
  • Press Cmd+L to chat about your code

ChatGPT/Claude

  • Great for planning and problem-solving
  • Copy/paste code for help
  • Ask for explanations and alternatives

GitHub Copilot

  • Auto-completes as you type
  • Great for learning patterns
  • Works in VS Code

2. Master the Art of Prompting

🎨 Good Prompts Are Specific

❌ Bad: "Make a website"

✅ Good: "Create a personal portfolio website with a dark mode toggle, sections for projects and contact info, using React and Tailwind CSS"

🔄 Iterate and Refine

Start simple, then add:

  1. "Create a button that says Hello"
  2. "Make it blue with rounded corners"
  3. "Add a click animation"
  4. "Make it show a random greeting when clicked"

💡 Prompt Templates

Creating Features:

Create a [feature] that [does something] using [technology].
It should [requirement 1], [requirement 2], and [requirement 3].
Include error handling and user feedback.

Debugging:

This code [describe problem]. Here's the error: [paste error].
The expected behavior is [what should happen].
Can you fix it and explain what was wrong?

Learning:

Explain this code in simple terms: [paste code]
What does each part do?
How could it be improved?

📚 AI Coding Workflow

Step 1: Set Up Your Context

Always start new projects with context files:

CLAUDE.md - Tell AI about your project:

  • What you're building
  • Tech stack preferences
  • Coding style
  • Current goals

README.md - Document as you go:

  • What the project does
  • How to run it
  • What you've built so far

Step 2: Start with a Skeleton

Ask AI to create a basic structure:

"Create a basic Express server with:
- A home route that returns JSON
- Error handling
- Clear comments explaining each part
- A README with setup instructions"

Step 3: Build Feature by Feature

Work in small increments:

  1. Ask for one feature
  2. Test it
  3. Understand it
  4. Ask for the next feature

Step 4: Learn from the Code

Always ask:

  • "Explain what this code does"
  • "What are the potential issues?"
  • "How could this be improved?"
  • "What's a simpler way to write this?"

🛠️ Power Tips for Vibe Coding

1. Use AI for Everything

  • Planning: "What's the best structure for a todo app?"
  • Debugging: "Why is this returning undefined?"
  • Refactoring: "Make this code cleaner and more efficient"
  • Learning: "Explain React hooks with examples"
  • Testing: "Write tests for this function"

2. Context is King

The more context AI has, the better:

"I'm building a recipe app for beginners. 
I have a Recipe model with title, ingredients, and steps.
Create an API endpoint to search recipes by ingredient.
Use Express and return JSON. Include pagination."

3. Common AI Coding Patterns

The Builder Pattern

1. "Create a basic [thing]"
2. "Add [feature] to it"
3. "Now add [another feature]"
4. "Refactor to make it cleaner"

The Debugger Pattern

1. "Here's my code: [paste]"
2. "It should [expected behavior]"
3. "But it's [actual behavior]"
4. "What's wrong and how do I fix it?"

The Learner Pattern

1. "Show me a simple example of [concept]"
2. "Now make it more complex with [feature]"
3. "Explain the differences"
4. "When would I use each approach?"

🎮 Quick Start Challenges

Try these with your AI assistant:

Challenge 1: Personal Dashboard

"Create a personal dashboard with:

  • Current time and date
  • A todo list that saves to localStorage
  • A random motivational quote
  • Dark mode toggle"

Challenge 2: API Explorer

"Build a simple app that:

  • Lets users enter any public API URL
  • Fetches and displays the data
  • Formats JSON nicely
  • Handles errors gracefully"

Challenge 3: Mini Game

"Create a number guessing game where:

  • Computer picks a random number 1-100
  • User gets hints (higher/lower)
  • Tracks number of guesses
  • Has a play again button"

🚨 Common Pitfalls & Solutions

Pitfall 1: Too Vague

❌ "Make it better" ✅ "Add input validation, error messages, and a loading spinner"

Pitfall 2: Too Much at Once

❌ "Build a full e-commerce site with payments" ✅ "Start with a product listing page, then we'll add features"

Pitfall 3: Not Testing

Always test each addition before moving on!

Pitfall 4: Not Understanding

Don't just copy-paste. Ask:

  • "What does this line do?"
  • "Why did you use this approach?"
  • "What happens if I change this?"

📈 Leveling Up Your AI Coding

Beginner → Intermediate

  • Start asking for explanations
  • Request multiple solutions
  • Ask about best practices
  • Learn to debug with AI

Intermediate → Advanced

  • Provide more context upfront
  • Ask for architectural decisions
  • Request performance optimizations
  • Use AI for code reviews

🎯 AI Coding Cheat Sheet

// Starting a new feature
"Create a [feature description] that integrates with my existing [context]"

// Debugging
"This code produces [error/unexpected behavior]: [code]. Expected: [what you want]"

// Improving code
"Refactor this for better [performance/readability/maintainability]: [code]"

// Learning
"Explain [concept] with a practical example I can run"

// Planning
"What's the best approach to implement [feature] considering [constraints]?"

🌟 Remember

  • You don't need to memorize syntax - AI remembers for you
  • Focus on what, not how - Describe the outcome you want
  • Iterate fast - Small changes, quick tests
  • Stay curious - Always ask "why" and "what if"
  • Have fun - If it's not fun, you're doing it wrong!

🚀 Your First AI Session

  1. Open your ai-starter-project
  2. Start Cursor
  3. Press Cmd+K and type: "Add a /api/time endpoint that returns the current time in multiple timezones"
  4. Run the code
  5. Ask: "Now add a simple HTML page that displays these times and updates every second"

Welcome to the future of coding! 🎉