The AI Design Engineer Workflow for Shipping UX
For AI design engineers and technical founders · Based on Margerie AI Design Engineer UX Flow Workflow
// TL;DR
If you're an AI design engineer or technical founder who wants to own the entire research-to-shipped-code loop, this workflow is your operating system for UX. You render your whole app on Magic Path's infinite canvas, mine real competitor patterns from YouTube via the Vid IQ MCP, generate three structurally distinct variants constrained to your design system, then select, implement, verify, and push — all without context-switching between tools. Use it whenever you need production-ready flows grounded in real patterns and want design decisions to live where your code lives, with no Figma handoff gap.
What makes this a design engineer's workflow, not just a design tool?
Design engineers blur the line between designing and building. Traditional tooling forces you to jump between Figma, inspiration sites, and your editor, then translate designs into code across a lossy handoff. The Margerie AI Design Engineer UX Flow Workflow collapses all of that into one environment. Research, design, generation, implementation, verification, and shipping happen inside Cursor or Codex — the tools where you already write code.
The core insight is design-system fidelity: every generated variant inherits your live cap design system pulled directly from the running codebase. There's no translation step because the canvas and the code share the same source of truth.
How does the infinite canvas change how you work?
Rather than navigating your running app page by page, Magic Path renders all existing screens simultaneously on an infinite canvas. Prompt the agent to confirm it sees your project, then place each major screen — dashboard, analytics, settings — on the canvas and verify hover states match the live app.
This holistic view is what makes variant generation trustworthy. When you generate three new flows, the agents already have your entire design system in view, so the output is one-to-one with production. You're not designing in isolation and hoping it composes later.
How do you build a research layer that beats generic AI output?
Generic AI design output reflects the model's priors. To ground it in reality, install the Vid IQ MCP and run goal-oriented queries: include both a topic and an explicit goal clause so results are analytically useful. The agent extracts full transcripts and performs transcript-to-checklist conversion — turning a competitor walkthrough into concrete rules like Hick's Law (about three choices), 'personalization beats polish,' and 'onboarding isn't a tour,' with sources like Loom, Dropbox, and Figma.
This checklist is the constraint that keeps generation opinionated and evidence-backed instead of generically plausible.
How do you run the Select → Implement → Push loop cleanly?
Generate three structurally different variants — for example record-first vs. guided checklist vs. step-by-step with an animated SVG panel — from the same checklist and design system. Interact with each on the canvas, then select your preferred component. Critically, confirm the agent can see your selection ('Do you see the selected component in Magic Path?') and wait for the strategy label before implementing — skipping this risks shipping the wrong variant.
Then implement to the codebase, refresh localhost, and walk the flow end-to-end. Only after verification do you push via the GitHub MCP: 'Push these changes to my GitHub repo [repo].' Confirm the returned branch URL. The loop is complete, and you never left your editor.
What separates this from prompting an AI to 'design onboarding'?
Blind prompting produces a single unvalidated guess in a generic design language. This workflow grounds design in real competitor research, constrains it to your production design system, forces three-variant comparison to surface tradeoffs, and closes with verified implementation and a GitHub push. It's engineering rigor applied to design — versioned, reproducible, and shippable.
Next step: Set up Magic Path, the Vid IQ MCP, and the GitHub MCP in your workspace, then run a full loop on one real flow to internalize the rhythm — after that, this becomes your default UX operating system.
// FREQUENTLY ASKED QUESTIONS
Why Cursor or Codex instead of Claude Code for this?
Claude Code lacks a built-in browser view, which this workflow requires for two things: verifying your localhost running app and interacting with the Magic Path infinite canvas. Cursor and Codex both provide the browser view needed to confirm the app runs, review generated variants, and walk through implemented flows before pushing. Without it, the verification and canvas steps break down.
Can I integrate this into a versioned design workflow?
Yes. Because implementation goes directly into the codebase and pushes to GitHub via the GitHub MCP, every design decision is versioned as real code with a branch URL. This makes the process reproducible and reviewable through normal pull-request flows, unlike a separate Figma file that lives outside your version control and drifts from production.
When should I skip the YouTube research step?
Skip it when your goal is layout exploration of existing pages rather than designing a genuinely new flow. For example, comparing top-nav vs. side-nav layouts for settings or analytics doesn't require competitor research — you can instruct the agent to generate layout variants directly on the canvas, then review, select, implement, and push.