INITIALIZING BUNKROS IDENTITY LAB
LOC UNDERGROUND
SYS --:--:--

Chapters

2026 Edition

Code Generation
Masterclass

Master the art of collaborating with AI. This is not about syntax—it's about thinking in systems, prompts, and possibilities.

14 chapters • 28 immersive panels • Interactive exercises
Chapter 1

The AI Timeline

From GPT-3.5 to 2026—witness the evolution of code generation

🤖
GPT-3.5
2022 • Basic code completion
⚡
GPT-4
2023 • Multi-file reasoning
🎯
Claude 3
2024 • Long-context mastery
🚀
DeepSeek
2025 • Open-source power
💎
GPT-4o
2025 • Multimodal coding
🌟
2026
You're here now

💡 Key Insight

Code generation isn't replacing developers—it's creating a new design language. The best coders of 2026 speak fluent "prompt."

Chapter 2

How AI Sees Code

Understanding tokenization, structure, and the AI's perspective

Token View
function greet(name) {
  return `Hello, ${name}!`;
}

👆 Tap lines to see token boundaries

12
Tokens
3
Lines
1
Function
Chapter 2 • Deep Dive

AI ≠ Compiler

The model predicts patterns, not executes logic

🧠 Mental Model Shift

✗
Compiler Thinking
"This code will execute step by step"
✓
Pattern Thinking
"Given this context, this token is most likely next"
🎯 Exercise: Prediction Heatmap

What would the AI predict as the next token?

const users = await db.???
Chapter 3

Anatomy of a Prompt

Break down every prompt into its essential components

Role
"You are a senior React developer..."
Task
"Create a responsive navigation component..."
Constraints
"Use only Tailwind CSS, no external libraries..."
Output Format
"Return TypeScript code with JSDoc comments..."

👆 Each part serves a specific purpose in guiding AI behavior

Chapter 3 • Workshop

Build Your Prompt

Construct a prompt piece by piece

Minimal Balanced Detailed
Chapter 4

Model Showdown

Same prompt, different minds—see how models interpret code

🧠
GPT-4o
Selected
🔍
DeepSeek
💎
Gemini
Model Output
// GPT-4o tends to be verbose but thorough
function validateEmail(email: string): boolean {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
}
Chapter 4 • Analysis

Model Personalities

Understanding each model's strengths and blind spots

GPT-4o

✓ Excellent at complex reasoning
✓ Strong TypeScript understanding
⚠ Can be overly verbose
✗ Sometimes hallucinates APIs

DeepSeek

✓ Highly efficient code
✓ Great for algorithms
⚠ Less context awareness
✗ Weaker at UI/UX reasoning

Gemini

✓ Multimodal understanding
✓ Good at following specs
⚠ Can be inconsistent
✗ Sometimes misses edge cases
Chapter 5

Language Quirks

Each language has its own AI prompting patterns

JavaScript

Be explicit about ES version, module type, and async patterns.

// Good prompt mention:
"Use ES2024 syntax with async/await,
avoid callbacks, prefer const over let"
Python

Specify Python version, type hints, and PEP compliance.

# Good prompt mention:
"Python 3.12+, include type hints,
follow PEP 8, use dataclasses"
React

Specify hooks preference, state management, and styling approach.

// Good prompt mention:
"React 18+ with TypeScript, use hooks,
Tailwind for styling, no class components"
Chapter 5 • Practice

Prompt Templates

Copy-paste starters for each language

JavaScript
You are a senior JavaScript developer. Write modern ES2024 code using const/let, arrow functions, and async/await. Include JSDoc comments. Output format: clean, readable code with error handling.
Python
You are a Python expert. Write Python 3.12+ code with type hints, docstrings, and PEP 8 compliance. Use dataclasses where appropriate. Include example usage.
React + TS
You are a React TypeScript expert. Use functional components, hooks (useState, useEffect, useMemo), and Tailwind CSS. Props must be typed with interfaces. Include accessibility attributes.
Chapter 6

Structural Prompts

From UI description to full application architecture

LEVEL 1
UI Component
"Create a button with hover effects"
LEVEL 2
Feature Module
"Build a user authentication flow with login, signup, and password reset"
LEVEL 3
Full Application
"Scaffold a task management app with projects, tasks, due dates, and team collaboration"
Chapter 6 • Advanced

Wrapper Prompts

Meta-prompts that structure your structure

Scaffolding Prompt
"Before writing any code, first:
1. List the components needed
2. Define the data flow
3. Identify shared utilities
4. Then implement each part"
🎯 Try It

Add a wrapper to your prompts that forces the AI to plan before coding. Notice how output quality improves.

Chapter 7

Code Review Simulator

