Master These Basics Before You Vibe Code With AI

Vibe coding is all the rage, and honestly, I don't know if the term makes sense, but maybe I'm not familiar enough with the origin of it to make the connection. However, based on my understanding, it is coding with AI with no concern for the technical details and focus on the creative aspect of developing. Sounds amazing until you put it into practice. Experienced developers understand this, which is why vibe coding can work for them. However, if you're like me (non-developer), we need a few basic tools in place before we go off "Vibing with the AI." That's a recipe for disaster, and I have a graveyard folder full of unfinished projects that Windsurf destroyed. I abandoned them because I hadn't yet suffered enough to first build a foundation. What follows is my foundation that I use to code with AI. I will state that I am one of those who likes to work in Claude or ChatGPT and copy/paste in VS Code. If I use Bolt or Loveable, I will get to a point then export to Github to finish everything with a chatbot and copy/paste. This works for me because I don't mind putzing through the code to find the lines to update. But I firmly believe that if you are not familiar with code, the following guideline is the best place to start if you want to code with AI. Give the LLM Some Ground Rules One of the first things I discovered is that large language models (LLMs) love to get overly elaborate. If you don't give them guardrails, they'll produce complicated, bloated code that can leave you wondering how it all went off track. So I set my own "Code Guidelines for Collaboration." Start Simple: Don't demand a Cadillac of features when a bicycle will do. Stay Under 200 Lines: I shoot for functions under 200 lines of code in a file when possible. Skip the Fancy Frameworks: Vanilla JavaScript, HTML, and CSS can often get the job done just fine. When the LLM has a clear outline—like "No frameworks," "Keep functions small," or "Explain your choices"—it's less likely to go off on a tangent and produce a giant mess. Actionable Insight: Before you even start generating code, write your own "rules of engagement." It's like giving the AI a map of where you do and don't want to go. You will learn the word "refactoring." And you will discover how bad AI is at doing it. Embrace a Little Terminal Knowledge Yes, you can use tools like Cursor to automate basic terminal commands. But do yourself a favor: learn enough to install a Python environment, run npm install for JavaScript packages, or push to Git. Doing these steps manually a few times helps you understand what's happening behind the scenes. Basic Terminal Commands: Know how to navigate folders, create files, and run scripts. Python Environments: If you're using Python, venv and pip install are commands you will use every time. Git and GitHub: Branching, committing, and reverting are not optional skills. Trust me, AI can break code faster than you can blink, so version control will be your safety net. Actionable Insight: For your next mini-project, do all the setup yourself. It'll build your confidence for when you really need to fix something at the command line. Version Control Will Save Your Sanity I can't stress this enough: always, always use Git. AI might be your best friend, but it's also prone to wrecking a working app with a single "misinterpreted" line of code. If you have a clean commit history, you can revert to a stable version without redoing all your work. Create a new branch for each new feature or experiment. Merge back to main only when you're confident. Don't forget to push frequently—tools like GitHub, GitLab, or Bitbucket will handle the rest. Actionable Insight: Even if you're a solo coder, treat your project like a team effort. Branch, commit, merge. You'll thank yourself later. Skip the Frameworks (At First) React, Vue, Svelte, or Angular—these are all awesome for large-scale applications. But if you're just starting to dip your toes into coding, frameworks can add layers of complexity you don't need. Vanilla JavaScript: Perfect for learning the ropes. Node.js or Python for the backend: Both are solid, widely used, and there's a ton of AI-generated help available. HTML and CSS: Don't overlook the basics. A well-structured, simple page is often all you need. Actionable Insight: Try building a quick one-page app in plain HTML/JS first. If you really need a framework later, you'll have a better idea why and how to use it. Minimal Backend: Supabase, Airtable, or an S3 Bucket When you're ready to store data, skip the mammoth databases—just start with something lightweight and approachable: Supabase: Great if you're comfortable with Postgres-like databases. Airtable: Offers a simple spreadsheet-like interface and an accessible API. S3 Bucket: A bit tougher to configure, but a good skill to have under your belt for object storage. Actionable Insight: Pick on

Apr 4, 2025 - 03:21

Master These Basics Before You Vibe Code With AI

Vibe coding is all the rage, and honestly, I don't know if the term makes sense, but maybe I'm not familiar enough with the origin of it to make the connection. However, based on my understanding, it is coding with AI with no concern for the technical details and focus on the creative aspect of developing. Sounds amazing until you put it into practice.

Experienced developers understand this, which is why vibe coding can work for them. However, if you're like me (non-developer), we need a few basic tools in place before we go off "Vibing with the AI." That's a recipe for disaster, and I have a graveyard folder full of unfinished projects that Windsurf destroyed. I abandoned them because I hadn't yet suffered enough to first build a foundation.

What follows is my foundation that I use to code with AI. I will state that I am one of those who likes to work in Claude or ChatGPT and copy/paste in VS Code. If I use Bolt or Loveable, I will get to a point then export to Github to finish everything with a chatbot and copy/paste. This works for me because I don't mind putzing through the code to find the lines to update. But I firmly believe that if you are not familiar with code, the following guideline is the best place to start if you want to code with AI.

Give the LLM Some Ground Rules

One of the first things I discovered is that large language models (LLMs) love to get overly elaborate. If you don't give them guardrails, they'll produce complicated, bloated code that can leave you wondering how it all went off track. So I set my own "Code Guidelines for Collaboration."

