Create With Intention

What To Expect

• Vibe Coding — just build. Describe what you want and iterate
• Prompt Engineering — encode your intention with structure, constraints, and precision
• Context Engineering — shape what the AI knows with persistent context and tools
• Agentic Engineering — orchestrate multiple agents into a coordinated system

With one throughline: intention.

Table of Content

Your Journey Today

Ch 1 — Vibe Coding

Getting Started · 09:15–10:30

1. CONNECT: your experience with AI
2. THEORY: what is vibe coding, why intention matters
3. WATCH: Figma Make x Claude Code
4. BUILD: meet your tool (Claude Code), then vibe-code anything from scratch

Break — 15 min

Ch 2 — Prompt Engineering

Taking Control · 10:45–12:00

1. CONNECT: vibe coding — how did it go?
2. THEORY: structured prompting, specificity, constraints, output formatting
3. WATCH: Getting Started with Claude.ai
4. BUILD: rebuild your Ch 1 project with structured prompts and proper tooling

Lunch — 1 hour

Ch 3 — Context Engineering

Building the Brain · 13:00–14:15

1. CONNECT: prompt engineering — how did it go?
2. THEORY: the agent loop, CLAUDE.md, SPEC files, skills, tool use, CLI & MCP
3. WATCH: MCP & skills in action
4. BUILD: architect your project (CLAUDE.md + SPEC files + skill.md), then one-shot rebuild

Break — 15 min

Ch 4 — Agentic Engineering

Building the System · 14:30–15:45

1. CONNECT: context engineering — how did it go?
2. THEORY: from one to many, subagents, multi-agent patterns, the human in the loop
3. WATCH: multi-agent coordination
4. BUILD: use subagents, coordinate a workflow, ship a feature

Break — 15 min

Chapter 1 — Vibe Coding

Getting Started

Your Experience With AI

Open discussion — share with the room

What Is Vibe Coding?

There's a new kind of coding I call "vibe coding", where you fully give in to the vibes, embrace exponentials, and forget that the code even exists.

— Andrej Karpathy, Feb 2025

Programming by conversation — describe what you want in plain language, and the AI writes the code.

— General definition

The fastest path from idea to working software — no syntax required, just intention.

— Our definition

Why Vibe Coding Works

Why Intention Matters

The intention is what makes what we build human.

More Than Text

Each extra sense gets it closer to understanding what you want.

Watch

Figma Make x Claude Code

What Is Claude Code?

An AI agent that lives in your terminal. You instruct — it executes.

• Opens in your terminal — no IDE required
• You describe what you want in plain English
• It reads files, writes code, runs commands, fixes errors
• It does what you tell it to — coding is just one of the things it can do

It should have been called Claude Instruct.

Go.

25 minutes — vibe code anything from scratch

We regroup at 10:25

Need help? Ask your agent.

Break — 15 min

What's Next

You just proved you can build. But can you control it?

Next up — Prompt Engineering: Taking Control

Chapter 2 — Prompt Engineering

Taking Control

How Did It Go?

Open discussion — share with the room

What Is Prompt Engineering?

The process of writing effective instructions for a model, such that it consistently generates content that meets your requirements.

— OpenAI

A relatively new discipline for developing and optimizing prompts to efficiently build with large language models.

— DAIR.AI Prompt Engineering Guide

Prompt engineering is the art of encoding your intention so precisely that the AI has no room to guess.

— Our definition

Anatomy of a Good Prompt

1. Specificity & Constraints — reduce the solution space
2. Structured Prompting — clear sections & hierarchy
3. Output Formatting — define the shape of the response
4. Few-shot Examples — show, don't just tell
5. Chain-of-thought — force step-by-step reasoning
6. Role Prompting — assign expertise & perspective

> Make me a landing page

> Make me a landing page for a coffee shop called Brew. Dark colors, works on phones, single page.

> Make me a landing page for a coffee shop called Brew. Dark colors, works on phones, single page.
I need a hero section, a menu, and a contact form.

