AI Coding 101 — aka **Vibe Coding**

Why “Vibe Coding”?

Vibe coding is the practice of guiding a project through open-ended chat with a code-generating model. Instead of leaning on autocomplete for small snippets, you outline requirements in natural language and refine the AI's drafts. The human stays in charge of architecture and review while the model handles the busywork.

Coding used to mean wrestling with syntax until your wrists ached. Now you can chat with an LLM in plain English, toss it a half-formed idea, and watch it shape clean functions in seconds. Teams using this approach often report prototype features landing 20% faster. It feels less like mechanical typing and more like directing a skilled assistant.

Who This Guide Is For

New devs who want to jumpstart projects without memorizing every API.
Senior engineers hunting leverage: less boilerplate, more architecture.
Side-project tinkerers who’d rather ship than sweat the small stuff.

If you write code and like shipping fast, read on. Heavy reliance on AI suggestions can introduce security risks or hidden bugs if left unchecked. Be prepared to refactor and audit the output, otherwise small mistakes can snowball into technical debt.

The Core Loop

Describe the intent.

“You are an expert in front end development. Build a react SPA as a dynamic pitch deck for my startup selling AI agents for your small business.”
Let the AI draft.
It produces a full controller, tests, and even a docstring.
Review, tweak, and test.
You stay in the driver’s seat—catch edge cases, rename variables, tighten security.
Iterate in chat.

“Refactor to use async/await and add rate limiting.”

Repeat until it ‘feels’ right. Your metric isn’t lines of code; it’s momentum. Even when the AI drafts most of the code, set aside time for thorough reviews and security checks before merging. Treat its output like code from a junior developer—promising but requiring scrutiny.

Tool Stack That Feels Good

Layer	Picks that pass the vibe check
Chat-first IDE	Cursor, Windsurf, VS Code + Copilot Chat
Terminal pair-programmer	codex, lm-studio, ollama
On-device models	Llama-3 8B for quick drafts, Phi-3 for super-cheap gen
Cloud muscle	Google Vertex AI, OpenAI platform
Glue scripts	A bit of Python or Node to stitch services together

Pick one from each row and you’re in business. Cursor and Copilot are proprietary services, while options like lm-studio, ollama, and Phi-3 can run locally for free. When budgets are tight, look for open-source alternatives such as Codeium or local Llama models.

Hands-On Example: React Pitch Deck

Prompt

“You are an expert in front end development. Build a react SPA as a dynamic pitch deck for my startup selling AI agents for your small business. Give me a single HTML file that i can open in my browser.” This block is lengthy; consider moving it to a gist and linking to it in future posts. Below is the full example for reference.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scal=1.0" />
  <title>AI Agent Pitch Deck</title>
  <!-- Tailwind via CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- React 18 CDN -->
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</head>

<body class="bg-gray-900 text-white overflow-hidden">
  <div id="root"></div>

  <script type="text/javascript">
    const { useState, useEffect } = React;

    function App() {
      const slides = [
        {
          title: "AI Agents for Small Business",
          subtitle: "Your Growth Co-Pilot",
          bullets: [],
        },
        {
          title: "The Pain",
          subtitle: "",
          bullets: [
            "Owners drown in repetitive tasks.",
            "CRMs, invoicing, and support stack don’t talk to each other.",
            "Every manual process bleeds margin."
          ],
        },
        {
          title: "Our Fix",
          subtitle: "",
          bullets: [
            "Drop-in AI agents that plug into the tools you already use.",
            "24/7 autonomy: support, invoicing, follow-ups, analytics.",
            "No code, no AI PhD required."
          ],
        },
        {
          title: "Product Highlights",
          subtitle: "",
          bullets: [
            "Inbox Agent – triages email + drafts smart replies.",
            "Revenue Agent – reconciles payments & nudges late payers.",
            "Insights Agent – forecasts sales, flags churn signals."
          ],
        },
        {
          title: "Why It Works",
          subtitle: "",
          bullets: [
            "LLM orchestration tuned for SMB data footprints.",
            "Privacy-first: on-prem or VPC-hosted.",
            "90-minute onboarding, live human backup anytime."
          ],
        },
        {
          title: "Business Model",
          subtitle: "",
          bullets: [
            "Tiered SaaS: $299 / $799 / custom enterprise.",
            "Usage-based overages for heavy workloads.",
            "Agency partners earn 20% recurring."
          ],
        },
        {
          title: "Let’s Build Your Agent Army",
          subtitle: "Book a pilot this week → founders@your-ai-agents.com",
          bullets: [],
        },
      ];

      const [index, setIndex] = useState(0);
      const total = slides.length;

      const next = () => setIndex(i => (i < total - 1 ? i + 1 : i));
      const prev= ()=> setIndex(i=> (i > 0 ? i - 1 : i));

      useEffect(() => {
        const handler = (e) => {
          if (e.key === "ArrowRight") next();
          if (e.key === "ArrowLeft") prev();
        };
        window.addEventListener("keydown", handler);
        return () => window.removeEventListener("keydown", handler);
      }, []);

      const slide = slides[index];

      return (
        React.createElement("div", { className: "h-screen flex flex-col items-center justify-center p-8 select-none" },
          React.createElement("div", { className: "text-center space-y-6 transition-all duration-500" },
            React.createElement("h1", { className: "text-4xl md:text-6xl font-bold" }, slide.title),
            slide.subtitle && React.createElement("h2", { className: "text-xl md:text-2xl opacity-70" }, slide.subtitle),
            slide.bullets.length > 0 && React.createElement("ul", { className: "mt-6 space-y-2 text-left mx-auto max-w-xl list-disc list-inside" },
              slide.bullets.map((b, i) =>
                React.createElement("li", { key: i, className: "text-lg md:text-xl leading-snug" }, b)
              )
            )
          ),
          React.createElement("div", { className: "absolute bottom-6 left-0 right-0 flex items-center justify-between px-6 text-sm opacity-70" },
            React.createElement("button", { onClick: prev, className: "hover:opacity-100" }, "← Prev"),
            React.createElement("div", { className: "flex-1 mx-4 h-1 bg-gray-700 rounded" },
              React.createElement("div", {
                className: "h-1 bg-teal-400 rounded transition-all duration-300",
                style: { width: ((index + 1) / total) * 100 + "%" }
              })
            ),
            React.createElement("button", { onClick: next, className: "hover:opacity-100" }, "Next →")
          )
        )
      );
    }

    ReactDOM.createRoot(document.getElementById("root")).render(React.createElement(App));
  </script>
</body>

</html>

Wrapping Up

Vibe coding is about keeping your momentum high while the AI handles the repetitive pieces. Start with small experiments like the pitch deck above and gradually layer on automation. The more you converse with your models, the better they can translate your intent into working code. Stay curious, keep shipping, and let the rhythm guide you.

When adopting these tools, stay mindful of data privacy and the limitations of current models. They occasionally hallucinate or reuse licensed snippets, so validate outputs and keep human judgment in the loop.