01
Organise
Folders give nouns, verbs, and adjectives a familiar home. Phrases have their own view.
Ly2LangLive prototype
From a first build to my digital notebook.
Learn English or Italian through songs you love. I built Ly2Lang solo with Claude Code, then shaped its first interface into a focused place to collect words, explore phrases, and test what I’d learned.
- My role
- Solo creator · Product direction, UX/UI design & AI-assisted development
- The medium
- A web learning experience · Built with Claude Code
- Project status
- Live prototype · Tried by friends
01 / Overview
The song was familiar. The learning was scattered.
I love discovering songs in other languages, especially Korean music. While learning Italian, I kept moving between Genius translations, ChatGPT explanations, and separate notes. Each song meant collecting the pieces of a lesson myself. I wanted them together in one place—and thought of my Italian friends learning English, too.
My earlier routine
- Genius translations
- ChatGPT explanations
- Separate notes
The idea
A small digital notebook, organised around a song I already wanted to understand.
02 / The experience
Choose a song. Find something worth learning.
Search by song or artist, paste lyrics, or start with a featured song. Explore words in folders, hear their pronunciation, and connect them to everyday examples. A short quiz draws from the same study list.
02
Understand
Each card brings together meaning, grammar, an everyday example, and a short excerpt from the song.
03
Recall
One question at a time, with feedback after each answer and a visible place in the quiz.
Actual product screenshots. Open any image for the full-size view.
03 / The redesign
A working first version needed clearer direction.
The first interface already had search, study cards, and a quiz. When friends tried it, they did not immediately understand what the app was for, and the study cards felt like a wall of text to scroll through. That gave me two priorities: explain the purpose earlier and make the learning material easier to approach.
Early feedback / paraphrased from my friends
- The purpose wasn’t clear upfront.
- The study cards felt like a wall of text.
Informal feedback, recalled by me; not a recorded usability study.
Make the starting point obvious.
Search interfaces · Early version: 18 October 2026. Current capture: live /app page. Select an image to view it full size.
- What I noticed
- The early search screen asked for language and proficiency choices before a song was selected.
- What I changed
- I simplified the starting screen around searching or pasting lyrics. The current scope is English and Italian, with automatic language detection.
Fewer setup choices also mean less personalisation: the current lesson requests use an A2 default.
See the intermediate glass direction
The glass direction was an intermediate step. The 20 October screen still had a large sidebar and a prominent saved-song panel. Later iterations removed the sidebar and made returning to a song a quieter action.
See the earliest supplied search screen
04 / Directing AI
Better direction meant more specific decisions.
I used Claude Code to help implement the product, while choosing the experience, reviewing screens, and refining the details. The design log records guidance from the apple-design and frontend-design skills, followed by a shared system of typography, glass surfaces, spacing, and component states.
Describe behaviour
Specify what a folder does on hover, keyboard focus, loading, failure, and opening—not just what it looks like.
Constrain the system
Use shared tokens and components so buttons, inputs, cards, and feedback follow the same visual rules.
Review the result
Check actual screens at small widths, including long text, touch targets, and reduced-motion behaviour.
“simple text … it shouldn't be like another button”
An instruction recorded in the design log for the “Learn from a new song” action. I reduced its visual emphasis so it did not compete with the quiz.
This is one documented direction-and-revision example. The screenshots show the iterations; they do not isolate the effect of a particular prompt or skill.
05 / Testing & iteration
The lesson needed checks as well as polish.
AI helps select and explain language. Code handles repeated text, supplies frequency ranks when available, checks parts of the output, and builds the quiz from the resulting study list. These checks catch specific failures; linguistic accuracy still needs review.
A phrase that wasn’t in the song
- Recorded issue
- An earlier German test returned a phrase that did not occur in the supplied lyrics.
- Implemented change
- Require a phrase to occur in a song line and correct mismatched line references.
Evidence in the repository
The repository includes a regression test for rejecting absent phrases and correcting the line number.
api/phrases.js · test/routes.test.js
One adjective appearing twice
- Recorded issue
- A recorded Italian test treated feminine and masculine forms as separate vocabulary entries.
- Implemented change
- Use an adjective’s own form set to identify its dictionary form and remove duplicate entries.
Evidence in the repository
A regression test covers the duplicated forms and incorrectly mixed forms from another adjective.
lib/grammar.js · test/routes.test.js
Search results that weren’t the song
- Recorded issue
- Genius translation pages appeared alongside original songs in search results.
- Implemented change
- Filter Genius’s translation entries before presenting the selection list.
Evidence in the repository
The search implementation and its tests explicitly cover excluding these results.
api/search.js · test/search.test.js
06 / What’s next
A live product—and a clearer way to work with AI.
Ly2Lang now brings song discovery, study cards, phrases, and a quiz into one experience for English and Italian. Friends have tried it, and their early feedback helped identify clarity and information-density problems. I have not yet measured learning gains or compared task completion across the versions.
Building solo with AI meant taking responsibility for what to keep, what to question, and what to refine. The digital-notebook direction became useful when it shaped the organisation and interactions, as well as the visual style.
- Check whether new visitors can explain the purpose without help.
- Watch learners find a word, explore a phrase, and complete a quiz.
- Review language accuracy with fluent speakers and compare recall over time.