CLAUDE CODE FOR LEARNING PROFESSIONALS

A 75-minute webinar for instructional designers and L&D leaders

Brick Maier | Director of Enterprise Learning and Development | March 2026

brick@heatspring.com  ·  LinkedIn

1

Agenda

~8 min Context The cost shift, what's already happening in L&D
~20 min Claude Code What it is, the ecosystem, tool stack, dev cycle, pricing, CLAUDE.md
~25 min Live Demos Video Maker, Rewiring America Calculator, HeatSpring Production
~12 min Framework TDD, vocabulary mapping, SaaS vs personal software, flotilla model
~10 min Closing + Q&A First steps, resources, open discussion
2

The Cost Shift

Old cost: dollars

Building software used to be expensive. You paid for engineers, infrastructure, time. That cost is collapsing. Three people at StrongDM now build what took a 10-person team 18 months ago. Midjourney runs on 11 people and $200M in revenue.

New cost: rework

The expense shifted. A bad spec now produces a bad deliverable in hours instead of months — and the rework cycle to fix it burns the same weeks it always did. AWS launched Cairo to force testable specifications before any code is generated. The bottleneck is no longer building. It's defining what to build.

The cost moved from dollars and tokens to time and rework. The people who write clear specs avoid the rework.

3

Already Happening in L&D

  • LinkedIn scrapped its Associate Product Manager programme → replaced with Associate Product Builder (Dec 2025) — fusing product, design, and engineering into one role
  • PwC Learning Collective: continuous, embedded, AI-native development across 364,000 people
  • Rolls-Royce: piloting AI "thinking partners" → creating "full-stack HR people"
  • Sana acquired by Workday for $1.1B — LMS, LXP, authoring, and AI tutoring in one AI-native environment

Dr. Philippa Hardman's Substack piece "The Rise of the Full-Stack LXD" maps this shift in detail — worth reading after this session.

4

What Claude Code Is

A coding agent that runs in your terminal. You talk, it builds.

How It Works

  • You describe what you want in plain language
  • Claude Code reads your files and understands context
  • It writes code, runs tests, commits changes
  • You review and iterate

CLAUDE.md = your standing instructions. Loaded into every conversation. Defines rules, constraints, project context.

How It's Different

ChatGPTYou copy/paste code
CopilotAutocompletes as you type
Claude CodeAn agent that acts on your codebase
Claude Code CLI
5

The Claude Ecosystem

Three ways to work with Claude. Each trades convenience for control:

Claude — Browser

The chat interface at claude.ai. You type a prompt, Claude responds. Good for writing, research, analysis, brainstorming. No access to your local files.

Access: Browser tab. Chat based with in-browser asset creation.

Claude Cowork — Local App

Desktop application. Chat interface plus local file access plus a built-in proxy to Claude Code. The middle ground — GUI convenience with some local reach.

Access: Desktop app. Mouse-driven with file picker.

Claude Code — CLI

Terminal tool. No GUI. Direct access to commands, files, git, and your full development environment. Every action is a typed instruction — no mouse, no menus, no navigation overhead.

Access: Terminal. Keyboard only. Maximum throughput.

This session focuses on Claude Code. CLI tools are faster because every action is a direct instruction — no clicking through menus, no dragging files, no waiting for interfaces to load. That efficiency compounds across a full build session.

6

The Tool Stack

Claude Code

AI coding agent — reads, writes, tests, and commits code from your terminal

Git + GitHub

Version control — every change is tracked, every version recoverable

Vercel

Deployment — push code to GitHub, Vercel puts it live in 60 seconds

Next.js

Web framework — what Claude Code uses to build the actual app

You don't need to memorize this stack. Claude Code handles the technical details. You need to understand what each piece does so you can steer.

7

The Development Cycle Git Workflow App Workflow

1. Build Features

npm run dev
# Visit http://localhost:3000

Claude Code writes the code. You see it live locally.

2. Run Tests

npm test

Automated checks that the code does what you specified.

3. Commit Changes

git add .
git commit -m "message"
git push origin main

4. Auto-Deploy

Vercel detects the push → builds → deploys (~60 sec)

Click the thumbnails above to see the full workflow diagrams.

8

The Conversation

What working with Claude Code actually looks like.

You:

"Add a fuel type selector with radio buttons for natural gas, propane, fuel oil, and electric. Update the API call to pass the selected fuel type."

Claude Code:

I'll add a fuel selector component. Let me:

1. Read the current form component...

2. Create FuelSelector with radio buttons...

3. Update the API route to accept fuel type...

4. Run tests... All 24 tests passing.

You steer, Claude Code builds. It proposes an approach, you approve before it writes anything.

9

Pricing & Getting Started

Plan Cost Usage Models
Pro $20/mo 5x free capacity Opus 4.6, Sonnet 4.6, Haiku 4.5
Max 5x $100/mo 5x Pro capacity All models + priority access
Max 20x $200/mo 20x Pro capacity All models + priority access

Current Models (Feb 2026)

Opus 4.6 — most capable, best for complex projects. Sonnet 4.6 — scores within 1.2% of Opus on coding benchmarks at 5x less cost. Users preferred Sonnet 4.6 over the previous flagship Opus 4.5 59% of the time.

