Huf

Building my riding journal with Claude Code

I wanted a better way to track my riding, so I designed and built a fully functional app for logging rides, capturing photos and videos, tracking progress, and planning what to work on next.

Focus

0 → 1 Product Design

AI-assisted development

prototyping

design systems

The opportunity

What if a riding journal could tell you why a ride went well?

The opportunity

What if a riding journal could tell you why a ride went well?

The idea

I wanted a better way to understand my progress as a rider—not just record what happened.

Huf lets me capture the details of every ride, from how my horse felt to what we worked on, what went well, and what I want to work on next. I can add photos and videos, track custom stats, and create tasks to carry into my next ride.

Over time, those individual rides become a record of my training that I can actually learn from.

Image of Wells Fargo's digital shopping assistant

See a month at a glance

The calendar turns individual rides into a bigger picture of my training. I can quickly see when I rode, revisit past sessions, and spot patterns in my consistency over time.

Finding the patterns

Tracking individual rides is useful. Seeing what they add up to is even more useful.

Huf turns my ride history into simple analytics so I can see patterns in my training, understand what’s changing, and identify areas I want to improve.

From Figma to a functioning product

I used Claude Code to turn the designs into a working app. I moved back and forth between design and implementation, to test ideas, add features, fix bugs, and refine the experience.

I began with exploration in Figma Make.

Then I refined the experience.

I built the first version with Claude code.

I connected my designs to Claude Code and started building the actual product.

I connected my designs to Claude Code and started building the app. I could immediately run what I had designed, test the interactions, and see where the experience needed to change. I published the app added it to my home screen.

Then continued to build beyond the prototype.

Once the core experience was working, I kept pushing the product beyond the initial prototype. I added features like weather, offline mode, custom ride stats, media uploads, tasks, and additional interaction states—continuing to refine the experience as I built.

Finally, I designed with real data.

I didn't want the analytics to simply look good—I wanted them to help me understand my riding.

I explored the experience in Figma, then built it with real ride data. Moving between the design and working product helped me see what was useful, what wasn't, and where the experience needed to evolve.

Closing thought

The biggest shift was being able to move fluidly between product thinking, design, and implementation—testing ideas in a working product instead of waiting for them to be built.

About

Play

Building my riding journal with Claude Code

I wanted a better way to track my riding, so I designed and built a fully functional app for logging rides, capturing photos and videos, tracking progress, and planning what to work on next.

Focus

The opportunity

What if a riding journal could tell you why a ride went well?

The opportunity

What if a riding journal could tell you why a ride went well?

The idea

I wanted a better way to understand my progress as a rider—not just record what happened.

Huf lets me capture the details of every ride, from how my horse felt to what we worked on, what went well, and what I want to work on next. I can add photos and videos, track custom stats, and create tasks to carry into my next ride.

Over time, those individual rides become a record of my training that I can actually learn from.

See a month at a glance

The calendar turns individual rides into a bigger picture of my training. I can quickly see when I rode, revisit past sessions, and spot patterns in my consistency over time.

Finding the patterns

Tracking individual rides is useful. Seeing what they add up to is even more useful.

Huf turns my ride history into simple analytics so I can see patterns in my training, understand what’s changing, and identify areas I want to improve.

From Figma to a functioning product

From Figma to a functioning product

I used Claude Code to turn the designs into a working app. I moved back and forth between design and implementation, to test ideas, add features, fix bugs, and refine the experience.

I used Claude Code to turn the designs into a working app. I moved back and forth between design and implementation, to test ideas, add features, fix bugs, and refine the experience.

I began with exploration in Figma Make.

Then I refined the experience.

I built the first version with Claude code.

I connected my designs to Claude Code and started building the actual product.

I connected my designs to Claude Code and started building the app. I could immediately run what I had designed, test the interactions, and see where the experience needed to change. I published the app added it to my home screen.

Then continued to build beyond the prototype.

Finally, I designed with real data.

Closing thought

The biggest shift was being able to move fluidly between product thinking, design, and implementation—testing ideas in a working product instead of waiting for them to be built.

Claude Code didn't replace the design process. It shortened the distance between an idea and something I could actually use.

Back to play