Start Simple: Don't demand a Cadillac of features when a bicycle will do.
Stay Under 200 Lines: I shoot for functions under 200 lines of code in a file when possible.
Skip the Fancy Frameworks: Vanilla JavaScript, HTML, and CSS can often get the job done just fine.

When the LLM has a clear outline—like "No frameworks," "Keep functions small," or "Explain your choices"—it's less likely to go off on a tangent and produce a giant mess.

Actionable Insight: Before you even start generating code, write your own "rules of engagement." It's like giving the AI a map of where you do and don't want to go. You will learn the word "refactoring." And you will discover how bad AI is at doing it.

Embrace a Little Terminal Knowledge

Yes, you can use tools like Cursor to automate basic terminal commands. But do yourself a favor: learn enough to install a Python environment, run npm install for JavaScript packages, or push to Git. Doing these steps manually a few times helps you understand what's happening behind the scenes.

Basic Terminal Commands: Know how to navigate folders, create files, and run scripts.
Python Environments: If you're using Python, venv and pip install are commands you will use every time.
Git and GitHub: Branching, committing, and reverting are not optional skills. Trust me, AI can break code faster than you can blink, so version control will be your safety net.

Actionable Insight: For your next mini-project, do all the setup yourself. It'll build your confidence for when you really need to fix something at the command line.

Version Control Will Save Your Sanity

I can't stress this enough: always, always use Git. AI might be your best friend, but it's also prone to wrecking a working app with a single "misinterpreted" line of code. If you have a clean commit history, you can revert to a stable version without redoing all your work.

Create a new branch for each new feature or experiment.
Merge back to main only when you're confident.
Don't forget to push frequently—tools like GitHub, GitLab, or Bitbucket will handle the rest.

Actionable Insight: Even if you're a solo coder, treat your project like a team effort. Branch, commit, merge. You'll thank yourself later.

Skip the Frameworks (At First)

React, Vue, Svelte, or Angular—these are all awesome for large-scale applications. But if you're just starting to dip your toes into coding, frameworks can add layers of complexity you don't need.

Vanilla JavaScript: Perfect for learning the ropes.
Node.js or Python for the backend: Both are solid, widely used, and there's a ton of AI-generated help available.
HTML and CSS: Don't overlook the basics. A well-structured, simple page is often all you need.

Actionable Insight: Try building a quick one-page app in plain HTML/JS first. If you really need a framework later, you'll have a better idea why and how to use it.

Minimal Backend: Supabase, Airtable, or an S3 Bucket

When you're ready to store data, skip the mammoth databases—just start with something lightweight and approachable:

Supabase: Great if you're comfortable with Postgres-like databases.
Airtable: Offers a simple spreadsheet-like interface and an accessible API.
S3 Bucket: A bit tougher to configure, but a good skill to have under your belt for object storage.

Actionable Insight: Pick one service, set up a small test project (like a simple contact form), and get comfortable with how to read/write data. You'll be a lot more confident once you see it in action.

Use a Serverless Function to Protect API Keys

For anyone working in tools like Rise, Storyline, or Captivate, you might want to integrate AI. But you can't just paste your API key directly into your eLearning course code—somebody could easily steal it. That's where a serverless function (like Vercel's serverless endpoints) or a minimal backend in Python on Render.com comes in handy.

Vercel: Seamlessly hosts Node.js projects, auto-deploys from GitHub, and pairs well with Next.js if you ever decide to scale up.
Render.com: A no-nonsense option for Python. Similar push-to-deploy model.

Actionable Insight: Follow a basic tutorial on spinning up a serverless function. Even if you don't get everything right the first time, it's a skill that immediately pays off—especially when you want to keep private keys private.

Hosting Made Easy

Once you get the hang of committing to GitHub, hooking up a host is a breeze:

Vercel: Perfect for Node.js. Commits to main automatically trigger deploys.
Render.com: Great if you need a Python backend. Also monitors your repo for updates.

Actionable Insight: Don't wait for a big project. Deploy small test apps and get comfortable with the workflow. The confidence boost from seeing your app live on the internet is huge.

Practice Makes It Less Overwhelming

This might seem like a lot. But after five or six mini-projects, you'll see the pattern:

Spin up a simple prototype with vanilla tech.
Add a dash of Node.js or Python on the backend (or a serverless function).
Keep everything in Git with frequent commits.
Deploy to Vercel or Render.com.

Actionable Insight: Commit to creating a handful of personal or hobby projects; like a small to-do app, a simple chatbot, or a mini eLearning module. Repetition cements the workflow.

Final Thoughts

The promise of 'vibe coding' sounds amazing. Until you put it into practice. AI can do incredible things, but it won't magically produce production-ready apps just because you write good prompts. Without understanding basic architecture or how to guide the AI, you'll end up with unfinished projects. Just like my graveyard folder.

What separates successful AI-assisted development from frustrating dead ends isn't better prompts. It's having enough foundational knowledge to recognize when the AI is heading down a problematic path.

These basic skills will transform your relationship with AI. Version control saves your sanity. Terminal commands give you independence. Simple architectures provide structure. The AI works for you, not the other way around. And like any employee, it needs clear direction from someone who knows where they're going.

So before you vibe code, build your foundation. Your future self will thank you.

Resources to Get Started

If you'd like to see these principles in action, I've created a few helpful resources:

Project Showcase - See examples of what I've built using this approach
Reading: Git Commands for Developers

These real-world examples demonstrate that you don't need a computer science degree to create functional applications with AI assistance.