← Back to Academy

How We Built This Academy
in One AI-Assisted Session

A professor, Claude Code, and Codex turned one video transcript and a 161-entry wiki into 47 interactive modules. Here's the real story — decisions, mistakes, iterations, and all.

1Session
4Courses
47Modules
161Wiki Sources
18Build Steps

The Starting Point

It started with a single tweet — a video of Boris from Anthropic presenting Claude Code tips at a conference. The professor (Q) had an idea: "Can we turn this 28-minute talk into a full interactive course for high school students who've never coded?"

Q had two assets: the video and a personal wiki of 161 entries on AI tools, agent design, and engineering practices — accumulated over months of research. The challenge was turning raw knowledge into something a 15-year-old could follow.

The Build Timeline + Q's Actual Prompts

Each step shows what Q actually typed (the green bubbles) and what happened as a result. These are real, unedited prompts — this is what "directing AI" looks like.

Step 1 — The Spark

Download & Transcribe the Video

"Can you download this video. and work with codex to get the content of this video. It is a Claude code intro presentation. I want you and codex to work together to create a web course based on the content. I will sleep now so I give you all the permission now. You can decide what this web course look like, I hope non CS background students can follow our web course, and it is interactive or self contained. Go ahead, see you tomorrow."

Downloaded the video from X using yt-dlp. Extracted audio and transcribed with Whisper. 28 minutes of content became a 269-line transcript. Designed a 10-module course structure with Codex while Q slept.

claude_code_intro.txt + 10-module course plan
Step 2 — Build & Expand Course 1

Claude Code Fundamentals

Built a self-contained HTML file with terminal simulator, quizzes, drag-drop exercises, and flashcards. Then Q woke up and expanded the scope:

"Let us also add github part, explain what is that, why we need, and then add instruction on how to create. These are new non-cs. Also about deployment."
"I think we should also add the fundamental of what is a web app, so they know what Claude is building, which files matches to which."

Added GitHub, Web App Basics, and Deployment modules — growing the course from 10 to 13 modules. Codex reviewed 3 times, finding privacy inaccuracies, wrong install commands, accessibility gaps, and quiz XP farming bugs. All fixed.

claude-code-course.html (13 modules)
Step 3 — The Big Vision

Scan the Wiki & Plan Advanced Content

"Now, can you check my knowledge base, and my personal wiki (which in this folder) with more than 160 wiki posts. and find enough topics for them to learn, and combine into the tool. Work with codex and give me a plan of these advanced topic. I am interested in building a big tool that covered all my knowledge so far on agentic engineering."

Scanned Q's 161-entry wiki. Categorized into 8 themes. Codex designed a 16-module advanced curriculum based on the "Five Levels of Mastery" framework from Q's own wiki entries.

161 entries scanned, 8 themes identified
Step 4 — Full Delegation

Build Course 2 + Test with Personas

"1. you decided all these for me. 2. you and codex decide, i am good for either. 3. for the gaps, can you search online and help me draft these contents. 4. they are non-CS HS students, so you decided. I will leave for 2 hours, so please work heavily with codex to make the tool as complete as you can. After you build something you are confident, create three HS students to test. Always asks codex's opinion."

Q left for 2 hours. Built the Agentic Engineering Quest (10 modules, gamified, XP system). Codex tested with 3 simulated HS student personas: Maya (16, art-focused), Jason (17, gamer), Priya (15, debate skeptic). Fixed 12+ issues from persona feedback.

agentic-engineering-quest.html (10 modules)
Step 5 — Course Structure

Connecting Beginner & Advanced

"previously, i have the beginner course of what is github etc, where is it now? I want to start from basic, these agentic engineering part is advanced."
"yes, create the landing page for that."

Q returned and wanted a clear progression. Created a landing page connecting both courses with a visual learning path.

index.html (landing page v1)
Step 6 — Assessment Integration

Pre-Test & Post-Test

"this is a good pre test, I want to embed this pre test as well. how can I do?"
"I create the pre test, post test link for them. can we make it the first thing to use the tool before doing the pre-test, and for post test, where should I put in the tool."

