Frequently Asked Questions About Margerie AI Design Engineer UX Flow Workflow
22 answers covering everything from basics to advanced usage.
// Basics
What is the Vid IQ MCP and how does it fit into UX design?
The Vid IQ MCP is a Model Context Protocol server that gives an AI agent query access to YouTube search results and full video transcripts. In this workflow it turns YouTube into a live UX research database inside your coding environment — the agent searches for competitor walkthroughs, reads their transcripts without you watching them, and distills real UX patterns into an app-specific checklist.
What is a cap design system in this context?
The cap design system is the existing component library, color palette, typography, hover states, and layout patterns extracted from your live codebase. It's the mandatory design constraint for all generated variants — every new screen must inherit it rather than invent a fresh design language, ensuring generated screens map one-to-one to production code.
What does 'transcript-to-checklist conversion' actually produce?
It produces a structured, actionable UX checklist tied to your specific app, extracted from a YouTube video's full transcript. For example, an onboarding video might yield principles like Hick's Law (limit choices to around three), 'personalization beats polish,' and 'onboarding isn't a tour,' plus concrete implementation steps with sources like Loom, Dropbox, and Figma patterns.
What is the infinite canvas view and why is it better than page-by-page navigation?
The infinite canvas view is Magic Path's mode that places all existing app screens on one scrollable canvas at once. It's better than page-by-page navigation because it gives you a holistic view of your entire design system before adding anything new, and lets you compare multiple generated flow variants side by side rather than clicking through them one at a time.
// How To
How do I install Magic Path in Cursor?
Search 'Magic Path' in the Cursor or Codex marketplace, select the dark-background variant, install it, authenticate, and restart your environment. After restarting, prompt your agent with 'Can you see the Magic Path project I have open?' and confirm the project ID before instructing it to place each major screen onto the canvas.
How do I write a good goal-oriented YouTube research query?
Include both a topic and an explicit goal clause. Instead of just 'onboarding UX,' write: 'Use Vid IQ to research YouTube [flow type] 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.' The goal clause makes results analytically useful rather than merely topically related.
How do I confirm the agent sees the variant I selected?
After selecting your preferred component on the canvas, prompt the agent explicitly: 'Do you see the selected component in Magic Path?' Wait for confirmation that includes the strategy label (e.g. 'Strategy C — guided checklist') before proceeding to implementation. Skipping this confirmation risks the agent implementing the wrong variant.
How do I push the finished flow to GitHub from within the workflow?
Install the GitHub MCP server by adding the JSON config block from GitHub's MCP docs to your MCP Servers settings, and generate a personal access token if needed. Then prompt: 'Push these changes to my GitHub repo [repo name or URL].' Confirm the branch URL is returned and the repo is updated. This keeps the entire loop inside your coding environment.
How do I place all my existing screens on the canvas correctly?
After confirming Magic Path sees your project, instruct the agent to place each major screen — dashboard, analytics, settings, and so on — onto the canvas one by one. Then verify that hover states and UI fidelity match the live app. This step is essential because it establishes the design system all new variants will inherit.
What's the minimum setup to run this workflow the first time?
You need Cursor or Codex (not Claude Code), a target GitHub repo you can clone and run locally, the Magic Path extension installed and authenticated, the Vid IQ MCP server configured with your server URL, and the GitHub MCP server set up with a personal access token for pushing. Confirm localhost runs before installing Magic Path.
// Troubleshooting
Why do my generated variants not match my existing design system?
This usually happens because you skipped placing your existing screens on the Magic Path canvas before generating new flows. Without the live design system on the canvas first, generated variants won't inherit the correct components, hover states, or layout patterns. Always place all existing screens first, then explicitly instruct variants to use your app's design system.
My localhost URL isn't appearing after cloning — what should I do?
Wait until the clone and setup fully complete before proceeding; the localhost URL only becomes available once the app is running. If it still doesn't appear, verify the repo's build steps completed and switch through pages manually to confirm the app is running. Don't move to Magic Path installation until localhost is confirmed working.
The implemented flow looks right on the canvas but breaks in localhost — why?
Visual fidelity on the Magic Path canvas does not guarantee the code runs correctly. Always refresh the localhost URL after implementation and manually walk through the new flow end-to-end in the browser before pushing. If it breaks, ask the agent to debug the implementation against localhost, then re-verify before pushing to GitHub.
My YouTube research returned irrelevant videos — how do I fix it?
Rewrite your query to include a stronger goal clause and product-specific terms, then review the agent's 'why watch' summaries. Look for videos showing animated flows, step-by-step UX walkthroughs, or competitor onboarding studies — not static screenshots. Click through to verify relevance before extracting a transcript, and pick the video with the richest walkthrough content.
// Comparisons
How does this workflow compare to using Figma plus a separate developer handoff?
Figma-plus-handoff separates design and code into two tools with a translation gap between them. This workflow eliminates that gap by designing directly against your live codebase inside Cursor, so generated screens inherit real production components and implement one-to-one. It's faster for solo developers and small teams without designers, though Figma still offers richer visual tooling for dedicated design teams.
How does YouTube-as-research-layer compare to reading UX best-practice articles?
Articles give generic principles; YouTube walkthroughs show real competitor flows in motion with expert commentary and step-by-step screen captures. The Vid IQ MCP extracts full transcripts and converts them into a checklist tied to your specific app and flow type. This grounds decisions in what leading products actually built rather than abstract advice you'd have to translate yourself.
How does this workflow compare to prompting an AI to 'design an onboarding flow' with no research?
Prompting blind produces generic flows based on the model's priors. This workflow first grounds the design in real competitor patterns via YouTube research, then constrains generation to your live design system, then forces three structural variants for comparison. The result is production-ready, research-backed, and comparative — rather than a single unvalidated guess.
// Advanced
Can I use this workflow for redesigning existing pages, not just new flows?
Yes. For layout exploration of existing pages like settings or analytics, you can skip the YouTube research query entirely since the goal is layout alternatives rather than a new flow. Place existing screens on the canvas, then instruct the agent to generate layout variants directly — for example top-nav vs. side-nav — review side by side, select, implement, and push.
Can I benchmark against multiple competitors at once?
Yes. Search a competitor category via Vid IQ MCP, retrieve the top five videos including several competitor walkthroughs, read all their transcripts, and extract a checklist of combined patterns like sign-up profiling, choice architecture, and progressive disclosure. Then generate three variants on the canvas, each embodying a different competitor's strategy applied to your own design system.
Can I generate more or fewer than three variants?
The default and recommended count is three, since three structurally different strategies force meaningful comparison without overwhelming review. You can specify a different number via the optional variant input, but avoid generating only one — that eliminates the comparative step that surfaces UX tradeoffs, which is core to the methodology.
What makes the three variants 'structurally different' rather than just visually different?
Structural difference means the flows use fundamentally different UX architectures, not just different colors or spacing. For onboarding, examples include record-first (get users into the core action immediately), guided checklist (progressive task completion), and step-by-step with an animated SVG panel (educational walkthrough). Each represents a distinct strategy from the same checklist, revealing different tradeoffs.
Do I need to watch the YouTube videos myself?
No. The Vid IQ MCP extracts full transcripts, and the agent reads and distills them into a checklist for you. You only review the 'why watch' summaries to pick the best video and optionally click through to verify relevance. This is a key efficiency gain — the video content becomes actionable design rules without you spending time watching.