DEV Community

Cover image for From guitar to code: Building GripShift
Laura de Oliveira
Laura de Oliveira

Posted on AI-assisted

From guitar to code: Building GripShift

Motivation

For almost a year now, unwilling to accept its purely decorative fate, I decided to take my left-handed guitar off its stand and learn to play on my own. This guitar's story is a common one. It was bought with the intention of being learned someday, but ended up stored away forever in its bag, in a dark corner of the bedroom. Fortunately, it saw daylight again last year, when we turned one of the bedrooms into an office and decided to hang it on the wall.

Having it in sight inspired me, and even though I'm right-handed, it was inevitable that I'd try to play it and start understanding how it worked. Since I knew absolutely nothing about guitar, not even playing it the conventional way, the challenge of building muscle memory would be pretty much the same either way. From the need to practice guitar and my curiosity, as a tech professional, about how Spec-Driven Development applies to web development, GripShift was born.

The Problem

The more I searched for guitar content and courses on YouTube, the less direction I had. Until I found the JustinGuitar channel and its beginner course. There, the main practice method is simple: get used to the chords, finger positioning, and the feel of the strings. So, starting with two chords, you practice constant switching for one minute, aiming for increasing accuracy and speed, with a goal of at least 30 switches in that period.

I'll admit I didn't have much patience to follow the course to the letter. I wanted to skip steps, play my favorite songs, but my lack of dexterity was still holding me back. At the same time, there was no element of surprise when practicing a minute of chord switching. I'd pick two chords I felt like playing that sounded good together, but I kept getting stuck on the same sequences — A and D, G and E. Then, during an AI-assisted development course, the idea for an app came up. The basic concept is to randomize two chords to be practiced in one-minute sessions. No sign-up, no login, no distractions. Simple as that.

From Concept to Product

Building the MVP

With the problem defined, my first step was creating the documentation the agent building the project would need. In AGENTS.md, I specified the project's high-level decisions and the expected behavior of the agent — what to do, how to do it, where to look for information, and what rules and constraints to follow. The first version of SPEC.md was responsible for describing the project's goal, each feature technically detailed with its expected behavior, layout and UI specifications, and establishing the boundaries and out-of-scope items.

I used OpenCode as the development agent, with the DeepSeek V4 Flash model and an MCP connection to Context7. The result was satisfactory, but needed adjustments. Some were made manually, others through interaction with the agent, updating the SPEC whenever necessary so it correctly reflected the feature.

Project workflow in Mermaid

Glow Up

The app was so simple and had so few elements that the idea of publishing it that way, without any introduction, bothered me. That made me start treating what was just a project for testing tools and methodologies as a real product. It deserved an identity and a minimally decent landing page where I could share its reason for existing and, who knows, help more practitioners find it.

I'm not a designer, but I remember a thing or two about creating logos, plus I have some confidence in my aesthetic sense. I sometimes like to get lost in Figma, creating whatever comes to mind. I used the identity of my study profile on Instagram (@stringsinreverse) as a base for the colors, looked for logo references on Pinterest and Dribbble, and arrived at the final result.

Brand concepts for GripShift

In parallel, I used Google Gemini's great HTML page-building capability to create the first reference for the landing page, where I was aiming for good information architecture more than a page that matched the identity I'd created. With that, I was able to update the project documentation, keeping a SPEC-app.md for the app and creating a new SPEC-root.md for the landing page, repeating the AI-assisted development process.

Lessons Learned

Building a project that solves a problem of your own is definitely very motivating. I've been using the app less often than I'd like, but it always meets my needs, whether on my phone or tablet (I rarely use it on the computer). After my personal website, it was the first real project I put out into the world in a long time.

Building MVPs end to end can be fun, but exposing them to the public is scary. As of this post's publication, I haven't received any feedback. Vercel's dashboard shows 10 visitors since I made this post on my LinkedIn (in Portuguese). I didn't plan any promotion strategy, but I might work on that skill more in the coming weeks.

Besides practicing guitar, I got to practice my creativity, my skills as a software developer, and learn new concepts about applying AI to document and build products. Using Spec-Driven Development, even in its simplest possible form, showed me firsthand a bit of what's becoming the reality in the field. Since I've been more distant from the technical side of my profession for a while, it feels like a fresh start. But my concerns now are much more mature — more focused on problem-solving and less on personal pressure around very specific technical knowledge.

Originally posted in Portuguese on my website

🤖 Assisted by AI to translate the text

Top comments (0)