Beginner Calisthenics Program — in Figma Make
What started as a fitness request to Claude became a case study in how proper design systems can elevate AI-assisted development beyond generic UI patterns.
Someone internet-famous asked the other day if anyone had done anything useful as a personal project, vibe-coding. I can understand where this is coming from, but here is one of my examples.
I asked Claude a simple question: “I want a beginner calisthenics program I can follow daily. No gear. Just bodyweight.”
What started as a fitness request became a case study in how proper design systems can elevate AI-assisted development beyond generic UI patterns.
The Design System Breakthrough
The breakthrough wasn’t the app concept, but rather realizing I could build a comprehensive design system in Figma and then map it directly to Make’s automation logic to generate consistently polished interfaces that don’t look AI-generated.
Most AI tools default to predictable component libraries — rounded corners, primary/secondary button patterns, and basic card layouts. The system architecture made the difference:
- Atomic components with defined variants for every interaction state
- Component naming conventions that mapped directly to Make’s conditional logic
- Typography hierarchies based on modular scales, not arbitrary sizing
- Color tokens that work across light/dark modes without losing meaning
Smart State Mapping
When Make processes user actions, it references specific Figma component variants through naming protocols I established.
For example, if you miss a workout, the system calls the “schedule-adaptive” state — not a generic error message. Complete a session? It triggers the “progress-acknowledged” variant with appropriate visual weight.
Why It Matters
This workflow eliminated the back-and-forth between design and development that usually compromises visual quality. Every state was pre-designed with intentional typography, spacing, and hierarchy. Make simply executed the appropriate variant based on user behavior.
Creating this pipeline took longer upfront, but it proved that AI-assisted development doesn’t have to sacrifice design quality. With the right system architecture, you can maintain consistent visual standards while leveraging automation for complex logic and user flows.
Still WIP, but it’s a good start.