Embedded Q's existing assessment tool. Added pre-test and post-test links to the learning path. Later, Q decided to remove the mandatory gate — good products remove things too.

Step 7 — Quality Enforcement

Catching Skipped Reviews

"okay, I think I already set as no.1 rule in claude.md that always asks codex for review. why you skipped this? how to push this to be executed always?"

Q caught Claude skipping the Codex review step on a "small" change and held it accountable. This moment shows the human's role: enforcing process discipline even when AI rationalizes shortcuts.

Step 8 — More Courses from Wiki

Build Course 3: AI Skills Lab

"I want to add the contents of making AI my thinking partner, and also make AI in teaching mode, and let codex and claude code work together. These three blog wiki are very useful to these students. So I want to create some mini courses to them as well."

Built 3 tracks from specific wiki entries: prompt frameworks (7 superpowers), AI as tutor (learning notes), and cross-model review (detective game). Each track produces an exportable artifact.

skills-lab.html (3 tracks, 11 modules)
Step 9 — Thoroughness Check

Scanning All 161 Wiki Entries

"can you also check all my wiki posts, any of these are good for HS non-cs background."
"I have 160 wikis, but you just scanned 40?"

Q noticed only 40 of 161 entries had been scanned and pushed for completeness. Three parallel agents scanned the remaining 121 entries. Found 38 total that were accessible to HS students.

38 HS-accessible entries from 161 total
Step 10 — The Scope Debate

6 Courses vs. 1 Combined Course

"what does codex say?"
"do you agree?"
"so talk to codex again with your ideas, let us get a both-agree plan."

Claude proposed 6 mini-courses. Codex pushed back: "scope creep." Claude countered: "pure study skills feels preachy — add a creative track as a reward." Q forced them to negotiate until both agreed: 1 combined course with 3 tracks (Study Better + Think Critically + Create Cool Stuff).

6 courses → 1 combined course (consensus)
Step 11 — Build Course 4

AI Life Skills

13 modules across 3 tracks. Study Better (Socratic tutor, cognitive fatigue, deep prompts), Think Critically (hallucinations, benchmarks, safety, independence), Create Cool Stuff (game design, video planning, story writing).

ai-life-skills.html (3 tracks, 13 modules)
Step 12 — The Landing Page Journey

4 Major Iterations

"the ui is ugly, the presession is too small."
"can you check this file, it contains a background prompt, can we combine both, with this background and with the floating courses?"
"if I click, it is frozen. how can I go back to the landing page. Also, it seems the pop up contents block the main items."
"I like the previous version better. this square pixel cells is too big. also, I am saying the background. I do not like black color or the theme. I like the color painting style."
"I trust you." (when asked to choose between uploading a painting or generating one)

Started as simple card list → added orbital hero → Q rejected dark theme → generated impressionist painting → frosted glass nodes → fixed click bugs → added recommended learning path. The landing page went through more iterations than any other file.

index.html (4 major iterations)
Step 13 — Branding

Cat Mascot & Icons

"I want to create a logo for this class, I will give you my cat's image."

Q shared a photo of their tuxedo cat. AI generated a logo: the cat wearing round glasses, sitting next to a laptop with a brain icon. Also generated 6 themed course icons — all with matching glow effects.

logo.png + 6 icon files
Step 14 — Deploy & Debug

Going Live

"this website is still the old one in github."
"let us remove this gate. I do not think we need it now."

Deployed to GitHub Pages. Debugged caching issues. Q decided to remove the pre-test gate — simplifying the user experience.

Live at weihaoqu.github.io/learnai-course
Step 15 — The Case Study

Recording the Process

"I want to record what I did in this session from scratch to show how I build this platform from scratch. So students can see this real case study."
"can you show all my prompts in order in the case study."
"it is better to organize my real prompt into these steps you summarized."

This page. Q wanted full transparency — not just the result, but the messy, iterative, real process of building with AI.

case-study.html (this page)
Step 16 — Polish & Consistency

Unifying the Academy

