AI Engineering AcademyMonmouth University · HH216 · Summer 2026
PHASE 01 · OPEN
AI Engineering Academy
Build a local web page with an AI teammate. No coding background required. 125 min.
the orbit is your agenda — each phase rotates one notch
← → navigate · I ink-wash · F fullscreen
PHASE 01 · OPEN · 0:00 — 16:00
PHASE 01 · OPEN
5-minute quiz
No grade. We measure what you learn today.
Open the web course on your laptop:
weihaoqu.github.io/learnai-course
Pre-test is the first step inside.
PHASE 01 · OPEN · 0:00 — 16:00
PHASE 01 · OPEN
Read. Decide.
I Agree or I Do Not Agree — either way you do everything today.
Inside the web course:
weihaoqu.github.io/learnai-course
Read the consent. Click your choice.
Non-consent path → facilitator runbook (NOT shown to students)
PHASE 01 · OPEN · 0:00 — 16:00
— PHASE 01 · OPEN
Setup in four checks.
Copy only the text after the $. If any check fails, raise your hand.
01 · Open
Open Terminal. This is where commands go.
02 · Node
node --version If not found: nodejs.org → LTS.
03 · Install
npm install -g @anthropic-ai/claude-code
04 · Start
claude Log in when it asks.
~/workshop
$node --version
v22.11.0
$npm install -g @anthropic-ai/claude-code
✓ claude-code installed successfully
$claude
Do not type the $. It only means Terminal is ready.
Facilitator: Demo slowly. Confirm Terminal, Node, install, and first Claude prompt.
If someone is stuck for more than 90 seconds, pair or move them to the browser fallback.
PHASE 01 · OPEN · 0:00 — 16:00
— PHASE 01 · OPEN
You're ready when Claude answers.
Claude Code
>claude
Hi! I'm Claude. I can read your files, write code, run commands,
and build things with you. What are we making today?
Success
You see a > prompt and Claude asks what to build.
Stuck
Raise your hand. Do not keep retrying random commands.
Fallback
Use claude.ai: ask for one self-contained HTML file, save it, open it locally.
This is your agent. It edits files, runs code, and builds things under your supervision.
PHASE 01 · OPEN · 0:00 — 16:00
PHASE 02 · SAFETY
Read this before you talk to Claude.
❌ NO real name (use a nickname)
❌ NO address, school name, phone, email
❌ NO passwords, API keys, health, family details
❌ NO face photos or screenshots with personal info
❌ NO surprise installs after setup: npm, brew, pip, git clone
✅ OK: create, edit, and open today's local HTML file
✅ Pause on prompts that mention delete, network, login, or secrets
Parents: no screen photos · no coaching answers · no pressure around consent.
PHASE 02 · SAFETY · 16:00 — 21:00
PHASE 02 · SAFETY
Pick your nickname.
Write it on a sticky note. We use it for the whole session.
Skyline · NebulaCat · Trail · GameDev42 · null
PHASE 02 · SAFETY · 16:00 — 21:00
PHASE 03 · QUICK WIN
First page. Right now.
Paste this. Hit enter. Watch.
Create one local file named starter.html.
Use plain HTML and CSS only.
No React, Vite, Next, npm installs, or API keys.
The page should say:
"Hi, I'm <nickname>". Dark background.
One sentence about what my persona likes
(anything fictional is fine).
Open it in my browser when done.
0/ 5 pages rendered
10:00
Goal: every student has a page on screen by minute 25.
PHASE 03 · QUICK WIN · 21:00 — 29:00
— PHASE 04 · DECODE
claude.ai
Chat. Answers. Explains.
Edit your files
✗
Run terminal commands
✗
Remember your project
✗
Install skills
✗
Build across a codebase
✗
Answer questions
✅
Claude Code
Agent. Acts. Builds.
Edit your files
✅
Run terminal commands
✅
Remember your project
✅
Install skills
✅
Build across a codebase
✅
Answer questions
✅
PHASE 04 · DECODE
Claude reads CLAUDE.md first.
── CLAUDE.md ──────────────────
# Workshop Notes
- Call me <nickname>
- Beginner mode: explain before changing code
- Plain HTML/CSS only; no installs
- Ask before deleting, networking, or using secrets
──────────────────────────────
A project note for your AI teammate. Guidance, not enforcement.
PHASE 04 · DECODE · 29:00 — 39:00
PHASE 04 · DECODE
Permission prompt = pause.
Usually OK — create, edit, or open your local HTML file.
Ask Q first — install, delete, network, login, API key, password.
Reset — /clear starts a fresh conversation, not a fresh file.
Read the file path and command out loud before approving.
Interview me one question at a time
to plan a personal landing page for
my nickname persona. Cover: who they
are, sections, vibe, color, signature,
edge cases, and done checks.
Output a structured plan.
The reusable version is project-spec-interviewer: vague idea -> implementation-ready spec.
→ Next: watch it happen.
PHASE 05 · PLAN · 39:00 — 57:00
— PHASE 05 · PLAN
Watch it happen.
Claude Code — project-spec-interviewer pattern
Let's turn this into an implementation-ready plan. First question: What do you want someone to be able to do with what you build?
>I want visitors to understand my fictional space-designer persona
··· thinking
Nice. Next question: What sections should the landing page have?
One question at a time. Build only after the done checks are visible.
Facilitator cue:
Student volunteer on your laptop.
Prompt: "Use the project-spec-interviewer pattern. Ask one question at a time."
Let it surface 2–3 done checks. Then move on.
PHASE 05 · PLAN
A good plan has:
1 sentence about your persona
3 sections (e.g., About / Projects / Contact)
A vibe word (calm / bold / playful / pro)
A color
One thing that makes it YOURS
PHASE 05 · PLAN · 39:00 — 57:00
PHASE 05 · PLAN
Show Q your plan.
30-second review. Wave me over.
0/ 5 plans approved
No good plan, no build.
PHASE 05 · PLAN · 39:00 — 57:00
PHASE 06 · BUILD
Now the real one.
Using the plan we just made, create one local file named landing.html.
Use self-contained HTML, CSS, and vanilla JavaScript only.
Do not install packages. Do not use React, Vite, Next, API keys, or accounts.
Open landing.html in my browser when done.
Why one prompt
Small site = one-prompt scaffold for learning. Real projects = small prompts, verify each step.
PHASE 06 · BUILD · 57:00 — 75:00
PHASE 06 · BUILD
Test before you trust.
Does the file open in the browser?
Does it match your plan?
Do links, buttons, and text look right?
One bug found = one better prompt.
PHASE 06 · BUILD · 57:00 — 75:00
PHASE 06 · BUILD
Talk like a teammate.
"The page opens, but the header is too small.
Make only the header bigger."
"The colors feel harsh. Try a calmer palette.
Keep it one HTML file."
"Add a dark mode toggle.
Do not install anything."
Plain English. Specific. One at a time.
PHASE 06 · BUILD · 57:00 — 75:00
PHASE 07 · POLISH
Use open components.
21st.dev · shadcn/ui — free, open licenses.
Check the license
Don't paste closed-source code. Open licenses are clearly labeled (MIT, Apache, etc.).
PHASE 07 · POLISH · 75:00 — 87:00
PHASE 07 · POLISH
5 cheats to look pro.
Gradient background
One sans-serif font (Inter, Geist)
Lucide icons, not emojis
Generous whitespace
Dark mode by default
Tell Claude: "apply these."
PHASE 07 · POLISH · 75:00 — 87:00
PHASE 07 · POLISH
Second opinion.
Different AI. Different blind spots.
/codex review
Important
Review reduces risk. It does not prove correctness.
In Codex, type:
/goal <objective> so it is done when <checks pass>
Case study: these slides
/goal improve these slides so HS beginners can write a /goal, faculty can reuse the workflow, research students can track evidence, and checks pass: clean layout, self-contained, no JS errors.
Your turn:
/goal build my science fair page so it opens locally, explains my idea, and has one checklist I can test.
PAUSE
Pause before starting when audience, constraints, or done checks are missing.
MOVE ON
Proceed when the output is visible and the checks are clear and testable.
FINISH
Stop or rewrite the goal when checks pass or the direction has changed.
/goal is experimental direction, not autopilot. You still review every step.
PHASE 07 · POLISH · 75:00 — 87:00
PHASE 08 · SHARE
2 min each.
Show your page
One thing you learned
One thing AI got wrong
Best AI fumble of the day
Verbal award only — no name on screen. Criteria: funniest bug narrative, not most embarrassed student.
PHASE 08 · SHARE · 87:00 — 93:00
PHASE 09 · LEVEL UP
Pre-packaged superpowers.
── .claude/skills/landing-page/SKILL.md ──
---
name: landing-page
description: Build a personal landing page
---
Interview me one question at a time.
Cover: persona, sections, vibe, color.
Then build the HTML file.
──────────────────────────────────────
Did it twice? Codify it. Type /landing-page anywhere.