To get started: Pro at $20/mo gives you full Claude Code access with Sonnet 4.6 and Opus 4.6.
10

The CLAUDE.md File

The planning document Claude Code reads before it writes a single line. This is where the real design work happens.

Rewiring America CLAUDE.md

Next.js + Vercel — deployed web app

  • Test-driven rules
  • Project context & tech stack
  • Design principles
  • Features to build (phased)
  • Common pitfalls to avoid

Video Maker PLAN.md

Flask + Python — local app

  • Pipeline overview
  • Directory structure
  • API integration specs
  • Implementation phases
  • Error handling strategy

Claude Code is only as good as the brief you give it. A vague CLAUDE.md produces vague software. A precise one produces exactly what you asked for.

11

Demo: The 2026 Video Maker

Local Personal Software

The Pipeline

Canva PNGs → Claude script → ElevenLabs TTS → FFmpeg assembly → MP4

  • Runs locally at localhost:5001
  • Replaces: scriptwriter + voice talent + video editor + production coordinator
  • Built in an afternoon with Claude Code
  • No subscription, no SaaS

Personal software. One person's workflow. No deployment.

Video Maker Workbench
12

Demo: Rewiring America Calculator

Deployed Web App

  • A real web application calling a real API
  • Deployed to the internet via Vercel
  • Built by having a conversation with Claude Code
  • CLAUDE.md enforces test-driven development

The Workflow

CLAUDE.md → Claude Code builds → Tests pass → Git commit → Vercel auto-deploys

Try It Live

Open the Calculator →

Click to copy prompt

Add a monthly savings breakdown below the annual savings result. Show a 12-month bar chart using simple HTML/CSS (no chart library) where each bar represents one month's savings (annual / 12). Include month labels (Jan-Dec) below each bar. The bars should be yellow (#ffd900) with black borders matching the app's neo-brutalist style. Write the test first.

13

Demo: HeatSpring Production

Claude in a Live Learning Platform

Claude deployed into a production environment serving real learners.

Instructor Dashboard

  • AI-assisted assessment tools

Assessment Tools

  • Claude-powered evaluation
  • Feedback generation at scale

Live tab switch. This demo walks through the actual HeatSpring platform — not a slide deck, not a mockup.

14

TDD: Your Quality Safety Net [reward hacking TDD]

Test-Driven Development: Write the test BEFORE the code.

Why It Matters

  • You define "what does done look like?" before anything gets built
  • The CLAUDE.md enforces this: "No commits without passing tests"

The Analogy

You wouldn't approve a course without checking it against learning objectives. TDD is the same thing, automated.

// From the Rewiring America project:
test('calculates savings for valid address', async () => {
  const response = await POST(mockRequest);
  const data = await response.json();

  expect(response.status).toBe(200);
  expect(data.annualSavings).toBeDefined();
  expect(data.annualSavings.mean).toBeGreaterThan(0);
});
15

Same Work, Different Vocabulary

Engineering teams and L&D teams solve the same problem with different terminology:

Your Daily Work Engineering Equivalent
Writing learning objectives Acceptance criteria
"What does success look like?" Test specifications
Scoping a project with constraints Architectural planning
Structuring content for comprehension System design

Click table for the full list →

The specification skills that steer AI development are the skills you practice every day. The gap is tooling, not ability.

16

SaaS vs. Personal Software

What a SaaS License Buys You

  • Maintainability — a team keeps it working as browsers and standards evolve
  • Support — when something breaks, there's a help desk
  • Security — patches, audits, compliance
  • Archival access — your SCORM packages still play

The Risk of Personal Software

  • Worked in March, throws errors in September
  • Nobody maintaining it but you
  • Broken software with your name on it
  • The CLAUDE.md + TDD workflow is how you avoid this

Local Tools

Runs on your machine. If it breaks, only you are affected. Lower risk. (e.g., Video Maker)

Deployed Apps

Lives on the web. If it's public, you're the support team. Higher responsibility. (e.g., Rewiring Calculator)

17

The Flotilla Mental Model Tool Sprawl

Flotilla Diagram

Pre-AI: The Cruise Ship

  • Massive, expensive, slow
  • Tries to be everything to everyone
  • You're a passenger, not the captain

Post-AI: The Flotilla

  • Purpose-built tools, zero waste
  • Each tool does exactly one thing
  • Your LMS is still the Rig — personal tools are smaller, faster boats
18

Your First Steps

1. Install Claude Code

npm install -g @anthropic-ai/claude-code

2. Start Small & Personal

Build a tool for YOUR workflow. Something only you need.

3. Write the CLAUDE.md First

Define what "done" looks like before you start building.

4. Resources

  • Claude Code documentation — docs.anthropic.com
  • Dr. Philippa Hardman — "The Rise of the Full-Stack LXD" (Substack)
  • Nate B. Jones — "Code Is About to Cost Nothing" (YouTube)
19

Q&A

"The designers who start walking this path before it's formalized will be the ones leading pods, owning outcomes, and shaping what L&D looks like in the AI era. The ones who wait for permission will find the role has already moved."
— Dr. Philippa Hardman

Brick Maier | Director of Enterprise Learning and Development

Try the Demo App →
20