"I think our tool should have consistent style/theme. Can you and codex check it across all these courses."
"can these nodes's icon also match the background, like water color style."
"can we make these a bit bigger?"

Codex audited all 6 files and found two different dark themes and a completely different light theme in Course 1. Added a consistent nav bar across all pages, standardized colors, and made the case study a 7th orbital node. Then Q asked for watercolor-style icons to match the impressionist painting — regenerated all 7 icons in that style, and increased node sizes for readability. The final round of polish: taste, cohesion, details.

Consistent nav + watercolor icons + enlarged nodes
Step 17 — Video Content & QA Audit

Filling Gaps and Fixing Bugs

"i want to add a few more contents, but they are video links, help me with that."
"one of the tester tells me some buttons go to the link that is not available. I want you and codex to work together to audit the learnai course web app."
"can you use necessary skill to find necessary contents I am missing for the tool."

The biggest expansion session. Q provided 12 YouTube links; Claude analyzed each video's transcript, and Codex reviewed placement decisions. 12 videos were embedded across all pages: an "AI for beginners" intro on the landing page, Claude Code and visual workflow demos in Course 1, an optional AI agent builder in Course 2, the "vibe learning" warning and LLM explainer in Course 4, and a dedicated "How AI Actually Works" background page with 4 progressive videos (including a Chinese Stanford course summary with English subtitle instructions).

A Chinese prompt engineering tutorial was adapted into a downloadable cheat sheet for Course 3. Codex then ran a full QA audit simulating two student paths and found a critical infinite recursion bug in Course 3's navigation — switchTrack() and goMod() called each other endlessly, crashing the browser on any button click. Fixed by extracting a separate showMod() function. Also fixed a missing JS function reference, an HTML injection vulnerability, and a placeholder link.

12 videos + cheat sheet + critical bug fix + QA audit
Step 18 — Animated Background Effect

Adding Depth to the Experience

"this is a good ui background effect, do you think we can add it to our courses to enhance the UI."
"i do not see the effect."
"it is very good now, can we make these dots a bit more obvious, maybe change color"

Q found a Three.js dotted wave React component and wanted it on the course pages. Codex rejected Three.js (600KB, WebGL startup lag on Chromebooks) and proposed a dependency-free 2D canvas version using fake 3D perspective projection — same visual, zero dependencies, ~3KB. The first version only covered the top band; after iterating on camera angle, scene depth, and grid density, the wave expanded to fill the full viewport as a subtle fixed wallpaper. Q and Codex tested three color/opacity options; Option C (cyan-light at 16% opacity, smaller dots) won for best contrast without competing with content.

wave-bg.js: 3D dotted wave, zero dependencies, shared across 5 pages
💡
Notice the pattern: Q's prompts are short, direct, and focused on what and why — never on how. The AI figured out the how. Q's job was vision, taste, quality enforcement, and knowing when to push back.

Key Decisions We Made

Building is choosing. Here are the real tradeoffs we debated:

Architecture

React App vs. Self-Contained HTML?

Rejected
React/Next.js with npm, build step, and component library. Looks more "professional."
Chosen
Static HTML files with local images. No install, no server, no build step. Works on school Chromebooks.

Why: The academy's biggest advantage is accessibility. A teacher can share a GitHub Pages link and every student can use it immediately. Adding React would break that for one visual effect.

Scope

6 Mini-Courses vs. 1 Combined Course?

Rejected
6 separate mini-courses covering every topic from the wiki. Maximum coverage.
Chosen
1 combined course with 3 tracks: Study Better + Think Critically + Create Cool Stuff.

Why: Codex argued that 6 courses turns a clear learning path into a content maze. Students need depth, not breadth. One strong course beats six thin ones.

Audience

Engineers vs. High School Students?

Original Plan
16-module course for CS students and early-career engineers. Production agent architecture, autonomous ML, graph memory.
Adapted
10-module course for non-CS HS students. Same concepts, but with analogies, school examples, and "Deeper Dive" panels for advanced material.

Why: "Harness engineering" means nothing to a 15-year-old. "Set your agent up to succeed" means everything. Same concept, different framing.

