Welcome to Vibe Engineering - the art and science of building software with AI as your development partner. In this lesson, you'll learn the foundational tools and mindsets that transform you from a traditional coder into an AI-native developer.
Traditional Coding:
Vibe Engineering:
By mastering vibe engineering, you become a force multiplier - capable of building applications that would traditionally require a team of developers.
By the end of this lesson, you will:
AI models are the "brains" behind tools like Trae IDE, ChatGPT, and Claude. Each model has different capabilities, speeds, and costs. Understanding which model to use is like choosing the right tool from a toolbox.
| Model | Context Window | Best For | When to Use | Limitations |
|---|---|---|---|---|
| Claude Sonnet 4.5(Recommended) | 200K tokens(~600 pages) | Complex projects,debugging,refactoring | Building new featuresFixing TypeErrorsMulti-file projects | Higher cost than Haiku |
| GPT-4o(Alternative) | 128K tokens(~384 pages) | Quick questions,brainstorming,creative tasks | localStorage explanationsIdea generationFaster responses needed | Smaller context than Sonnet |
| Claude Haiku(Speed) | ~50K tokens(~150 pages) | Simple code,quick explanations,low-cost tasks | Button creationSyntax questionsSlow internet | Less capable with complex logic,more mistakes on advanced tasks |
What is a context window? The amount of information an AI model can "remember" at once. Think of it like short-term memory.
Why does this matter?
Example:
Small context (Haiku): Can handle 1-3 files
Medium context (GPT-4): Can handle 10-15 files
Large context (Sonnet): Can handle 30+ files
💡 Tip: Start with Claude Sonnet for your Spelling Bee project. If responses feel slow, try GPT-4. Only use Haiku for very simple tasks.
The command line (also called Terminal, Command Prompt, or Shell) is a text-based interface for controlling your computer. While it looks intimidating at first, it's actually much faster than clicking through folders once you learn the basics.
Why vibe engineers use the terminal:
npm install, python script.py)Method 1: Built-in Terminal
Method 2: Keyboard Shortcut
Cmd + JCtrl + Jpwd - Print Working Directory (where am I?)
$ pwd
/Users/yourname/projects/spelling-bee
Shows your current location in the file system.
ls - List files and folders
$ ls
index.html script.js style.css README.md
Shows all files in your current directory.
Tip: Use ls -la to see hidden files (like .gitignore)
cd - Change Directory (move to different folder)
# Go into a folder
$ cd spelling-bee
# Go up one level
$ cd ..
# Go to home directory
$ cd ~
# Go to specific path
$ cd /Users/yourname/projects
npm install - Install JavaScript packages
$ npm install
# Installs all dependencies listed in package.json
# (Modern npm 11+ includes improved dependency resolution)
python script.py - Run Python scripts
$ python ai_helper.py
# Executes your Python code
node script.js - Run JavaScript files directly
$ node test.js
# Runs JavaScript outside the browser
Commands show results in the terminal. Learning to read this output is crucial for debugging.
Example: Successful Installation
$ npm install express
added 57 packages in 3.2s
✓ Installation complete
Interpretation: Success! The express package installed correctly.
Example: Error Message
$ npm install
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /package.json
npm ERR! enoent ENOENT: no such file or directory, open '/package.json'
Interpretation: Error! No package.json file found. You're in the wrong directory.
Solution: Navigate to your project folder first:
$ cd spelling-bee
$ npm install
One of vibe engineering's most powerful techniques: sending terminal output directly to AI.
When you get an error:
Example:
User: I got this error when running npm install:
npm ERR! code EACCES
npm ERR! syscall access
npm ERR! path /usr/local/lib/node_modules
What does this mean and how do I fix it?
AI: This is a permissions error. You're trying to install packages
globally without the right permissions...
The AI can interpret error messages and suggest solutions instantly!
AI is excellent at writing boilerplate code, common patterns, and standard implementations.
Example:
Prompt: "Create a function that calculates the average of an array of numbers"
AI generates:
function calculateAverage(numbers) {
if (numbers.length === 0) return 0;
const sum = numbers.reduce((acc, num) => acc + num, 0);
return sum / numbers.length;
}
AI can explain complex code in simple terms.
Example:
Prompt: "Explain what this code does:
const filtered = words.filter(w => w.difficulty === 'easy')"
AI response: "This creates a new array called `filtered` containing only
the words from the `words` array where the difficulty property equals 'easy'.
The filter() method checks each word and keeps only those matching the condition."
AI can identify issues and suggest fixes.
Example:
Prompt: "This code gives 'Uncaught TypeError: Cannot read property length of undefined'
function checkAnswer(userInput) {
if (userInput.toLowerCase() === currentWord.word.toLowerCase()) {
return true;
}
return false;
}
"
AI response: "The error suggests `currentWord` might be undefined.
Add a check: if (!currentWord) return false; before the comparison."
AI can make code cleaner, more efficient, or more readable.
Example:
Prompt: "Make this code more readable:
let x=words.filter(w=>w.d==='e').map(w=>w.w).sort()"
AI response:
const easyWords = words
.filter(word => word.difficulty === 'easy')
.map(word => word.text)
.sort();
AI may not understand your specific game rules or unique algorithms without detailed explanation.
Example:
Vague: "Add scoring system"
Better: "Add scoring: base 5 points, +2 per correct streak, -2 per hint used"
AI sees one file at a time unless you provide context. It may not understand how files connect.
Solution: Use agent.md documentation (Concept 10) to give AI project overview.
AI is trained on existing code patterns. Completely new algorithms require human creativity.
Example: AI can implement known sorting algorithms (bubble sort, merge sort) but may struggle with inventing a new algorithm for a unique problem.
AI needs clear instructions. Vague prompts produce vague results.
Example:
❌ Bad: "Fix my game"
✅ Good: "Users can't submit answers. The submit button doesn't respond to clicks.
Here's my HTML button and JavaScript event listener: [paste code]"
In Trae IDE and advanced AI tools, models can perform actions beyond just chatting:
Available Model Actions:
Example in Trae:
Understanding where you are on the vibe engineering journey helps you set realistic goals and track progress.
| Stage | What You Do | Skills Practiced | Common Behaviors |
|---|---|---|---|
| One: Beginner(Copy-Paste) | Ask AI to generate codeCopy-paste directlyTest if it worksAsk AI to fix if broken | Prompting AITesting changesRecognizing working vs broken code | Don't understand pasted codeRely on AI for every changeStruggle when AI makes mistakes |
| 2: Intermediate(Understand & Modify) | Generate code with AIRead and understand outputModify to fit needsCatch obvious mistakes pre-test | Code comprehensionDebugging AI codeCustomizationFollow-up questions | Spot simple bugsUnderstand patterns (functions, loops)Make small modificationsUncertain about complex logic |
| 3: Advanced(Orchestrate AI) | Design system firstUse AI for componentsIntegrate into architectureReview and improve suggestions | System designArchitectural thinkingCode reviewMulti-step workflows | Build complete featuresUnderstand most AI codeDebug complex issuesRecognize AI limitations |
| 4: Master(AI Collaborator) | Collaborate as equalsRapid prototypingDelegate routine tasksFocus on creative UXImprove AI codeKnow when NOT to use AI | Full-stack developmentCreative problem-solvingStrategic AI usageDesign patternsIndependent optimization | Build production appsTeach othersOpen-source contributionsMulti-model strategyComfortable with ambiguity |
Example Workflows by Stage:
Stage One: "Create a button" -> AI generates -> Copy-paste -> Test in browser
Stage 2: "Create difficulty selector" -> AI generates buttons -> "Let me change styling and add icons" -> Modify AI code
Stage 3: "Build scoring system: base points, streak bonuses, hint penalties, localStorage" -> Design components -> AI implements parts -> Review, test, integrate
Stage 4: "Design Smart Farm chatbot with JSON knowledge base, pattern matching, personalized responses" -> Handle UX and algorithms -> AI generates structure -> Enhance with custom touches -> Deploy
Self-Assessment Questions:
Most students starting Spelling Bee project: Stage 1-2 Goal by end of Spelling Bee: Stage 2 Goal by end of Smart Farm: Stage 2-3 Goal by end of final project: Stage 3-4
Lesson 8-9: Learn Trae IDE basics → Stage 1 (Copy-Paste)
↓
Lesson 10-12: Spelling Bee project → Stage 2 (Understand & Modify)
↓
Lesson 13-16: Smart Farm project → Stage 2-3 (Orchestrate AI)
↓
Lesson 18-23: Final project → Stage 3-4 (AI Collaborator)
Remember: Progress isn't linear. You'll move between stages depending on the task. That's normal! The key is intentional practice and reflection on what you're learning.
In this lesson, you learned the foundations of vibe engineering:
AI Models:
Command Line:
pwd, ls, cd, npm installAI Capabilities:
Learning Flow:
Now that you have the foundational toolkit, you're ready to build the Spelling Bee project! As you work, you'll:
In Concept 10, you'll level up your prompting skills to get even better results from AI. But first, let's practice these fundamentals in the activity!
💡 Remember: Vibe engineering isn't about replacing your creativity-it's about amplifying it. AI handles routine tasks so you can focus on design, user experience, and solving unique problems.
The Vibe Engineering Mindset:
Ready to practice? Let's move to Activity 9 where you'll use these skills hands-on!