How I Vibe-Coded and Designed a Beautiful Focus App in 48 Hours

Hey, I'm Shane.

Welcome to Design for Builders, a newsletter for founders, operators, and builders who want to improve their design skills and create better products.

This week is different. Instead of breaking down design principles, I'm taking you behind the scenes of something I just built: a focus app powered by binaural beats that went from idea to working prototype in 48 hours.

Quick takeaways before we dive in:

• Vibe-coding with AI is a gateway drug to becoming an engineer

• Great onboarding design can make or break your app in the first 30 seconds

• You can build almost anything now if you know how to ask the right questions

• The future belongs to builder-designers who ship fast and iterate faster

Let's get into it.

The spark: when science meets opportunity

I've always been fascinated by focus apps, but most of them suck. They're either overcomplicated productivity monsters or clunky timers.

Then I stumbled across Andrew Huberman's research on binaural beats. If you haven't seen his breakdown, it's mind-blowing. Studies show that just 5 minutes of listening to specific binaural beat frequencies can measurably improve focus and productivity.

The lightbulb moment: What if I built the cleanest, most beautifully designed version of this that actually works?

Design first, build second

Before touching any code, I opened Figma and mapped the user journey.

This is crucial because every tap is a miracle, every screen transition either builds momentum or kills it.

The onboarding flow became my obsession. Users need to understand what binaural beats are, why they work, and what they'll get by giving up permissions like notifications.

Most apps just ask for permissions without context. That's design malpractice.

After several iterations, I crafted a story-driven onboarding that:

• Explains the science in 30 seconds

• Shows clear value before asking for anything

• Builds anticipation for the core experience

• Sets up widgets and notifications as features, not intrusions

The key insight: Don't just ask for permissions. Sell the value of giving them.

Enter the age of vibe-coding

Here's where it gets interesting. We're living in this weird middle ground where designing and building have basically merged into one fluid process.

I discovered Windsurf (the code editor just acquired by OpenAI for $3 Billion) and it changed everything. My approach was simple:

Step 1: Give it a foundation prompt: "Build the foundation of a minimal audio-playing focus app. Don't worry about every screen, just lay the architectural groundwork."

Step 2: Design screen by screen, right in the code editor. Paste figma mocks directly in Windsurf, asking questions as I went.

Step 3: Push creative boundaries by just asking. I wanted Metal Shaders that mimicked Apple's liquid glass effect, I just didn’t know they would release that yet. I know nothing about the highly technical math behind pixel manipulation. So I just asked. And it worked.

The vibe-coding mindset

People don't talk about this enough: vibe-coding is a gateway drug to becoming an engineer.

You start by having conversations with AI about what you want to build. You copy-paste errors. You ask, "Why is this happening?" You start to recognize patterns. Before you know it, you're debugging issues yourself.

Some developers disagree with me on this (I tweeted about it and got mixed reactions). But the reality is undeniable: you can build almost anything now if you know how to ask the right questions.

The process looks like:

• Ask for what you want

• Copy-paste any errors back to the AI

• Ask for explanations, not just fixes

• Gradually start recognizing what's happening under the hood

• Build confidence through iteration

Designing for delight in a focus app

The visual design philosophy was simple: maximum impact, minimum friction.

Every element serves the core experience, helping users get into flow state faster. No unnecessary features, no cognitive overhead, just pure focus-inducing design.

I obsessed over:

• Smooth transitions that feel buttery, not jarring

• Clear visual hierarchy so users never wonder what to do next

• Ambient aesthetics that support focus rather than demand attention

• Intuitive controls that become invisible after the first use

The Metal Shaders add this premium feel that makes the app feel more expensive than it is. Sometimes the smallest details create the biggest emotional impact.

The 48-hour timeline breakdown

Hour 0-8: Research and design in Figma

• User journey mapping

• Onboarding flow design

• Core screen layouts

• Visual style exploration

Hour 8-24: Foundation building in Windsurf

• Basic app architecture

• Audio playback system

• Navigation structure

• Permission handling

Hour 24-40: Feature implementation

• Timer functionality

• Debugging

• Visual effects and shaders

Hour 40-48: Polish and testing

• Final design tweaks

• App Store Connect

• Testflight

What I learned building in public

Vibe-coding isn't just about speed; it's about maintaining creative flow. Traditional development often breaks your design thinking into discrete phases. With AI assistance, you can stay in that creative zone longer.

The tools are already here. We're not waiting for some future where anyone can build apps. That future is now. The limiting factor isn't technical ability, it's design thinking and knowing what to build.

Onboarding is everything. I spent 30% of my time just on those first few screens. Every word, every animation, every permission request was carefully crafted. In a world of infinite app choices, you have seconds to hook someone.

Perfection is the enemy of shipped. I could have spent weeks polishing details. Instead, I shipped something 80% done and started getting real user feedback. The remaining 20% will come from actual usage patterns, not hypothetical perfection.

Want to try Ascend, my focus app? It's still got some bugs, but I'd love your feedback. Try it here and let me know what you think.

The bigger picture: democratized app development

This isn't just about one focus app. It's about what becomes possible when the barrier between having an idea and testing it in the market drops to almost zero.

We're entering an era where:

• Designer-builders can compete with entire development teams

• Speed of iteration matters more than perfection

• Taste and design thinking become the primary differentiators

• Anyone with conviction can test their product hypotheses

The focus app I built is really for myself, but I hope others find it valuable too. I'm going to keep iterating until it feels buttery smooth, then see if there's a real market for it.

Your turn to build

The future belongs to people who ship. Not people who plan to ship, or people who talk about shipping, but people who actually put things into the world.

If you've been sitting on an app idea, there's never been a better time to just start building. Open Figma, map out your user journey, then jump into Windsurf and start vibe-coding. The tools are ready. The question is: are you?

Need a design partner?

My team at Turbo has helped over 40 startups go from zero to one, building new products and features.

We've worked with teams like Ramp and Kick to build amazing mobile and web experiences for their users. Whether you're a small team or a big startup looking to uplevel your design, we're here to help.

Book a call with us today.

P.S. Forward this to a friend who's been talking about building an app but hasn't started yet. Sometimes we all need permission to just begin.

Keep building,

Shane