Workout Draw

Inspiration

We've all had some days that we walk into the gym and have absolutely no idea what to train. Sometimes we're bored of our usual routine, and we want to try different exercises without wasting time planning a workout. I wanted to make the decision easier, but also more fun.

I've always enjoyed the excitement of opening cases in games, spinning for rewards and not knowing exactly what you're going to get. So I thought What if choosing your next workout felt like opening a loot box?

That's how Workout Draw started. The idea was simple but it also was a challenge for me to build with AI, because where I struggled the most was trying to get animations right how I wanted and make them feel more personal.

What I learned

This project taught me a lot about building with AI beyond just prompting back and forward with you agent.

Before working on Workout Draw, I didn't fully understand how much difference choosing the right skills and approach on AI development could make. Through this project, I learned to approach development with a better plan, breaking development in multiple steps, researching skills, and even creating custom skills for specific needs.

Most importantly, I learned that AI becomes much more useful when you treat it as a development partner rather than a tool that magically builds everything for you.

How I built it

I built Workout Draw using Claude Code and the Build with AI workflow, starting with a simple idea and turning it into a working mobile-first web app.

The app uses React 19, TypeScript, Vite, CSS Modules, and Motion for React for the interactive UI and animations. I used the Web Audio API for sound effects, Vitest to test the workout-generation logic, and Netlify to deploy it.

During development, I experimented with Claude Code skills, including frontend-design and motion, to improve the visual design and animations. I also learned to use structured planning, research skills before installing them, and apply flipped interactions to let AI help clarify requirements before coding.

I focused on making each interaction feel satisfying, from the rotating time dial and neon gym switch to the slot-machine reels and exercise reveals.

Challenges I ran into

One of the biggest challenges was making the case-opening animations feel satisfying. Getting the reels to slow down naturally, land on the right exercise, and synchronize with the sound effects took a lot of testing and tweaking.

Another challenge was animating the exercise stickmen. Some movements looked fine in screenshots but broke during playback, which taught me the importance of testing animations in real time.

Overall, the biggest challenge was turning a fun idea into a smooth, working experience while learning how to guide AI effectively throughout development.

What's next for Workout Draw

I would like for it to become a real mobile app that you can download though App Store and Play Store it's just that it takes a little bit more time to deploy those

Built With

• claude-code
• css3
• motion
• react
• typescript
• vite
• vitest
• web-audio-api