How Solo Devs Design UX Flows Without a Designer
For solo SaaS developers without a designer · Based on Margerie AI Design Engineer UX Flow Workflow
// TL;DR
If you're a solo SaaS developer with a running app but no designer or Figma, this workflow lets you design and ship production-ready UX flows entirely inside Cursor. You place all your existing screens on Magic Path's infinite canvas, research competitor patterns from YouTube walkthroughs via the Vid IQ MCP, and have AI agents generate three flow variants using your own design system. Pick one, implement it, verify in localhost, and push to GitHub — no design tool, no handoff, no guesswork. Use it whenever you need a new onboarding, settings, or dashboard flow grounded in real product patterns.
Why is designing UX flows so hard for solo developers?
As a solo SaaS developer, you can build the backend, wire up the frontend, and ship features — but design decisions stall you. You don't have a designer, you don't want to learn Figma just to sketch an onboarding flow, and copying random Dribbble shots produces screens that don't match your app. The Margerie AI Design Engineer UX Flow Workflow solves this by keeping design inside the one tool you already live in: your coding environment.
Instead of guessing what good onboarding looks like, you ground every decision in real competitor patterns pulled from YouTube — and every generated screen inherits your existing cap design system, so it matches production code one-to-one.
How do you set up the workflow as a solo dev?
Start in Cursor or Codex — not Claude Code, which lacks the built-in browser view you need. Clone your repo, wait for the localhost URL, and switch through your existing pages to confirm the app runs. This is your baseline design system.
Next, install the Magic Path extension from the marketplace (choose the dark-background variant), authenticate, and restart. Prompt the agent to confirm it sees your Magic Path project, then have it place each major screen — dashboard, settings, analytics — onto the infinite canvas one by one. Now you can see your whole design system at once.
Finally, install the Vid IQ MCP server so your agent can research YouTube, and the GitHub MCP server so it can push changes at the end.
How do you research and generate flows without wasting hours?
Run a goal-oriented query: 'Use Vid IQ to research YouTube [your flow] goal. Find the top videos breaking down how great [your product category] tools design their [flow] and capture UI. Return top five videos with title and channel.' The agent returns competitor walkthroughs with 'why watch' summaries — you pick the best one without watching anything.
Then convert the transcript: 'Turn the takeaways from [video] into a [your app] [flow] UI checklist.' The agent extracts principles like Hick's Law (limit choices to about three) and 'personalization beats polish,' plus a structured checklist.
Now generate: 'Generate three [flow] flows in the Magic Path project that show three different strategies from this checklist and use our [app] design system.' Three agents design three structurally different variants — for example record-first, guided checklist, and step-by-step with an animated panel — simultaneously on the canvas.
How do you ship the flow you picked?
Click through each variant on the canvas, select your favorite, and confirm the agent sees your selection before proceeding. Then prompt: 'Let's implement this to our codebase and then run it in the localhost.' Refresh localhost and walk through the flow end-to-end — visual fidelity on the canvas does not guarantee working code, so this verification step is non-negotiable.
Once it works, push it: 'Push these changes to my GitHub repo [repo].' The GitHub MCP creates the branch and updates your repo. You've gone from no design to shipped, research-backed UX flow without leaving Cursor.
What should solo devs watch out for?
Don't skip placing existing screens on the canvas first, or your variants won't inherit your design system. Don't write vague research queries — always include a goal clause. Don't generate a single variant; the three-variant comparison is the whole point. And never push without verifying in localhost.
Next step: Open your SaaS repo in Cursor, install Magic Path, and place your existing screens on the canvas today — then run your first goal-oriented YouTube research query for the flow you've been putting off.
// FREQUENTLY ASKED QUESTIONS
Do I need to know design theory to use this as a solo dev?
No. The transcript-to-checklist conversion surfaces the relevant design principles for you — like Hick's Law and progressive disclosure — extracted from real competitor walkthroughs. You just review the checklist, generate three variants, and pick the one that fits your app. The workflow embeds design expertise into the process so you don't have to learn it upfront.
Will the generated flows actually match my existing app?
Yes, as long as you place all your existing screens on the Magic Path canvas before generating and explicitly instruct variants to use your app's design system. Generated screens inherit your components, hover states, colors, and layout patterns, so they map one-to-one with production code rather than introducing a new design language.
How long does the full workflow take for a single flow?
Most of the time is one-time setup — installing Magic Path and the MCP servers and placing your screens on the canvas. Once set up, researching a flow, generating three variants, selecting one, implementing, verifying in localhost, and pushing to GitHub can happen in a single focused session, far faster than a Figma-plus-handoff cycle.