Building a Wellness App with AI: Part 1
A designer's journey into AI-assisted mobile development
Summary: I was fed up paying $12+ monthly for wellness app features I never used. Building my own seemed overwhelming until I discovered Figma MCP and Claude Code. Despite my skepticism that AI could handle the load, my first test was mind-blowing: the AI implemented my interface design with ~95% accuracy. This is part 1 of a multi-part series documenting how I'm building a wellness app using AI-assisted development.
After 20 years of designing product experiences, I thought I'd seen every workflow imaginable. Traditional design-to-development handoffs, endless redlines, the familiar dance of "that's not quite what I meant" between designers and developers. As someone who's spent nearly two decades on the design side with some development chops, I've always felt caught between two worlds, strong enough in code to know what's possible, but passionate enough about design to want to stay in my creative zone.
The $12/Month Frustration
Like many people, I'd been paying for various wellness apps, Headspace, Calm, you know the usual suspects. But I was paying $12+ monthly for meditations I never listened to, content I never read, and features I never touched. All I really wanted was good box breathing exercises and maybe a few other simple techniques.
Worse yet, as a designer, some of the alternatives to the big player apps drove me crazy. Poor visual hierarchy, confusing user flows, interfaces that felt more like afterthoughts than intentional experiences. I kept thinking, "I could design something better than this," but the prospect of building it myself felt overwhelming. Design I could handle, but development? That meant weeks away from what I actually love doing.
Figma MCP and Claude Code - Uh What
A few weeks ago, I stumbled across Figma's blog post about their new MCP (Model Context Protocol) Server and its integration with Claude Code. The concept was intriguing: design in Figma, then have Claude Code actually implement your interfaces with AI assistance. As someone who's always been fascinated by the intersection of design and development, I had to try it.
But I was skeptical. Like, really skeptical.
After months of seeing AI tools that promise the moon and deliver something that barely resembles what you asked for, I didn't expect much. Could an AI really look at my Figma designs and create accurate, functional mobile interfaces? It seemed too good to be true.
The Moment Everything Changed
I decided to start simple, a screen with animated navigation and SVG background for my wellness app concept. Nothing too complex, but enough visual elements to test whether this AI-assisted approach could actually work.
I set up quick and dirty Figma design file, made sure my auto-layout was properly configured (learned that lesson quickly), variables were set, components built out, and connected it to Claude Code. Then I held my breath and hit enter.
What happened next gave me the biggest smile I've had in sitting in front of a screen in awhile.
The AI didn't just understand my design, it implemented it with about ~95% accuracy. When I fired up the iOS simulator, there was my interface looking extremely close to the Figma file. The 5% that needed tweaking? Minor layout issues that were honestly my fault for not being more careful with auto-layout in a couple of frames.
Why This Changes Things
For the first time in my career, I felt like I could focus entirely on what I do best, designing user experiences, while still being able to build the actual product. The AI wasn't replacing my development knowledge; it was amplifying it. I could guide the process with my understanding of how apps work, but I didn't have to spend weeks writing code that pulled me away from design.
I feel like I can build anything.
What's Coming Next
Over the next few posts, I'm going to document this entire journey, from initial setup struggles to workflow discoveries to the inevitable moments where things don't go as planned. I'll show you exactly how I'm building this breathing app, what works, what doesn't, and how this AI-assisted design-to-development process is evolving.
Next up: Getting Figma MCP and Claude Code talking to each other (spoiler: it's easier than you think) and setting up Figma Design files.