My role


UX/UI Designer + Frontend Coding + Deployment

Team

1 Designer + Developer = Me

Tools Used

React.js, Supabase, Claude, Cursor, ChatGPT, Figma, Vercel

Timeline


7 days

Designed and coded a fast MVP built with Cursor + Claude + Figma to explore how AI can guide habit formation through feedback, streaks, and simple nudges.

Why Bloom?

Most habit trackers fail because they’re either too rigid or too noisy. Bloom explores a middle ground: lightweight habits, visual feedback, and AI nudges that don’t overwhelm the user. This MVP wasn’t about perfection — it was about learning fast and shipping something real.

Most habit trackers fail because they’re either too rigid or too noisy. Bloom explores a middle ground: lightweight habits, visual feedback, and AI nudges that don’t overwhelm the user. This MVP wasn’t about perfection — it was about learning fast and shipping something real.

Claude × Figma: Designing the Habit System

From AI-Assisted Thinking to Visual Systems

Before jumping into screens, I used Claude to think through habit models, constraints, and structure — helping me clarify what needed to exist before deciding how it should look.

Claude was used to:

  • Explore habit-tracking logic and data structure

  • Define entities, states, and edge cases

  • Shape an early design-system outline (tokens, components, behaviors).

With the system defined, I documented flows and decisions in a lightweight PRD and used Claude to refine design-system JSON and structure.

These inputs then informed the Figma phase, where I translated structure into visuals.

In Figma, I focused on:

  • Moodboarding and visual direction

  • Color, spacing, and hierarchy for calm, repeat usage

  • Reusable components and system consistency

The result was a design system that wasn’t just aesthetic — it was grounded in logic and ready for code.

Setup — From Zero to a Working Product

Cursor + Supabase + Shipping Fast

Cursor (AI-Assisted Dev Environment)

I used Cursor as the primary build environment to design and code in parallel.

  • Component logic written directly alongside UI decisions

  • Claude + ChatGPT used inline for:

    • Component scaffolding

    • State handling

    • Refactoring UI logic into cleaner patterns

  • Instant feedback loop between design intent and running code

Supabase (Auth + Data Layer)

Supabase handled authentication, habits data, and streak tracking.

  • Designed SQL tables for:

    • Users

    • Habits

    • Daily check-ins

    • Streaks & metadata

  • Real-time sync between UI and database

  • Structured schema early to avoid hacks later

Deployment — From Local to Live

Vercel × Git Workflow

Once the core flows were stable, I shipped the MVP early to validate real usage.

  • Code pushed to Git with clean commit history

  • Connected repo to Vercel for instant previews

  • Automatic deployments on every push

  • Environment variables managed directly in Vercel

This made iteration stupidly fast — design tweak → push → live URL in minutes.

End-to-End Flow

How everything came together

This project wasn’t built linearly — it was built in loops.

Claude → Figma → Cursor → Supabase → Vercel

  • Claude helped define structure and logic early

  • Figma translated intent into systems, not just screens

  • Cursor merged design + code in one place

  • Supabase powered real data and state

  • Vercel shipped it fast so it could be tested, not admired

Key Learnings:

  • Design decisions hit harder when you understand the stack: Knowing how state, latency, and data sync work changed how I designed flows. I designed fewer screens, reused logic, and avoided patterns that would break under real-time updates

  • AI works best as a thinking partner, not an autopilot: Claude helped shape early PRDs and design-system logic, but decisions still needed human judgment. Prompting became a design skill iteration > perfection.

  • Schemas shape experiences: Designing Supabase tables early influenced the UX itself what could be tracked, personalized, or automated depended directly on how data was structured.

  • Shipping beats speculation: Seeing real data flow through the system (Cursor → Supabase → Vercel) surfaced edge cases no wireframe ever could.

Closing Thought

A designer today isn’t just shaping screens they’re shaping how ideas ship.

On Bloom Habit, design meant thinking in systems, states, and data before pixels. Coding didn’t replace design it strengthened it. It helped me anticipate constraints, collaborate faster with engineers, and make decisions that survived implementation.

The value isn’t just better UI.
It’s fewer assumptions, clearer collaboration, and products that actually get built.

Design doesn’t stop at Figma anymore.

Neither do I.

All Works

Next Case Study

Bloom — AI Habit Coach (MVP)

AI-powered habit coaching, built fast with design + code + LLMs. Live URL