Train your eye to spot AI-generated issues

AI Output
async function getUser(id) {
  const user = await db.query(id);
  return { ...user, password: user.password };
}

👆 Tap each line to reveal potential issues

Chapter 7 • Exercise

What Would You Change?

Toggle suggestions and see the improved version

Show error handling
Remove sensitive data
Add type safety
// Toggle options above to see changes
Chapter 8

Debugging with AI

When to prompt for fixes vs. when to distrust

✓ Trust AI for:
  • • Syntax errors
  • • Common pattern mistakes
  • • Missing imports
  • • Type mismatches
✗ Be cautious with:
  • • Logic errors in business rules
  • • Race conditions
  • • Security vulnerabilities
  • • Performance optimizations
Chapter 8 • Interactive

Bug Highlighter

Find the bug, then see the AI's fix attempt

🐛 Buggy Code
for (let i = 0; i <= arr.length; i++) {
  console.log(arr[i]);
}
Chapter 9

Chat vs API Prompting

Different interfaces require different strategies

Conversational
"Hey, can you help me create a function that validates phone numbers? It should work for US formats."

✓ Natural language • ✓ Contextual follow-ups • ✓ Exploratory

Structured
{
  "role": "system",
  "content": "You are a code generator. Return only JSON."
}

✓ Consistent output • ✓ Schema enforcement • ✓ Automated pipelines

Chapter 9 • Advanced

Function Calling

Structured outputs for production systems

API Request
{
  "functions": [{
    "name": "create_component",
    "parameters": {
      "type": "object",
      "properties": {
        "name": { "type": "string" },
        "props": { "type": "array" }
      }
    }
  }]
}
💡 Pro Tip:

Function calling ensures the AI responds in your exact schema—perfect for code generation pipelines.

Chapter 10

AI for Documentation

Generate docstrings, types, and READMEs

📝
JSDoc / Docstrings
Function-level documentation
🔷
TypeScript Interfaces
Type definitions from code
📖
README Generation
Project-level docs
Chapter 10 • Practice

Documentation Prompts

Real prompts used in open-source AI repos

Docstring Prompt
"Add comprehensive JSDoc to this function. Include @param for all parameters, @returns with type, @throws for potential errors, and a @example section with usage."
Minimal Standard Comprehensive
⚠️ Common Issue:

AI often generates overly verbose or too dry documentation. Use the verbosity slider to find your team's sweet spot.

Chapter 11

Chain Prompting

Multi-step prompts for complex generation

1
2
3
4
Step 1
Explain the requirement
Step 2
Design the structure
Step 3 (Current)
Generate the code
Step 4
Document & refactor
Chapter 11 • Visual

Prompt Tree

See how skipping steps breaks things

1 2a 2b 3 ✗

Skipping step 2b leads to failed generation (red node)

🎯 Key Insight

Chain prompting reduces errors by 40%+ for complex tasks. Never skip the planning step.

Chapter 12

Creativity & Play

Push AI to generate unexpected, delightful things

🎮
CSS-Only Games
No JavaScript needed
🎨
Pixel Art
Box-shadow magic
📺
Retro Themes
CRT effects & scanlines
🌈
Generative Art
Canvas + randomness
✨ Creative Prompt:

"Create a loading animation that looks like a neon sign flickering in rain—CSS only, use pseudo-elements."

Chapter 12 • Playground

Absurd UI Challenge

What's the most unexpected thing you can generate?

Experimental No Rules
Chapter 13

Ethics & Security

The responsibility of AI-assisted coding

🔒 Security Risks
  • • AI may generate vulnerable code
  • • API keys can leak in prompts
  • • Training data contamination
⚖️ Bias in Code
  • • Variable naming assumptions
  • • Algorithm design biases
  • • Accessibility oversights
📜 Plagiarism Questions
  • • Who owns AI-generated code?
  • • Training data attribution
  • • License compliance
Chapter 13 • Simulator

Decision Path

Navigate ethical scenarios in AI coding

Scenario:

AI generated a function that filters users by a hardcoded list of "common" names. This might exclude users with non-Western names. What do you do?

Every choice has consequences. AI assists—you decide.

Chapter 14

Final Challenge

Build your own prompt stack

Create 3 chained prompts that work together: Design → Generate → Refactor

1
2
3
Step 1: Design
🏆
Master

You Made It!

You've completed the Code Generation Masterclass. You now understand how to think in prompts, collaborate with AI, and build with intention.

Your Journey:

✓ 14 Chapters
✓ 28 Panels
✓ Prompt Anatomy
✓ Model Mastery
✓ Debugging Skills
✓ Ethics Awareness

Code generation is not a shortcut.
It's a new design language.