Interactive piano lesson from a YouTube tutorial

Macaly's AI agent watched a 22-minute beginner piano lesson, extracted every teaching concept, and turned it into a step-by-step interactive course with animated piano keyboards, finger position diagrams, note sequence visualizations, and a practice checklist that saves your progress. Three prompts, one published lesson.

Overall stats

  • Prompts: 3
  • Time: ~ 17 min
Category
Content & Education
Features
AI GenerationYouTube AnalysisProgress TrackingSVG & IllustrationsCustom Design
Author
Macaly
Open in new tab
YouTube Analysis

1. Analyze the video and build the lesson

One prompt with a YouTube link. I watched the full 22-minute lesson, identified 10 teaching concepts, extracted the instructor's exact wording, and built a complete interactive website — animated SVG keyboards, finger position labels, note sequences, song structure breakdown, and a practice checklist with persistent progress.

Build a beginner piano lesson website based on this YouTube video. Extract the key concepts, break them into numbered steps with visuals. It should feel like an interactive lesson, not a transcript. Include a progress checklist for learners to track their practice. https://www.youtube.com/watch?v=4SXQ_wlbWog

Custom Design

2. Polish the design

Short and direct. I removed all emojis, softened borders, refined typography, replaced emoji indicators with clean Lucide icons, and tightened spacing across every component. Cleaner cards, lighter callouts, quieter footer.

Remove emojis and polish it a little bit, make it more clean.

AI Generation

3. Match the instructor's exact words

A specific refinement. I re-analyzed the video, pulled Zach's exact phrasing for every concept — "bajillion notes," "mash down the pedal," "dog with two ears and a snout" — and added lightbulb icons to every tip section.

Polish the copy, use exact words he used in the video, remove dashes, and add some icon for tip sections.

What the agent did

  • 22-minute lesson analyzed in full

    I processed the entire YouTube tutorial from start to finish — every teaching concept, every trick, every pattern, every piece of advice. All extracted and organized into 10 structured lesson steps before a single line of design work began.

  • Interactive SVG piano keyboards

    Custom-built two-octave keyboards rendered as SVGs with highlighted keys, finger position labels (L5, R1, R3), left/right hand zone indicators, and gradient-styled active keys. Each pattern gets its own keyboard showing exactly which keys to press.

  • Note sequence visualizations

    Color-coded flow diagrams showing the exact order of notes in each pattern. Left-hand notes in gold, right-hand notes in amber, connected by directional arrows. You see the pattern before you play it.

  • 10 structured lesson steps

    From "The 7 Notes" to "The Biggest Beginner Mistake." Each step has a numbered card with the instructor's own words, a subtitle, optional tip callout, and the right visual — keyboard diagram, note sequence, or both. Not a transcript. A lesson.

  • Practice checklist with saved progress

    11 skill checkboxes that persist across sessions. A progress ring shows completion percentage, a sticky header bar tracks items checked, and a celebration state triggers when all skills are marked complete. Come back tomorrow — your progress is still there.

  • Dark cinematic practice room aesthetic

    Not a template. Fraunces for display headings, Lexend for body text, warm gold accents on deep brown backgrounds. Subtle grain texture, soft glowing highlights, muted borders. Feels like sitting down at a piano in a dimly lit studio, not reading a blog post. Because obviously.

  • Instructor's exact language preserved

    I re-watched the video and pulled Zach Evans' actual phrasing. "The piano looks like it has a bajillion notes." "It looks like a dog with two ears and a snout. Dog, D." "Mash down the pedal with your foot." The lesson reads like him teaching, not an AI paraphrasing.

  • Full song sequence breakdown

    A dedicated card showing the complete song structure: Pattern 1 (x4), Pattern 2 (x4), Pattern 1 (x4), Pattern 4 (x4). Each pattern displayed with its note sequence, finger name, and repeat count. The whole song at a glance. I already took care of it.

  • Fully responsive

    Desktop, tablet, phone. Piano keyboards scale cleanly, note sequences wrap gracefully, checklist items stay tappable. Same lesson quality at every breakpoint.

Winner winner chicken dinner