> Make me a landing page for a coffee shop called Brew. Dark colors, works on phones, single page.
I need a hero section, a menu, and a contact form.
Put everything in one HTML file. Keep it simple, no frameworks.

> Make me a landing page for a coffee shop called Brew. Dark colors, works on phones, single page.
I need a hero section, a menu, and a contact form.
Put everything in one HTML file. Keep it simple, no frameworks.
Here's a screenshot of the style I'm going for: [image attached]

> Make me a landing page for a coffee shop called Brew. Dark colors, works on phones, single page.
I need a hero section, a menu, and a contact form.
Put everything in one HTML file. Keep it simple, no frameworks.
Here's a screenshot of the style I'm going for: [image attached]
Think through the layout before you start writing code.

> You're a frontend developer who cares about clean, readable code.

Make me a landing page for a coffee shop called Brew. Dark colors, works on phones, single page.
I need a hero section, a menu, and a contact form.
Put everything in one HTML file. Keep it simple, no frameworks.
Here's a screenshot of the style I'm going for: [image attached]
Think through the layout before you start writing code.

Comparing Prompts

When The Output Is Wrong

Map the symptom to the technique.

Planning Before Execution

You know what to say. But before you say it — think about how to work.

Plan → iterate → execute → review → fresh agent

Don't steer a sinking ship. Start a new one with a better plan.

Tooling

Tools are external capabilities the AI can call — file system, terminal, browser, APIs.

Tools are what turn a chatbot into an agent. We'll go deep on MCP in Ch 3 & 4.

Watch

Getting Started with Claude.ai

Go.

25 minutes — rebuild your Ch 1 project with structured prompts

We regroup at 11:40

Need help? Ask your agent.

Lunch — 1 Hour

What's Next

Next up — Context Engineering: Building the Brain

Chapter 3 — Context Engineering

Building the Brain

How Did It Go?

Open discussion — share with the room

What Is Context Engineering?

The art of providing all the context for the task to be plausibly solvable by the LLM.

— Tobi Lutke, CEO of Shopify

Context engineering is the discipline of shaping what the AI sees — writing, selecting, compressing, and isolating context for each task.

— Sequoia Capital

A perfect prompt with zero context is still a guess. Context engineering is how you give AI the knowledge to get it right.

— Our definition

The Context Stack

Context is not one thing — it's layers. Some are always present, others load on demand.

Context Stack

Context Stack
│
└─ System Prompt            ← built into the tool

Context Stack
│
├─ System Prompt            ← built into the tool
│
└─ CLAUDE.md                ← project root (you write this)

Context Stack
│
├─ System Prompt            ← built into the tool
│
├─ CLAUDE.md                ← project root (you write this)
│  ├─ src/
│  │  └─ CLAUDE.md          ← component rules
│  ├─ tests/
│  │  └─ CLAUDE.md          ← test conventions
│  └─ docs/
│     └─ CLAUDE.md          ← writing style

Context Stack
│
├─ System Prompt            ← built into the tool
│
├─ CLAUDE.md                ← project root (you write this)
│  ├─ src/CLAUDE.md
│  ├─ tests/CLAUDE.md
│  └─ docs/CLAUDE.md
│
└─ User Prompt              ← your message

Context Stack
│
├─ System Prompt            ← built into the tool
│
├─ CLAUDE.md                ← project root (you write this)
│  ├─ src/CLAUDE.md
│  ├─ tests/CLAUDE.md
│  └─ docs/CLAUDE.md
│
├─ User Prompt              ← your message
│
└─ Tool Results             ← lazy-loaded
   ├─ file reads
   ├─ search results
   └─ web fetches

Context Stack
│
├─ System Prompt            ← built into the tool
│
├─ CLAUDE.md                ← project root (you write this)
│  ├─ src/CLAUDE.md
│  ├─ tests/CLAUDE.md
│  └─ docs/CLAUDE.md
│
├─ User Prompt              ← your message
│
├─ Tool Results             ← lazy-loaded
│  ├─ file reads
│  ├─ search results
│  └─ web fetches
│
└─ Conversation History     ← prior messages

