LOOPiN 2.0 —
Designing & Building with AI
How I used Claude, Cursor, and Figma MCP as sole designer to close the gap between design intent and shipped product — operating at team scale.
Role
Head of Design · Sole Designer
Team
Founder / Engineer + Designer
Platform
Flutter · iOS · Android
AI Stack
Claude · Cursor AI · Figma MCP
Sprint
Mar – Apr 2026
"I wasn't just designing in Figma anymore. AI collapsed the distance between design intent and shipped product — letting one designer move at the speed of a team."
12
Major initiatives shipped
265+
Files changed
67%
Type scale entropy reduced
−800
Net lines of code removed
Context
A Real App. Real Users. A Critical Engagement Problem.
LOOPiN v1 had a working product and a real user base — but the data told a troubling story. Most users were passive: waiting to be invited by a small group of power creators. The app's entire engagement depended on a handful of people. If those creators went quiet, the whole thing would.
On top of that, the codebase had drifted from the design — inconsistencies everywhere, and a growing backlog with no clear execution path for a two-person team.
Code had drifted from design: inconsistent icons, hardcoded values, mismatched hierarchy
Token-based system, consistent components, new features driving creation
Design Challenge
Make activity creation so frictionless that any user becomes a creator — not just a participant — with two people and no additional headcount.
Research & Discovery
Making Sense of What Users Were Telling Us
Months of usability sessions and observed friction gave us real signal — but it was unstructured. Using Claude as a thinking partner, I moved from raw feedback to prioritized design direction across a user journey map, an impact/effort matrix, and competitive onboarding research. Hours, not days.
"Claude didn't do the research — I did. What AI gave me was the ability to move from raw signal to clear design direction in hours, not days."
Design & Iteration
Figma + AI: A New Design Loop
Instead of design → handoff → wait → review → repeat, the loop became: design in Figma → reference in Cursor via MCP → build → test on real device → refine. Same day.
Design in Figma — source of truth
Every screen started with explicit spacing, tokens, and component states. Not a sketch — a definitive reference that both design and code pull from.
FigmaReference Figma directly in Cursor via MCP
The Figma MCP integration let me point Cursor at specific design nodes. Exact values passed to code without manual translation — no spec sheets, no guesswork.
Figma MCP + Cursor AIBuild and test on a real device
Every change tested on actual hardware — not the simulator. Real touch targets, real rendering, real issues caught the same day the design was finalized.
Real Device TestingCatch real issues. Iterate. Ship.
Device bugs fed directly back into both Figma and code simultaneously — keeping them in sync. Design-to-shipped cycle shrank from weeks to hours.
Design + Engineering Loop
What We Shipped
Six Design Initiatives — All Tied to Engagement
Every feature was evaluated against the same question: does this make it easier to create an activity, invite people, or feel motivated to participate? The engagement problem was the filter.
Core Flow Revamp
Create Activity — Three Ways to Start
Blank forms kill the motivation to create. The revamped page gives users three starting points: type manually, paste a link (the app extracts the details), or upload an image. AI fills in likely details as you type — time, location type, category. Goal: creating an activity should feel as fast as sending a text, so the gap between being a participant and being a creator effectively disappears.
New Feature
Discovery Section
v1 was a closed loop — if your friends weren't active, your feed was empty. Discovery breaks that dependency by surfacing public activities nearby and by category. Before opening Figma, I worked with Claude to think through the IA implications: adding a primary nav tab has upstream consequences for information hierarchy and user flow that need to be resolved first. Design thinking before design doing.
UX Overhaul
Activity Card — Visual Hierarchy & Consistency
The activity card is the core unit of LOOPiN's UI — and it had drifted into multiple inconsistent variants across every screen. Different padding, type sizes, action placements. The overhaul established one card system: title dominant, time/location secondary, attendee actions tertiary. Every instance now pulls from a single component — less code, more clarity, zero guesswork for the next engineer.
Revamp + New Feature
Profile Page & QR / Link Sharing
The fastest path to more engagement is making it trivially easy to bring someone new in. One tap generates a QR code or shareable link that deep-links directly to your profile — pre-connected. The profile itself was also revamped: stronger visual identity, activity history surfaced prominently. It had to feel like something worth sharing.
First-Run & Empty States
Onboarding — From Static to Alive
New users arrived with no context and no momentum. The redesigned onboarding opens with video on screen one — feel before explanation. And every empty state (feed, friends, discovery) was replaced with a Lottie animation guiding the user to their next action. Every dead end becomes a call to action. I used Claude to benchmark onboarding patterns across social apps before designing a single frame — grounding the work in what actually converts.
Polish & Engagement
Micro-animations Throughout
Small moments matter. The Loop In confirmation, shimmer skeletons replacing all spinners, create flow progress indicators — each individually minor, collectively making the app feel responsive and alive. An app that responds well to touch is an app people keep coming back to. These details are also a signal: they show the level of craft the team cares about.
Design System
A Token-Based System Built for Scale
Alongside the product work, I built a comprehensive design system in Figma — Fundamentals, Components, Patterns, and Screens — structured so the founder and future team can navigate it without a designer in the room.
Color System
100%
All colors replaced with named tokens. No hardcoded hex values remaining.
Type Scale
13→7
13 irregular font sizes collapsed to a clean 7-step scale. 67% entropy reduction.
Named Constants
18
Display, H1–H3, body variants, caption, button, and input — all named.
Files Standardized
72
Dart files now pull from shared vocabulary. Zero ad-hoc fontSize values.
Net Lines Removed
−800
After the token sweep. Less code is more signal, not less control.
Token Adoption
↑59%
Text node adoption up from ~40%; button token coverage at 85%.
Design-to-Code Alignment
Before
- —13 irregular font sizes — no shared scale
- —~50% color system adherence across screens
- —Hardcoded values scattered across 72+ Dart files
- —Multiple divergent activity card variants
- —Spinner loaders on every loading state
- —Design and code drifting further apart each sprint
After
- ✓7-step type scale — 67% reduction in entropy
- ✓100% color token coverage, zero hardcoded hex values
- ✓−800 net lines of code after token sweep
- ✓Single activity card component across all surfaces
- ✓All spinners replaced with shimmer skeletons
- ✓Figma and code in sync — same-day design-to-ship
Impact
What the AI-Augmented Workflow Unlocked
One designer. Team-scale output.
12 major design initiatives shipped in 6 weeks — new features, UX overhauls, a design system, and codebase alignment. AI acted as a force multiplier, not a replacement for design judgment.
Design-to-code cycle: weeks → same day.
Figma MCP eliminated the translation gap. Design intent reached production the day it was finalized — and bugs found on device fed back into both Figma and code simultaneously.
A system the team can own.
The token-based design system and standardized codebase mean the next sprint — or the next designer — starts from a solid foundation rather than accumulated technical and design debt.
Reflection
The AI workflow isn't about replacing design judgment — it's about removing friction between thinking and making. The strategy, the systems thinking, the user empathy: that's still the designer's job. AI just means less time lost in translation.
Explore more
All work & contact