AI-Driven Design Engineering Workflow for UX Prototyping

Lukas Margeriego watch the original →

the gist

A design engineering workflow using Cursor, MagicPath, and the VidIQ MCP to research competitor UX, generate UI variants on an infinite canvas, and push implemented code back to GitHub.

The Breakthrough

The author demonstrates a closed-loop design engineering workflow that integrates YouTube-based UX research with an infinite canvas IDE plugin to generate, iterate, and implement UI flows directly into an existing codebase.

What Actually Worked

  • Infinite Canvas Visualization: Installed the MagicPath extension in Cursor to render local web application screens onto an infinite canvas, allowing for side-by-side comparison and visual editing of components.
  • Automated UX Research: Configured the VidIQ MCP server in Cursor to query YouTube transcripts for onboarding best practices, using specific prompts to extract design principles and checklists from competitor breakdown videos.
  • Generative UI Prototyping: Instructed the Cursor agent to generate three distinct onboarding flow variants based on the extracted checklist, maintaining the application's existing design system and component structure.
  • Codebase Integration: Used the GitHub MCP server to authenticate and push the finalized UI implementation directly from the local environment to the remote repository.

Context

Developers often struggle to bridge the gap between high-level UX research and concrete code implementation. This workflow addresses the friction of context-switching between design tools, research platforms, and IDEs by centralizing the process within Cursor. By leveraging MCP servers to connect external data sources like YouTube transcripts and GitHub repositories, the author creates a repeatable loop for rapid feature development.

Notable Quotes

  • "Personalization beats polish, onboarding isn't a tour, there's Hick's Law which kind of limits the choices you want to aim for around three."

Content References

  • #ai
  • #dev-tooling
  • #ux-design

summary by google/gemini-3.1-flash-lite. probably wrong about something. check the source.