Build Anything with AI as Your Thought Partner

The Old Way vs. The New Way

In the past, if you wanted to build a simple app—say, a button that plays a sound when pressed—you needed to:

• Learn HTML (the structure of web pages)
• Learn CSS (how things look)
• Learn JavaScript (how things behave)
• Understand browser APIs (how to actually play audio)
• Debug cryptic error messages
• Spend weeks or months getting something basic working

Now? You describe what you want to an AI, and it writes the code. When it doesn't work, you show the AI the error, and it fixes it. The skill has shifted from "knowing programming languages" to "knowing how to describe what you want clearly."

What Is "Code" Anyway?

Before we go further, let's demystify what code actually is. Code is just text that computers can read and follow. It's like a recipe—step-by-step instructions written in a language computers understand.

For web-based tools (which is what we'll build), there are three types of code:

• HTML — The structure. "Put a button here, a title there." Like the bones of a body.
• CSS — The appearance. "Make the button blue and big." Like the clothes and makeup.
• JavaScript — The behavior. "When clicked, play a sound." Like the brain and muscles.

You don't need to learn these languages. AI will write them for you. But understanding what they do helps you communicate with AI better. If something looks wrong, you can say "the CSS seems off" instead of "it's broken somehow."

Why Start with HTML? (Other Languages Exist!)

HTML/CSS/JavaScript are just one family of programming languages. There are many others, each designed for different purposes:

• Python — Great for desktop apps, automating tasks on your computer, data analysis, and AI. If you want to make something that runs directly on Windows/Mac (not in a browser), Python is often the choice.
• Swift — Apple's language for iPhone and iPad apps.
• Kotlin / Java — For Android phone apps.
• C# (C-Sharp) — For Windows desktop apps and games (Unity).
• SQL — For working with databases (storing and retrieving information).

So why do we start with HTML?

• Zero setup — Just save a file and open it in your browser. No installation needed.
• Instant feedback — Make a change, refresh the page, see the result immediately.
• Works everywhere — Phones, tablets, computers—any device with a browser.
• Easiest to debug — Visual problems are obvious; you can see what's wrong.
• AI is great at it — Web code is extremely well-documented online, so AI models are very good at writing it.

What "Vibe Coding" Actually Means

The term "Vibe Coding" comes from the idea that you're communicating the essence of what you want—the vibe—rather than the technical implementation. You say "I want it to feel calm and accessible" instead of "use a 16px font with #333 color and 1.6 line-height."

But here's the crucial part that many people miss: Vibe Coding is not magic. It requires:

• Clear thinking — You must understand your own problem deeply
• Patience — The first output is rarely perfect; iteration is normal
• Verification — AI can be wrong; you must test and validate
• Persistence — Complex projects take many conversations, not one

The Right Mental Model

Think of AI as a highly skilled collaborator who:

• Has broad knowledge but doesn't know your specific situation
• Can suggest approaches but needs your feedback to refine them
• Works best with conversation, not one-shot requests
• Can explain its reasoning if you ask
• Will confidently give wrong answers sometimes (more on this later)

How to Have Productive Conversations

Start with Context, Not Requests

Before asking for code, explain your situation. The more context you provide, the better the AI can help.

Notice how this prompt doesn't immediately ask for code. It establishes:

• Who you are (caregiver, no programming experience)
• Who you're building for (14-year-old with cerebral palsy)
• The constraints (single head-switch)
• The goal (play a song on switch activation)
• The user's preferences (loves immediate feedback)

Ask Questions Before Building

Use AI to explore the problem space before jumping to solutions:

Iterate, Don't Start Over

When something isn't right, describe what's wrong rather than starting a new conversation:

A Real Conversation Example

Here's what a productive back-and-forth actually looks like:

Notice what happened: The AI asked clarifying questions, confirmed understanding, and offered choices about how to proceed. This is the kind of collaboration that produces good results.

Learning by Watching and Asking

Here's something important: you don't need to understand the code to start building. At first, you'll be "blindly" asking AI to do things, and that's okay. But over time, something magical happens—you start to learn.

Every time AI writes code for you, you can ask it to explain:

The AI becomes your teacher. You'll find yourself picking up concepts naturally:

• "Oh, so functions are like reusable recipes for doing things"
• "I see—CSS is what controls colors and sizes"
• "So variables are just named containers for information"

This gradual understanding gives you an edge. When something breaks, you'll start to have intuitions about what might be wrong. When you want a specific change, you'll know how to describe it more precisely. You don't have to become a programmer—but you'll become better at directing one.

What's Actually Inside Your Code?

Now that you've built something, let's briefly understand what AI created for you. If you open your HTML file in a text editor, you'll see something like this:

<!-- This is HTML - the structure -->
<button id="myButton">Press Me</button>

<!-- This is CSS - the appearance -->
<style>
  button { 
    background: blue; 
    font-size: 24px; 
  }
</style>

<!-- This is JavaScript - the behavior -->
<script>
  document.getElementById('myButton').onclick = function() {
    // play sound code here
  }
</script>

You don't need to understand this code. But knowing that <style> controls appearance and <script> controls behavior helps you say things like: "The button looks wrong—can you fix the style part?" or "The click isn't working—check the script section."

What Are Tokens?

When you chat with AI, your messages are broken down into small chunks called tokens. A token is roughly 3-4 characters or about ¾ of a word. For example:

• "Hello" = 1 token
• "Hello, how are you?" = 5 tokens
• A typical paragraph = 50-100 tokens
• A full page of code = 300-500 tokens

Both your messages AND the AI's responses use tokens. A long conversation with lots of code can quickly add up to thousands of tokens.

What's a Context Window?

The context window is how much the AI can "see" at once—your entire conversation plus any code or files you've shared. Think of it like the AI's working memory.

• Small context window (8K tokens) — Can see about 6,000 words or a few pages of code
• Medium context window (32K tokens) — Can see about 25,000 words or a small project
• Large context window (128K+ tokens) — Can see about 100,000 words or an entire codebase

Practical Impact

Context windows affect how you work:

• Long conversations use more tokens — Starting fresh can be more efficient than continuing a very long chat
• Code editors have an advantage — They feed relevant code to the AI automatically, using context wisely
• Bigger isn't always better — Larger context windows cost more; use what you need
• Be strategic — If AI forgets something important, paste it again or start a new conversation focused on that topic

Why Some Models Cost More

Not all AI models are equal. More powerful models can:

• Handle longer conversations without forgetting context
• Write more accurate, complex code
• Better understand nuanced requests
• Make fewer mistakes

This extra capability requires more computing power, which costs more money. Think of it like cars: a basic sedan gets you where you need to go, but a high-performance vehicle offers more speed and features at a higher price.

# Rough comparison (as of 2026):

GPT-4o          → Very capable, moderate cost
Claude Sonnet   → Excellent for coding, moderate cost
GPT-4 Turbo    → Top tier, higher cost
Claude Opus     → Most capable, highest cost
Llama 3 (local) → Free, but uses your computer's resources

How Pricing Works

AI services typically offer two pricing models:

1. Subscription Plans (Monthly Fee)

Pay a flat monthly fee (usually $10-20/month) and get a set amount of usage included. This is what most people start with because it's predictable.

• ChatGPT Plus: $20/month — includes generous usage of GPT-4o
• Claude Pro: $20/month — includes usage of Claude Sonnet
• GitHub Copilot: $10-19/month — integrated into your code editor

Important: Even with subscriptions, there are usually rate limits—caps on how many messages you can send per hour or per day. If you hit the limit, you'll need to wait or switch to a different model temporarily.

2. Pay-As-You-Go (API Usage)

Pay only for what you use, measured in tokens. This is more advanced and typically used by developers building apps, but some services offer it directly.

• You're charged per 1,000 tokens (input and output separately)
• You can usually set spending limits to avoid surprises
• Good for occasional use or when you need the most powerful models

Tips for Managing Usage

• Be concise — Shorter prompts use fewer tokens
• Don't repeat yourself — AI remembers the conversation; no need to re-explain
• Start fresh when changing topics — Old context uses tokens even when irrelevant
• Use the right model for the task — Simple questions don't need the most powerful model
• Set spending alerts — If using pay-as-you-go, set up budget notifications

Phase 1: Discovery (Before Any Code)

1. Define the User Who exactly is this for? What are their abilities? What devices do they use? What's their environment like? Write this down. You'll share it with AI.
2. Define the Core Need What is the ONE main thing this needs to do? Don't say "a communication app"—say "a way to request 'bathroom' with one button press that speaks out loud."
3. List the Constraints What are the limitations? Single switch? No internet? Must work on iPad? Needs to be extremely simple? Constraints are helpful—they focus the solution.
4. Explore with AI Before asking for code, have a conversation. Ask what approaches exist. Ask about trade-offs. Ask what you might not be thinking about. Let AI help you understand the problem space.

Phase 2: Building (The Iterative Loop)

1. Start Small Ask AI to build the simplest possible version. One button, one action. Get that working before adding complexity.
2. Test Immediately Save the file. Open it in a browser. Does it work? Test every feature as it's added. Don't write 500 lines before testing.
3. Fix Errors as They Appear Error → Copy → Paste to AI → Apply fix → Test again. This loop is normal. Even experienced developers do this constantly.
4. Add Features One at a Time Get the button working. Then add the sound. Then add the visual feedback. One feature, test, confirm, next feature.
5. Save Checkpoints When something works, save a copy (or use Git to commit). This way, if you break something later, you can go back to the working version.

# If you want to learn Git (optional but valuable):

git init                              # Start tracking this project
git add .                             # Stage all files
git commit -m "Button plays sound"    # Save checkpoint with description

# Later, if you break something:
git log --oneline                     # See your checkpoints
git checkout [commit-id]              # Go back to a working version

Phase 3: Refinement (Polish & Handoff)

1. Test with the Actual User Put it in front of the person it's for. Watch them use it. What's confusing? What's frustrating? What delights them?
2. Iterate Based on Feedback "The button is too small" → Ask AI to make it bigger. "The sound is too quiet" → Ask AI to add volume control. Real user feedback drives real improvements.
3. Document What You Built Create a README file that explains: what this is, who it's for, how to use it, and any known issues. Future you will thank present you.
4. Share It If it helps one person, it might help others. Consider sharing with the accessibility community. Open source your code. Pay it forward.

The README: Your Project's Memory

A README file is a text document (usually named README.md) that lives in your project folder. It serves multiple purposes:

• For you: Reminds you what you built and why, especially months later
• For AI: Give it to the AI at the start of each session to restore context
• For others: Helps anyone else understand and use your project

# Example README.md structure:

# Ben's Soundboard

A simple sound-playing app for my son Ben (14, cerebral palsy, single-switch user).

## What It Does
- Large buttons in a 2x3 grid
- Each button plays a different sound
- Works with keyboard (spacebar scans through options)

## How to Use
1. Open index.html in a browser
2. Tap any button to hear the sound
3. Press spacebar to scan (auto-highlight moves every 2 seconds)

## Known Issues
- Sound doesn't work on iOS until user taps once (browser limitation)

## Future Ideas
- Add volume control
- Let Ben record his own sounds

File & Saving Problems

Nothing Happens When I Click

It Looks Wrong

AI Gave Me Multiple Files

Code Editor Problems