Growl : Design without Handoff
Design Without Handoff
Half of designers now ship some AI-assisted code — but a fully governed pipeline, where one person owns design, frontend, backend, and infrastructure end to end, is still rare. As a solo founder building Growl, I designed and built an AI-native workflow that connects Figma directly to production code, letting me own the full path from concept to shipped product without a handoff to anyone else. This is what I believe the next generation of product building looks like.
This isn’t about working alone — it’s about removing the translation layer so design intent survives all the way to production.
This app was originally created under the name Cheffy, but is now App Store Connect official as Growl.
The Product, Built From This System
Every screen below is the real app, recorded running on-device — not a Figma prototype. That distinction matters here specifically: the whole point of this case study is that what's designed is what ships, so the proof has to be the shipped thing itself.
Onboarding – (running on Xcode)
Home — recipe discovery (running on Xcode)
Recipe detail — step overview – (running on Xcode)
Player instructions — hands-free, narrated cooking – (running on Xcode)
Timer sheet — active step timing – (running on Xcode)
Settings & library filters – (running on Xcode)
Library Filtering – (running on Xcode)
Ingredients – (running on Xcode)
Screen displayed in Xcode build – with theming between Light and Dark mode tokens
The Cost of the Handoff
That shift doesn't just remove a bottleneck, it changes what a designer has access to. Plugged directly into the stack, I have visibility into the same business context and analytics engineering does — I can make decisions grounded in real data, not just design intuition. And because I can reach the end result myself, in Xcode for iOS, Android Studio for Android, or Vercel for web, I can spend my time on the nuance and refinement that actually differentiates a product, instead of spending it hoping engineering implements the intent correctly.
Where drift enters a traditional handoff — and why removing the handoff removes the drift.
The AI Stack
In practice: I can change a screen in Figma, and that exact change is what ships in the real app — no spec handed to an engineer, no reinterpretation, no drift.
The system connects every stage of building Growl through one continuous pipeline. Figma, MCP-enabled, is the source of truth for UI — connected directly to Cursor and Claude Code, which read design tokens and component specs and write production SwiftUI. Xcode and GitHub complete the iOS build and version control loop, while Vercel and Supabase handle backend and infrastructure, and RevenueCat manages monetization. A separate Content MCP and API layer connects Higgsfield and ElevenLabs — the generative video and voice tools — directly into the app's content pipeline.
The result is a single connected system, not a series of handoffs: Figma → MCP → Cursor/Claude Code → Xcode/GitHub → Vercel/Supabase/RevenueCat, with Higgsfield and ElevenLabs feeding content in alongside it.
The "How It Connects" diagram
Figma file with MCP panel visible
Generating content in Higgsfield for each recipe
Mapping JSON to voices in ElevenLabs
The Rules That Make It Work
Decision 1 — Figma is the sole source of truth — no invented values
I set an inviolable rule: the Figma design system file is the only source of truth for UI. Colors, spacing, radius, and component behavior are never invented in code — if it isn't in Figma, the build stops and I go back to Figma first. This keeps the system honest in both directions.
CLAUDE.md screenshot showing "Figma Workflow Rules"
Decision 2 — Only "Ready for Dev" ships
Not everything in Figma is meant to be built yet. I draw an explicit line — only components marked "Ready for Dev" get implemented — so exploratory design work and shippable design stay clearly separated, even when I'm the only person making that call.
Figma file sidebar showing "Ready for development" section
Decision 3 — Code stays traceable back to design
Every component in the codebase carries a direct reference back to its Figma frame and design system page in the code comments. Nothing ships as a mystery — I can always trace a line of SwiftUI back to the exact design decision that produced it.
GitHub screenshot of PlayableButton.swift showing inline Figma DS references
The Workflow in Practice
Figma, MCP-enabled — the design system as the live source of truth
Claude Code / Cursor session — translating design intent into working SwiftUI
Xcode, live preview matching Figma 1:1
GitHub — production code with inline Figma references
Why It Matters
This system changes what it means to be a designer. With 1:1 parity between Figma and deploy, my product knowledge deepens — screens aren't just screens in Figma, they're what lives in the codebase, with no drift between design and what ships.
It gives me true ownership: I own what ships end to end, front end and back end, and the distance between design intent and shipped product is as small as I choose to make it. It means speed through refinement — I test, validate, and launch faster. And it earns a stronger seat at the table, because design advocacy backed by shipped code is a different kind of leverage.
It also changes what I have access to. Being plugged directly into the stack means I see the same analytics and business context engineering does, so decisions are grounded in data rather than intuition alone. And because I can reach the end result myself — Xcode for iOS, Android Studio for Android, Vercel for web — I spend my time on the nuance and refinement that actually differentiates a product, instead of hoping someone else implements the intent correctly.
The Contract That Keeps Everything Honest
This workflow is the clearest proof of how I think about the designer/engineer boundary: not as two roles handing work back and forth, but as one continuous act of translation, where the design system itself becomes the contract that keeps everything honest. Building Growl solo forced me to make that contract explicit instead of relying on a team to hold it together informally — and it's changed how I think about what a designer is even responsible for. Ownership doesn't stop at the file anymore. It goes all the way to what ships.
Designers shipping some AI-assisted code is quickly becoming normal. A designer owning the full stack — design, frontend, backend, infrastructure, and the rules that keep it all honest — is still rare. I think that's temporary. This is what building looks like next.