I built a full mobile onboarding flow in one sitting, and the workflow is the interesting part.

The result: 13 interactive screens inside an iPhone shell, with mesh gradients, a fill-in-the-blank first journal entry, reminders, and a paywall.

How I did it:

1. Reference with Refero

I pulled 41 onboarding screens from a journaling app and broke the flow down. What works: personalization, a first entry before the paywall, a privacy moment. What doesn't: a hidden trial price, no back button, about 30 steps before the paywall. I kept the good, fixed the rest, and cut it to 13 steps.

2. Build with the MagicPath MCP

I connected MagicPath to my coding agent. Instead of one frame per screen, the whole flow is a single component with state-driven steps. That kept the build to about 4 MCP calls on a limited weekly quota. I checked everything locally first, so there were no wasted rebuilds.

3. Illustrate with Codex

A fox reading in an armchair, a glass padlock, a cloud gem. I baked in transparency so they sit cleanly on the gradients.

4. Review and polish

Two rounds of feedback fixed the bottom-sheet animation and the notification alert. Then I recorded the final run with a tap cursor.

Video of the final flow below. Happy to share the breakdown if it's useful.