VocalKey, vocal range management
 

Self-initiated · Role: AI Product Designer · Date: 2026

BUILT IN

April 2026 to - ?

METHODOLOGY

SDD (Spec Driven Development) with Antigravity IDE + Claude Code

STATUS

MVP, Pilot phase

Problem Statement 

I've been singing for about 10 years at a rock school. Every month I practice around 6 different songs on average, each with a different original key. My teacher and I have to remember what key we'd adjusted each song to, scribbled on paper or in random notes on our phones. And if that happens to me with 6 songs, it happens to my teacher multiplied by every single one of his students.

Those adjustments are needed both in class and whenever a student rehearses on their own, and nowhere is it centralized or accessible at the moment it actually matters.

The Challenge

How might we centralize each student's vocal range and repertoire so it's accessible both in class and whenever a student needs to rehearse, with zero friction for the teacher?

Methodology

I built VocalKey following Spec Driven Development: every feature is defined first in PRDs (Product Requirements Documents), covering expected behavior, roles involved, and edge cases. Those PRDs guide the AI (Claude Code and other models) throughout development, instead of loose prompting. The result is more predictable, maintainable code, and a design process where decisions are documented before anything gets built.

Look & Feel, Visual Design

I defined VocalKey's branding in Figma: logo, color palette, and the main elements of the look and feel. I explored moodboards of band logos and guitar and music gear brands (Fender, Gibson, Marshall, Led Zeppelin, Rolling Stones), modern instruments and synthesizers like the OP-1 and Teenage Engineering samplers, and audio tool interfaces like Logic Pro and platforms like SoundCloud.

From there, a pattern emerged that ended up defining VocalKey's identity: a dot texture, found in speaker grilles and microphone textures. That dotted visual language became the thread connecting the logo to one of the app's most distinctive product decisions: how to represent vocal range.

Representing vocal range

For vocal range, I avoided the obvious solution, a piano keyboard, and went with an abstract representation made of dots, inherited directly from the logo's visual language. A piano is visually dense and doesn't scale well across screen sizes; dots do. I also wanted to create a visual language of my own, with a hint of gamification, closer to how Guitar Hero reinterpreted playing guitar than to a literal representation.

Key features

🔑 Superadmin: platform-level role with visibility into all active schools. Right now, new schools are created directly in the backend; building a proper school onboarding panel is one of the natural next steps on the roadmap.

🏫 Director: manages the school's users, audition calendar, rules, and essential school details (logo, address, contact).

🎓Teacher: adjusts each student's vocal range, assigns songs with their corresponding key, manages incoming suggestions, checks the class schedule.

🎤 Student: accesses their repertoire already adjusted to their vocal key, both in class and rehearsing on their own at home, and sends suggestions to their teacher.

🎵 All roles can add songs to the school's shared song library.

Each role has its own user journey and its own area of the app; the permissions system ensures everyone sees only what they need

Under the Hood

🔐 NextAuth v5 with an enriched JWT: role, status, and onboarding progress embedded, so middleware handles routing without extra queries.

⚛️ Next.js 16 + React 19: App Router as the foundation of the whole application.

🗄️ Turso + Drizzle ORM: lightweight database with transactions for multi-step operations.

🎨 Tailwind CSS v4 + shadcn/ui, with strong customization of the look and feel.

🧩 Figma and Figma MCP to bring complex design components into code, building on foundations already defined.

♠️ Phosphor Icons (duotone/fill) for visual consistency:

🎵 APIs: MusicBrainz, Spotify, respecting rate limits.

Next Steps

The MVP validates the core concept. These are the next iterations on the roadmap:

🧪 Pilot: The next step is the pilot: this summer and fall, VocalKey will be tested in real production at my rock school, with directors, teachers, and students using it in their day to day. The goal is to gather direct feedback from every role and validate whether the app solves the problem the way we actually experience it, before moving forward.

📈 After the pilot: I'll iterate on what I learn, and look into a more robust way of transferring vocal key using an API Cloud.

María Rey. Based in Barcelona, working remotely too