Your Codebase Is the Context

Your codebase, way more than the prompt, is the biggest influence on AI's output.

• Files & folder structure are the map
• Tests, types & linting are the feedback loop
• Design patterns & domain modeling guide AI decisions

Software quality matters more than ever.

The Architect vs The Agent

You see architecture. The AI sees tokens.

Inside a Session

What happens when an agent starts a session?

The Bottleneck

Most agent failures aren't model failures — they're context failures.

The Agent Loop

Every agent follows the same cycle.

Then repeat. The loop is what makes an agent an agent.

This is why agents can self-correct — they see their own mistakes and try again.

Spec Files

Define what each piece does — and how they connect.

The Context File Hierarchy

your-project/
└─ ...

~/.claude/
└─ ...

your-project/
└─ CLAUDE.md

~/.claude/
└─ CLAUDE.md                    ← personal, per employee

your-project/
├─ CLAUDE.md
└─ .claude/
   └─ specs/
      ├─ feature-a.spec.md
      └─ feature-b.spec.md

~/.claude/
└─ CLAUDE.md                    ← personal, per employee

your-project/
├─ CLAUDE.md
└─ .claude/
   ├─ specs/
   │  ├─ feature-a.spec.md
   │  └─ feature-b.spec.md
   └─ skills/
      ├─ deploy.md
      └─ test.md

~/.claude/
└─ CLAUDE.md                    ← personal, per employee

your-project/
├─ CLAUDE.md
├─ src/
│  └─ CLAUDE.md              ← scoped rules
├─ tests/
│  └─ CLAUDE.md              ← test conventions
└─ .claude/
   ├─ specs/
   │  ├─ feature-a.spec.md
   │  └─ feature-b.spec.md
   └─ skills/
      ├─ deploy.md
      └─ test.md

~/.claude/
└─ CLAUDE.md                    ← personal, per employee

your-project/
├─ CLAUDE.md
├─ src/
│  └─ CLAUDE.md              ← scoped rules
├─ tests/
│  └─ CLAUDE.md              ← test conventions
└─ .claude/
   ├─ specs/
   │  ├─ feature-a.spec.md
   │  └─ feature-b.spec.md
   ├─ skills/
   │  ├─ deploy.md
   │  └─ test.md
   └─ settings.json          ← tool permissions

~/.claude/
└─ CLAUDE.md                    ← personal, per employee

CLAUDE.md in Practice

From the Claude Code team themselves.

Our team shares a single CLAUDE.md for the entire repo. We check it into Git, and the whole team contributes multiple times a week. Anytime Claude does something incorrectly we add it to the CLAUDE.md, so Claude knows not to do it next time.

— Boris Cherny, Claude Code team @ Anthropic

• Checked into Git — shared, versioned, reviewed like code
• Updated constantly — every mistake becomes a rule
• Compound engineering — every session gets smarter

Skills: Your Plugin Library

A skill is a prompt injection — a reusable procedure, loaded on demand when you invoke it.

# Simple skill — single file

.claude/skills/
└─ deploy.md            ← one markdown file

You type:  /deploy
Claude sees: the full contents of deploy.md
              injected into the conversation

# Full skill — folder with resources

.claude/skills/
└─ review-pr/
   ├─ skill.md           ← the prompt (entry point)
   ├─ checklist.md      ← loaded on demand
   └─ examples/
      ├─ good-pr.md     ← reference material
      └─ bad-pr.md      ← anti-patterns

# Inside skill.md

---
description: Review a pull request
tools: [Bash, Read, Grep]
---

You are a code reviewer. Follow these steps:
1. Read the diff with `gh pr diff`
2. Read checklist.md and check each file against it
3. Flag security issues, missing tests
4. Look at examples/good-pr.md for tone & format
5. Post a structured review comment

# ↑ Sibling files aren't auto-loaded.
# The prompt tells Claude when to read them.
# This IS the prompt — injected when you
# type /review-pr

The Skills Marketplace

You don't have to write every skill from scratch.

