Margerie AI Design Engineer UX Flow Workflow

Last updated: 29 August 2026

Design, research, and implement production-ready UX flows for any app by combining an infinite canvas viewer, YouTube-sourced UX research via MCP, and AI agents — without leaving your coding environment.

// TL;DR

The Margerie AI Design Engineer UX Flow Workflow is a method for designing, researching, and shipping production-ready UX flows entirely inside your coding environment (Cursor or Codex). It combines Magic Path's infinite canvas to view all existing app screens at once, the Vid IQ MCP to mine YouTube product walkthroughs for real competitor UX patterns, and AI agents that generate three structurally different flow variants using your live design system. Use it when you need to design a new onboarding, settings, or dashboard flow for an existing codebase but lack a designer or Figma, and want decisions grounded in real-world patterns rather than guesswork.

Method

UX design AI agents onboarding flows MCP Cursor infinite canvas YouTube research design engineering

// When should you use the AI Design Engineer UX Flow Workflow?

Use this skill whenever you need to design a new UX flow (onboarding, settings, dashboard, etc.) for an existing codebase and want to ground your design decisions in real-world competitor patterns rather than guesswork. Especially powerful when you have a running local app but lack a standalone design tool like Figma.

// What do you need before starting this UX flow workflow?

GitHub repo URLrequired
The repository containing the frontend codebase you want to design for
Target flow descriptionrequired
Plain-English description of the new UX flow to design (e.g. 'onboarding flow before the pro account screen')
Search query for YouTube UX researchrequired
A goal-oriented search string describing the UX pattern you want to research (e.g. 'best screen recording onboarding UX goal')
Number of flow variants
How many distinct design strategies you want the agents to generate (default: 3)
Preferred variant identifier
After reviewing generated variants, the label or description of the one you want implemented (e.g. 'Strategy C — guided checklist')

// What core principles make this UX flow workflow work?

Infinite Canvas View

Instead of navigating a running app page-by-page like a normal website, render all existing screens simultaneously on an infinite canvas inside your coding environment. This gives you a holistic view of the design system before adding anything new.

YouTube-as-Research-Layer

Rather than manually browsing Dribbble, Pinterest, or X for inspiration, use the Vid IQ MCP to query YouTube with a goal-oriented search. YouTube videos of real product walkthroughs contain competitor UX flows, expert commentary, and step-by-step screen captures that no static screenshot site can match.

Transcript-to-Checklist Conversion

Once the top research videos are identified, extract their full transcripts via MCP and distill them into a concrete UX checklist tied to your specific app. This converts passive video content into actionable design rules (e.g. Hick's Law — limit choices to ~3; personalization beats polish; onboarding isn't a tour).

Three-Variant Strategy Generation

Never design a single onboarding or UX flow. Always generate three structurally different strategies from the same checklist and the same design system. This forces comparison and surfaces tradeoffs before any code is committed.

Design-System Fidelity

All generated variants must use the existing cap design system pulled from the live codebase — not a fresh design language. Hover states, component styles, and layout patterns are inherited, not invented, so generated screens are one-to-one with production code.

Select → Implement → Push Loop

After reviewing variants on the infinite canvas, select the preferred component, confirm the agent can see the selected component, instruct it to implement directly into the codebase, verify in localhost, then push to GitHub via the GitHub MCP. The entire loop stays inside one environment.

// How do you design a UX flow step by step inside Cursor?

