A self-directed project built to learn vibe coding and memorize guitar theory — at the same time. This documents how a raw idea evolved into a multi-mode game with a real design system, accessibility standards, and audio feedback.
Context
As a new guitar player, I wanted a tool that helped me memorize notes and chords on the fretboard — but nothing I found matched how I wanted to learn. So I built it. The project became two things at once: a guitar learning game and a hands-on crash course in AI-assisted development.
The goal wasn't to ship a finished product. It was to practice. To understand what it takes to go from idea to interface using modern tools — and to document the thinking as it happened.
Duration
8 days
from first prompt to current build
Phases
6
concept, design, systems, a11y, audio, content
Themes
3
Polaris, Material 3, Bootstrap
Rock songs
70+
curated chord-to-song database
Phase 1Apr 6–7
MVP concept
Prompt
"I want to develop a game through using my Claude to code setup via Figma. I want it to be a desktop web app around a standard 6 string guitar. The game is going to be centered around guessing with your cursor which note on the fretboard is highlighted. There's gonna be dots that represent where you're supposed to guess what the particular note is. You're gonna have some options — maybe 2 to 3, because you're really only gonna have A, B, C, D, F, G. Another tab or button where you wanna look at a chord shape and decide based on what you see on the fretboard what the chord is. That would be like a different kind of game mode — you'd have like a note mode and then a chord mode. Future features might be like a coming soon feature — like customize your fretboard or customize your guitar body. I'm mostly just showing that I'm vibe coding and having fun, and it happens to correlate with a passion of mine."
→Built 12-fret fretboard with Note Mode and Chord Mode. Score + streak tracking. Dark "midnight guitar shop" aesthetic with amber accents.
Phase 1.2Apr 7
Stack + feature decisions
Prompt
"The tech stack, I think it'd be cool to use some React and Vue and vanilla. Sharps flats — maybe that's another mode. It shouldn't be a main mode like note mode or chord mode. Maybe near the neck, somewhere on the page, having like a mini toggle button that allows you to look at sharps and flats. Fretboard range — full 24 frets or a more focused range like 12 frets. Maybe we just start with like 12 for now. And then maybe another coming soon feature could be like showing a base neck."
→React + Vite selected. Sharps/flats as a mini toggle. Constraints set early — 12 frets, 6 strings. Vision of what comes next already in place.
Phase 2Apr 7
Design system exploration
Prompt
"I have a kit now. I want to keep the other theme in the background somehow — I don't want to forget about it. Can you get access to the Polaris Shopify design system? Please study the Figma variable structure and understand the Brand → Alias → Mapped connections. Well, I've been talking about Material Design 3 this whole time — how come you haven't supplied anything from it?"
→Analyzed token hierarchy. Hit Figma API limits. Pivoted to web docs. Delivered full Material Design 3 token spec — color, type scale, spacing system.
Phase 3Apr 7
Apply Material Design 3
Prompt
"Apply Material Design 3 to the fretboard game."
→Replaced original theme with MD3 tokens. Color palette, 8px spacing system, Display Large → Label Large type scale. First real design system integration.
Phase 4Apr 12
Accessibility + audio
Prompt
"We're running into some accessibility issues here. The toggle at the top has a black type with a black background active state. Chords button is black against white. That's an issue. Also the purple pulsating note thing doesn't really match the rest of the design style. And then I'm also wondering how we can make the note feature a little more interactive by playing the actual note only if it's correct. Yes, but I also want you to look at the audio we put in earlier. The sounds are off. Aren't you able to get the real sounds of the notes and chords?"
→Fixed three contrast failures. Swapped Web Audio API for Tone.js with ADSR envelopes. Accessibility caught and fixed in iteration — not as an afterthought.
Phase 5Apr 12–13
Multi-theme system
Prompt
"Can you create a theme toggle to switch between Material 3, Bootstrap, and Polaris? Or will that overload the app? I still want the app to be built strictly only using Polaris though."
→Full redesign in Shopify Polaris as primary. Three-theme toggle with localStorage persistence. Demonstrated design system thinking at scale.
Phase 6Apr 14
Rock songs + educational layer
Prompt
"I feel like I want some additional flair here. Like a leaderboard possibly, some way of correlating the notes and chords with popular songs that you can hear from certain notes and chords. I want to also incorporate some customization of the fretboard now, and have the ability to choose a specific guitar build. Create a curated list — like E minor chord appears in Wonderwall, Stairway to Heaven, etcetera. It should rock. I don't want pop in there."
→Curated 70+ song database — Led Zeppelin, Floyd, AC/DC, Metallica, Sabbath. FunFact component slides in after correct answers. Turned a quiz into a music education moment.
Leaderboard
Local high scores, top 10, name entry
Fretboard customization
Wood finish, inlay styles, string colors
Guitar builds
Strat, Les Paul, Tele, Acoustic visuals
Extended range
Bass neck, 24-fret, scale modes
The prompt log is the real artifact here. It shows that good ideas don't arrive complete — they arrive rough and get shaped through iteration. Starting with "a guessing game" and ending with a multi-theme, accessibility-audited, audio-enabled app with a curated rock music education layer took eight days of open-minded building.
Vibe coding isn't about writing less code. It's about staying close to the idea, following where it leads, and knowing when to go deeper. This project is unfinished — and that's intentional. The roadmap shows the thinking extends well past what's been shipped.