Design

Dark Theme vs. Impressionist Painting?

V1
Pure dark background. Looked technical but felt cold and "coder-only."
Final
Impressionist painting hero with dark overlay. Felt warm, artistic, and welcoming to non-CS students.

Why: Q's taste. The professor wanted something that said "creativity and learning" not "hacker terminal." The painting sets a completely different emotional tone.

What the Human Did vs. What the AI Did

This is the most important section. Building with AI doesn't mean the AI did everything.

👤 The Human (Q)

  • Set the vision: "I want non-CS HS students to learn agentic engineering"
  • Chose the audience and adapted scope
  • Pushed back on design decisions (dark → painting, pixel → round particles)
  • Judged taste: "this is ugly", "the preset is too small", "I like the previous version better"
  • Enforced quality gates (Codex review rule)
  • Provided source material (161 wiki entries, cat photo)
  • Made final ship/no-ship decisions
  • Caught when Codex review was skipped
  • Defined the pedagogical philosophy
  • Curated 12 video links and decided which to include
  • Recruited testers and reported bugs

🤖 The AI (Claude + Codex)

  • Transcribed video (Whisper)
  • Designed course structures and module plans
  • Generated and revised all HTML/CSS/JS code
  • Reviewed every build for bugs and content accuracy
  • Simulated 3 student personas for testing
  • Scanned and categorized 161 wiki entries
  • Debated scope (6 courses → 1) and reached consensus
  • Generated logo and course icons from a cat photo
  • Generated impressionist painting background
  • Fixed dozens of bugs and issues across multiple review rounds
  • Analyzed 12 YouTube video transcripts and recommended placements
  • Ran full QA audit simulating student walkthroughs — caught critical recursion bug
  • Searched the web for content gaps and recommended new videos
💡
The AI proposed, challenged, drafted, and reviewed. The human held final judgment on every important decision: who the audience is, what "good" looks like, when to push back, when to ship. Speed without direction is just fast chaos.

Lessons Learned

1. AI doesn't remove thinking — it makes your thinking more visible. Every prompt Q wrote was a decision about what matters. The clearer the thinking, the better the output.
2. Good projects come from iteration, not one perfect prompt. Course 1 went through 4 Codex review rounds. The landing page had 4 major redesigns. Nothing was right the first time.
3. The human's job shifts from typing to directing. Q's main contribution was not hand-coding — it was directing, judging, revising, and enforcing quality. The role changed from "writer" to "director."
4. Review matters. AI-generated work still has bugs. Codex found real issues: security inaccuracies, accessibility gaps, infinite recursion, duplicate event handlers, privacy claims that were too strong. Without review, these would have shipped.
5. Audience changes everything. The same concept ("harness engineering") became a technical deep-dive for engineers OR "set your agent up to succeed" with a smart-student-in-a-bad-exam analogy for high schoolers. Same knowledge, completely different delivery.
6. Taste is the human superpower. "I like the previous version better." "The background is too dark." "This is ugly." These judgments can't be automated. They shaped every visual decision.
7. Constraints breed creativity. "Must be self-contained HTML" forced us to build a canvas particle system instead of using React. "Must work on school Chromebooks" eliminated framework dependencies. The constraints made the project better.

Try This Yourself

You don't need to be a professor or have 161 wiki entries. Here's a simplified version of what we did:

  1. Pick a topic you know well — a hobby, a school subject, a skill
  2. Find one source — a YouTube video, a blog post, your own notes
  3. Ask AI to design a 3-module course — specify your audience (who's learning?)
  4. Build it — ask AI to create an interactive HTML page with quizzes
  5. Review it — read every word. Fix what's wrong. Ask a friend to try it.
  6. Ship it — share the HTML file with your teacher, or put it on GitHub Pages (free)

A small first version can take 2-3 hours. A polished version takes more iteration. But the result is something real that helps real people learn.

🏆
The best way to learn agentic engineering is to use AI agents to build something that matters to you. This academy was built that way. Now it's your turn.