Vibe Coding Complete Tutorial and Tips - Cursor / Windsurf

Here's a summary of everything you need to know about Vibe Coding.

Vibe coding is a way to build software using AI coding assistants, focusing on using natural language prompts rather than writing code line by line. It involves choosing the right AI tool, planning meticulously with AI help, utilizing version control, setting up rules for the AI, following a structured workflow including rigorous testing, and being mindful of security and maintainability best practices.

Here are the key takeaways and technical details discussed:

• Choosing Your Vibe Coding Tool:

  • Windsurf and Cursor are recommended as full code editors (forks of VS Code) with integrated AI agents that can iterate on your code base. I use Windsurf most often lately and find it fantastic.
  • Cline is a VS Code extension if you prefer to stay within your existing environment. I've heard good things but haven't tested it extensively.
  • Replit is an online editor where you can code and easily deploy apps, all in the cloud.
  • For simple projects or just getting started, you can use the Canvas feature in hosted AIs like Claude, ChatGPT, or Google's. This lets you write and run HTML/JavaScript directly in the browser, which is surprisingly capable since JavaScript is so popular. However, these aren't as "agentic" for complex projects as tools like Windsurf or Cursor.
  • Windsurf specifically offers easy switching between chat, write, and legacy modes, supports various models (Claude 3.7 Thinking, 3.5, OpenAI), has great tab completion with context (code, terminal, Cascade chat), and includes browser preview functionality allowing visual feedback on elements. You can also paste URLs for extra context like library docs.

• Choosing Your Coding Language and Stack:

  • The simple rule is to choose the most popular language because AI models are trained on vast amounts of code from these languages, making them more "experienced" and better at writing that code.
  • JavaScript is currently the most popular coding language, making it a great choice, especially for the front end.
  • Python is another highly popular option and the de facto language for AI work. I often use Python for the back end.
  • A common stack I use is Python for the back end and HTML/JavaScript for the front end. You can also use JavaScript for the back end with Node.js.
  • Reference resources like the "GitHub 2.0" graphic to see popular languages (Python, Java, Go, JavaScript, C++, TypeScript, etc.).

• Making a Detailed Plan:

  • This step is crucial. Spend a lot of time creating a detailed, thorough plan for your project, thinking through features and edge cases.
  • You don't have to write the plan yourself; use AI (like Grok) to help you. Ask it questions to fill gaps and iterate with it.
  • Format your plan as a Product Requirements Document (PRD) in a markdown (.md) file. This format works well with AI.
  • Also, have the AI create a step-by-step to-do list in markdown.
  • Store these plan and to-do files in your project directory. You can have the AI create these files and paste the content for you.
  • Invest time here because addressing issues later is much harder than planning for them upfront.
  • You can (and should) go back and update your plan and to-do list as you progress and your needs change.

• Understanding Version Control (Git & GitHub):

  • Version control is essential for saving your code at different points, allowing you to "roll back" to a previous, stable version if something goes wrong. This is particularly important in Vibe coding where AI might make large, breaking changes.
  • Git is the standard version control software. You can use your AI agent to install and initialize Git in your project (commands like git init, git commit).
  • While it's helpful to know basic terms like commit, revert, and logs, you can largely rely on AI to execute the Git commands for you.
  • GitHub is a cloud-based hosting service for your Git repositories, providing more secure storage than just your local machine. It's like Google Docs for code and is free. You can ask AI to help set it up and push your code to it.

• Setting Up Rules (System Prompts for AI):

  • Most Vibe coding tools support "rules," which are like system prompts that guide the AI's coding behavior. They are included with every prompt sent to the AI.
  • Rules help ensure the AI writes code in your preferred structure, style, and workflow.
  • Tools like Windsurf have global rules (apply to all projects) and workspace rules (specific to one project).
  • Examples of useful rules:
    • Always start a new server after making changes (saves you time).
    • Look at existing code and try to iterate on it before writing completely new code for a request.
    • Prefer simple solutions, avoid code duplication.
    • Write code that considers different environments (dev, test, prod). Understanding why you need these (local coding, running tests, deployed app) is beneficial, and you can ask AI to explain.
    • Avoid writing one-off scripts to files; just run them or delete the file afterward.
    • Keep files short (e.g., 100-300 lines) for modularity and easier AI iteration.
  • You can find language-specific and framework-specific rules/best practices in resources like the "Awesome Cursor Rules" GitHub repository.

• The Vibe Coding Workflow:

  • Follow a loop: Reference your plan, check your to-do list, and build one feature at a time.
  • After building a feature, immediately write tests for it. Tests are separate code that verifies your main code works as expected.
  • Run the tests for the new feature.
  • If those tests pass, run your entire test suite (all tests written so far).
  • If any tests fail (either new or old):
    • Fix the actual code if it's broken.
    • Update the tests if the functionality changed intentionally.
    • Your AI assistant can help explain why tests failed and fix them or the code.
  • Once all tests pass, commit your code using Git (tell your AI to "commit the code"). This saves your progress.
  • Repeat this cycle: Build one feature, test it thoroughly, fix failures, and commit.
  • If the AI messes up your code badly, don't get stuck in fixing loops; just tell your AI to "roll back to the previous commit" to return to the last known good state. (You can also "stash" changes if you want to save them temporarily).

• Miscellaneous Tips:

  • Use Chat mode for asking questions about your code or general coding concepts, and Write mode when you want the AI to generate or modify code.
  • Model selection matters. I've found Claude models (especially 3.7 Thinking and 3.5) to be the best coders.
  • AI isn't great at designing beautiful front ends yet. Find free templates online with pre-built components (like Bootstrap themes), download them, put them in your project, and tell the AI to use those components when building the front end.
  • To get better results, give the AI specific context using the @ command (e.g., @file.py update this function, @docs/library to reference documentation).
  • 3.js is a popular 3D JavaScript library often used for Vibe coding games; AI models are familiar with it.

• Security and Maintainability:

  • Concerns exist that AI-generated code can be insecure or hard to maintain.
  • Spend some time learning best practices yourself, but also use AI and rules to help.
  • Add rules based on security best practices (e.g., rate limit APIs, use row-level security, captcha on auth pages). You can ask AI or search online for these.
  • Never expose sensitive keys (API keys, passwords) publicly, not even in screenshots! Never commit keys to Git; use the .gitignore file.
  • Don't "roll your own" (build from scratch) things like authentication; use established libraries or services (like Clerk).
  • Implement IP/user-based rate limiting, DDoS protection, firewalls, and monitoring. AI can help you learn about and set these up.
  • AI code might not be pretty or perfectly modular initially, but remember it's only going to get better.
  • You can ask AI to "refactor" your code to make it cleaner, more modular, and maintainable (like avoiding duplication). Add refactoring best practices to your rules.
  • Ask AI to perform a security audit on your code base.
  • Always write automated tests for critical parts of your application where failure has high consequences (payments, subscriptions, etc.).

• MCP Servers:

  • MCP (Multi-tool Coordination Protocol) servers allow you to give your AI agent access to external tools.
  • Tools can connect directly into other software environments (like the Unity MCP tool allowing Vibe coding within Unity) or provide capabilities like deep web research (using a tool like Firecrawl).
  • This is a more advanced feature but recommended once you're comfortable with the basics, as it significantly expands the AI's capabilities. You can ask AI to help configure MCP servers.

Overall, Vibe coding makes coding more accessible and fun, allowing you to get exposed to programming concepts and potentially build some cool stuff, even if you're not a traditional expert.