Maya on Keys
Maya is my daughter. She is five and a half and she plays the piano. We practice together five days a week, she and I, sitting at the keys.
She already has an Instagram page — maya.on.keys — but it is only videos. The songs she has learned, the milestones, the photo from her first lesson — those things were not being recorded anywhere. Or they were, in my phone and in my head, in a way that would eventually get lost.
I had a free weekend and two tools I wanted to try: the frontend-design plugin and vibe-kanban. I needed a real project to test them properly. This was it.
Brand First
I described the site to the frontend-design plugin: a young child's piano journey, warm and playful but not childish, something the whole family would look at. The output was a 1,634-line self-contained HTML document — color palette, typography, components, design tokens, voice, accessibility checklist. All in one shot.
I did not expect to actually use it as a reference throughout the build. I did. Every time I asked AI to build a component, "match the brand guidelines" meant something specific. Design usually accumulates — a decision here, a correction there. Starting with a complete visual language is a different way to work.
Requirements Before Code
Before any templates, I wrote a requirements document. What pages, what data, who updates the content and how.
That last question changed the architecture. "Edit a JSON file on GitHub" is not a realistic workflow for a parent updating a child's journal mid-week. I needed an actual CMS. The first version of the requirements had GitHub Pages as the deployment target. Two hours later it was Netlify, Decap CMS, and Netlify Identity — email and password login, no GitHub account required.
That pivot happened in a document, not in code. Catching it early cost one markdown rewrite.
Vibe Kanban
The initial plan was fourteen steps. Each became a GitHub issue, a branch, a PR. The AI opened each PR. I reviewed the diff. I merged.
Five pages, partials, data files, CMS config, Netlify setup, accessibility pass — one afternoon. Then the plan grew: pagination, songs architecture, external link support. Twenty-three steps by the end.
The speed came from the preparation. When the build started there were no open questions. The loop was: generate, review, merge, next. What I noticed: I stayed in the reviewer seat, not the writer seat. That shift matters more than it sounds.
Where It Broke, and What the History Shows
Netlify. CSS not loading, admin redirect wrong, Identity widget missing. Three bugs, three PRs. Standard friction for a new deployment environment — each one a twenty-minute loop once I knew what I was looking for.
There is also a run of six commits in the history about the spacing between milestone cards. That is what iterative UI work looks like through a text interface. The actual fix — replacing Tailwind utility classes with an explicit CSS class, because Tailwind's purge was stripping classes that only appeared in Nunjucks templates — was one line. Finding it took six commits. I would have spent roughly the same time without AI.
What It Is
This site is not a product. It is a record of my daughter learning to play piano.
She asks to practice. Some days she wants to play and I am the one who is tired. I show up anyway, because in ten years I will want to remember that I did.
The site is where those memories go — the songs in the order she learned them, the milestones, the photos. Things that would otherwise live in my camera roll and slowly become impossible to find.
Instagram captured the performances. The site captures the journey.
The tools worked. But the thing that made this worth doing was not the tools.
The site is live at mayaonkeys.com. The code at the time of writing is on GitHub — kept in a branch so this article stays accurate even as the project evolves.
Drafted by Claude, shaped by me.