1
Open a new workspace in Cursor (or Codex) and clone the target GitHub repo
Use Cursor or Codex — not Claude Code, because Claude Code lacks a built-in browser view. Paste the repo URL and submit the clone command. Wait until a localhost URL is available before proceeding.
2
Open the localhost URL in the built-in browser and verify all existing pages load correctly
Switch through pages manually to confirm the app is running. This is your baseline — you are confirming the design system you will inherit for all new screens.
3
Install the Magic Path extension from the Cursor/Codex marketplace
Search 'Magic Path' in the marketplace, select the dark-background variant, install, authenticate, and restart your environment. Magic Path is what enables the infinite canvas view.
4
Place all existing screens onto the Magic Path infinite canvas
Prompt the agent: 'Can you see the Magic Path project I have open?' Confirm the project ID, then instruct it to place each major screen (dashboard, analytics, settings, etc.) onto the canvas one by one. Verify hover states and UI fidelity match the live app.
5
Install the Vid IQ MCP server into your environment
Sign up via the Vid IQ MCP link, copy the MCP server URL from your account settings, add it under MCP Servers in Cursor/Codex settings, and restart. This gives the agent read access to YouTube transcripts at query time.
6
Run a goal-oriented YouTube research query via Vid IQ MCP
Prompt format: 'Use Vid IQ to research YouTube [search terms] goal. Find the top videos breaking down how great [product category] tools design their [flow type] and capture UI. Return top five videos with title and channel so I can pull design direction from the best one.' The query must include a goal clause — not just keywords.
7
Evaluate the returned videos and identify the best one for competitor UX pattern extraction
Review the agent's 'why watch' summaries for each result. Look for videos that show animated flows (not static screenshots), step-by-step UX walkthroughs, or workshops on studying competitor onboarding. Click through to verify relevance.
8
Convert the selected video's transcript into a UX checklist for your specific app
Prompt: 'Turn the takeaways from [video title/number] into a [your app name] [flow type] UI checklist.' The agent reads the full transcript and extracts core principles (e.g. Hick's Law — aim for ~3 choices; personalization beats polish; onboarding isn't a tour) plus a structured checklist with sources (e.g. Loom + Dropbox + Figma patterns).
9
Generate three onboarding flow variants on the Magic Path canvas using the checklist and existing design system
Prompt: 'Generate three [flow type] flows in the Magic Path project that show three different [flow type] strategies from this checklist and use our [app name] design system.' Three separate AI agents will design each variant simultaneously on the infinite canvas. Variants must differ structurally (e.g. record-first vs. guided checklist vs. step-by-step with animated SVG panel) — not just visually.
10
Review all three variants on the infinite canvas and select the preferred one
Interact with each variant directly on the canvas (click through steps, review component choices). Select the preferred component/variant. Confirm the agent can see your selection: 'Do you see the selected component in Magic Path?' Wait for confirmation with the strategy label before proceeding.
11
Instruct the agent to implement the selected variant into the live codebase and verify in localhost
Prompt: 'Let's implement this to our codebase and then run it in the localhost.' Refresh the localhost URL after implementation. Manually walk through the new flow in the browser to confirm it works end-to-end before pushing.
12
Push the implemented changes to GitHub via the GitHub MCP server
Install the GitHub MCP server (add the JSON config block from GitHub's MCP docs to your MCP Servers settings). Generate a GitHub personal access token if needed. Prompt: 'Push these changes to my GitHub repo [repo name or URL].' Confirm the branch URL is returned and the repo is updated.

// What are real examples of this UX flow workflow in action?

A team has a SaaS screen-capture tool cloned locally. They need an onboarding flow for new users that runs before the main dashboard — but have no Figma files and no designer.

Clone the repo into Cursor, verify localhost, install Magic Path and place all existing screens on the canvas. Use Vid IQ MCP to query 'best screen recording onboarding UX goal', get five competitor video results, extract a checklist from the top walkthrough video (capturing principles like Hick's Law and 'personalization beats polish'), then generate three onboarding variants on the canvas — e.g. 'record-first', 'guided checklist', 'step-by-step with animated panel'. Select the guided checklist variant, implement to codebase, verify in localhost, push to GitHub.

A solo developer building a project management SaaS wants to redesign the settings and analytics pages to explore layout alternatives without breaking the existing UI.

Place existing screens on the Magic Path canvas. Without running a YouTube research query (since the goal is layout exploration, not a new flow), instruct the agent to generate layout variants for the analytics and settings pages directly on the canvas — e.g. top-nav layout vs. side-nav layout. Review variants side by side, select the preferred one, implement, and push.

A product team wants to benchmark their onboarding against three competitors before committing to a redesign.

Use Vid IQ MCP to search for '[competitor category] onboarding UX goal', retrieve top five videos including competitor walkthroughs, read full transcripts without watching the videos, extract a checklist of competitor patterns (sign-up profiling patterns, choice architecture, progressive disclosure), then generate three variants on the canvas each embodying a different competitor's strategy applied to the team's own design system.

// What mistakes should you avoid with this UX flow workflow?

Do not use Claude Code for this workflow — it lacks a built-in browser view, which is required to verify the localhost running app and interact with the infinite canvas.
Do not write vague YouTube research queries (e.g. just 'onboarding UX'). Always include a goal clause: 'Find the top videos breaking down how great [product type] tools design their [flow] and capture UI.'
Do not skip the canvas placement of existing screens before generating new flows. Without placing the existing design system on the canvas first, generated variants will not inherit the correct design language.
Do not select a variant and push to GitHub without first verifying the implementation in localhost. Visual fidelity on the canvas does not guarantee the code runs correctly.
Do not generate only one flow variant. The three-variant strategy is core to the methodology — a single variant eliminates the comparative step that surfaces UX tradeoffs.
Do not attempt to implement a variant before explicitly confirming the agent can see the selected component in Magic Path. Skipping this confirmation risks implementing the wrong variant.
Do not use static screenshot sources (Dribbble, Pinterest) as a substitute for the YouTube research layer — they lack the animated flow context and expert commentary that the transcript-to-checklist conversion depends on.

// What key terms should you know for this workflow?

Magic Path: A Cursor/Codex marketplace extension that renders all frontend screens of a running app simultaneously on an infinite canvas, enabling side-by-side design comparison and variant generation without navigating page-by-page.
Vid IQ MCP: An MCP (Model Context Protocol) server that gives an AI agent query access to YouTube search results and full video transcripts, enabling YouTube to function as a live UX research database inside the coding environment.
Infinite Canvas View: The Magic Path rendering mode in which all existing app screens are placed on a single scrollable canvas, giving a holistic view of the design system at once rather than requiring page-by-page navigation.
Transcript-to-Checklist Conversion: The process of feeding a YouTube video's full transcript to the agent and instructing it to extract core UX principles and a structured implementation checklist specific to the target app's flow type.
Three-Variant Strategy: The practice of generating exactly three structurally different UX flow designs from the same checklist and design system before selecting one to implement, ensuring comparative evaluation of approaches before code is committed.
Cap Design System: The existing component library, color palette, typography, hover states, and layout patterns extracted from the live codebase — used as the mandatory design constraint for all generated variants.
Goal-Oriented Search Query: A Vid IQ MCP search prompt that includes both a topic and an explicit goal clause (e.g. 'goal: find top videos breaking down how great recording tools design their onboarding'), ensuring results are analytically useful rather than just topically related.
Select → Implement → Push Loop: The terminal phase of the workflow: select a canvas variant, confirm agent visibility of the selection, implement to codebase, verify in localhost, then push to GitHub via GitHub MCP — all without leaving the coding environment.
GitHub MCP: An MCP server that gives the agent authenticated write access to GitHub repositories, enabling branch creation and pushes via natural language prompt at the end of the design-to-code loop.

// FREQUENTLY ASKED QUESTIONS

What is the Margerie AI Design Engineer UX Flow Workflow?

It's a method for designing and implementing UX flows entirely inside your coding environment by combining Magic Path's infinite canvas view, YouTube-based UX research via the Vid IQ MCP, and AI agents that generate multiple flow variants using your existing design system. It lets you go from research to production code without ever leaving Cursor or Codex, and without needing Figma or a dedicated designer.

What is Magic Path and why does this workflow use it?

Magic Path is a Cursor/Codex marketplace extension that renders all your frontend screens simultaneously on an infinite canvas. This workflow uses it so you can see your whole design system at once, compare flow variants side by side, and generate new screens that inherit your existing components — rather than navigating a running app page by page like a normal website.

How do I research UX flows using YouTube inside my coding environment?

Install the Vid IQ MCP server, then prompt your agent with a goal-oriented query like 'Use Vid IQ to research YouTube [flow] goal: find top videos breaking down how great [product type] tools design their [flow] and capture UI.' The agent returns top videos, then extracts full transcripts and distills them into an actionable UX checklist tied to your specific app.

How do I design a UX flow without Figma or a designer?

Clone your repo into Cursor, verify localhost, install Magic Path, and place all existing screens on the infinite canvas. Run a YouTube research query via Vid IQ MCP, convert the best video's transcript into a checklist, then instruct AI agents to generate three flow variants using your live design system. Select the best one, implement it, verify in localhost, and push to GitHub — all inside one environment.

How does this compare to browsing Dribbble or Pinterest for design inspiration?

Dribbble and Pinterest offer static screenshots without flow context or expert commentary. This workflow uses YouTube product walkthroughs instead, which capture real competitor UX flows in motion, step-by-step screen captures, and expert reasoning. The Vid IQ MCP extracts full transcripts and converts them into concrete, app-specific UX checklists — turning passive inspiration into actionable design rules that static image sites cannot provide.

When should I use this workflow instead of a traditional design tool?

Use it when you have a running local app but no standalone design tool like Figma, and you need to design a new UX flow grounded in real competitor patterns. It's especially powerful for solo developers and small teams without designers who want production-ready flows tied one-to-one with their existing codebase and design system.

Why does the workflow always generate three flow variants?

Generating three structurally different strategies from the same checklist and design system forces comparison and surfaces UX tradeoffs before any code is committed. A single variant eliminates the comparative step. The three variants must differ structurally — for example record-first vs. guided checklist vs. step-by-step with an animated panel — not just visually.

Can I use Claude Code for this workflow?

No, Claude Code lacks a built-in browser view, which is required to verify your localhost running app and interact with the Magic Path infinite canvas. Use Cursor or Codex instead, since both provide the browser view needed to confirm the app is running and to review and select flow variants on the canvas.

What results can I expect from using this workflow?

You can expect production-ready UX flows that inherit your existing design system exactly, grounded in real competitor patterns from YouTube walkthroughs rather than guesswork. The output is implemented directly into your codebase, verified in localhost, and pushed to GitHub — a full research-to-shipped-code loop that would normally require a designer, Figma, and multiple handoffs, completed inside one environment.

What inputs do I need to start this workflow?

You need three required inputs: a GitHub repo URL for the frontend codebase, a plain-English description of the target flow (e.g. 'onboarding flow before the pro account screen'), and a goal-oriented YouTube search query. Optionally you can specify the number of flow variants (default three) and the preferred variant identifier once you've reviewed the generated options.

How do I make sure generated screens match my production code?

Place all existing screens on the Magic Path canvas before generating anything, so the agent inherits your live cap design system — components, hover states, colors, and layout patterns. Then explicitly instruct all variants to use your existing design system, not a fresh one. This ensures generated screens are one-to-one with production code rather than inventing a new design language.

How does the design-to-code loop end?

Through the Select → Implement → Push Loop: review variants on the canvas, select your preferred component, confirm the agent can see your selection, instruct it to implement into the codebase, refresh and walk through the flow in localhost to verify it works, then push to GitHub via the GitHub MCP server — all without leaving your coding environment.

// GET THIS SKILL — FREE