# Browse & install from the registry
claude skill install @anthropic/review-pr
claude skill install @company/deploy-aws
claude skill install @community/migrate-db

Tool Use

An agent without tools is just a chatbot. Tools are how it acts.

CLI Tools

CLI = Command Line Interface — the agent's built-in hands.

npm test
gh pr view 42
psql -c "SELECT count(*) FROM users"
fly deploy --app my-app

MCP: Model Context Protocol

MCP = Model Context Protocol — a standard for connecting agents to external services.

MCP turns an LLM into a full-stack engineer with access to your entire toolchain.

CLI vs MCP: The Trade-off

Both give the agent hands. They cost differently.

Same task. Same agent. MCP: 114K tokens. CLI: 26.8K.

— Playwright team benchmark

Prefer CLI when both can do the job.

Tips

Prompt Engineer Your Project Files

• Use prompt engineering to write your CLAUDE.md, spec.md, and skill.md files
• Validate these files — read them, understand them, iterate on them
• Do NOT vibe code these — they are the entry point for every fresh agent. Know exactly what they say.
• Sub CLAUDE.md files can lazy-load specific related spec.md files for that section of the codebase
• Skills are prompts too — write them with the same care and intention as your CLAUDE.md

These files are your intention — expressed as instructions.

Watch

MCP & Skills in Action

Go.

30 minutes — architect your project's context, then one-shot rebuild

We regroup at 13:55

Need help? Ask your agent.

Break — 15 min

What's Next

Your AI has a brain and hands. Can you make them work together?

Next up — Agentic Engineering: Building the System

Chapter 4 — Agentic Engineering

Building the System

How Did It Go?

Open discussion — share with the room

What Is Agentic Engineering?

"Agentic" because you are not writing code directly — you are orchestrating agents and acting as oversight. "Engineering" to emphasize there is an art and science to it.

— Andrej Karpathy

Agents plan and operate independently, potentially returning to the human for further information or judgement.

— Anthropic, "Building Effective Agents"

Context engineering gave it a brain. Agentic engineering is how you work together.

— Our definition

From One to Many

Why a single agent isn't enough.

Subagents

One agent can only do one thing at a time. Subagents unlock parallelism.

Think of it as a lead developer who delegates to juniors — each focused on their own task.

Multi-Agent Patterns

How agents work together.

The Human in the Loop

You are the architect. The agents are the builders.

Agents are fast. Your intention is what makes them good.

The Full Spectrum

Everything you learned today — in one picture.

Each layer builds on the last. Together, they turn a chatbot into a collaborator.

Watch

Multi-Agent Coordination

Go.

30 minutes — coordinate agents and ship a feature

We regroup at 15:25

Need help? Ask your agent.

Break — 15 min

What's Next

You've built the full stack — brain, hands, and system. Time to look back at what you made.

Next up — Takeaways and the Bonus round.

Create With Intention

What you built today

• Vibe Coding — you got your hands dirty and proved you can build
• Prompt Engineering — you learned to communicate with precision and professional tooling
• Context Engineering — you gave the AI a persistent brain, hands, and a toolkit
• Agentic Engineering — you coordinated multiple agents working together to ship real features

The tool is fast. Your intention is what makes it good.

Now go build something Monday.

Bonus — Advanced Topics

For those who want to go deeper.

Stochastic vs Deterministic

Scripts are deterministic — same input, same output. Every time.

Agent outputs are stochastic — same prompt, different result. Every time.

So how do we enforce specific outcomes?

Hooks

Deterministic guardrails for stochastic agents.

Adding rules to CLAUDE.md reduces the chance of bad behavior — but doesn't prevent it.

Every instruction burns your instruction budget.

Hooks in Practice

Move rules from CLAUDE.md → deterministic hooks.

# CLAUDE.md
**Always use `pnpm`, not `npm`.**
**Never run `git push`.**

# .claude/settings.json
"hooks": {
  "pre-tool-use": [{
    "matcher": "Bash",
    "command": "./hooks/block-npm.sh"
  }]
}

Take instructions out of your instruction budget and enforce them deterministically.