Lukas Margerie's MagicPath walkthrough begins with a website section and ends with a presentation. Between those points, he explores pricing layouts, restyles an email and marks up video frames without losing the visual context on his canvas. The result is a useful demonstration of connected creative work inside ChatGPT, though “replaces five design tools” is a headline, not a feature-parity test.
MagicPath works best here as a shared visual workspace: keep source material, design variants, comments and handoff material together, then use ChatGPT and connected tools to move between them. It does not remove the need to inspect code, check mobile layouts, clear rights to third-party content, review generated copy or validate a slide export.
Watch the Five-Workflow Walkthrough
Credit: The five workflows, example prompts and on-screen results are Lukas Margerie's. MagicPath documentation, Mobbin and OpenAI's plugin guide were checked separately on 20 October 2026.
First, Open the Plugin Extension
In the opening setup, Lukas finds MagicPath in ChatGPT Desktop's plugin directory, installs it, pins it to the sidebar and opens a new canvas file. He distinguishes an ordinary plugin call in a chat from an extension with its own interactive interface (01:02). OpenAI confirms that some plugins provide full-screen sidebar apps and other interactive views. Availability still depends on plan, region, product surface, workspace settings and connected-app permissions; the exact buttons in Lukas's desktop setup may differ for another account.
The canvas is not merely a screenshot collection. MagicPath says sketches, shapes, images and finished designs can sit together, and a selected object becomes context for the next chat request. That persistent visual context is the thread connecting the five examples.
1. Bring a Live Page Into a Responsive Design
Lukas opens MagicPath's pricing page in the ChatGPT browser, marks a region and asks to add it to his canvas (02:01). ChatGPT reconstructs a section there; he narrows the frame to show a mobile layout. MagicPath's code-export guide says its canvas designs are React code that can be inspected, downloaded or handed to a coding agent. That makes the result more editable than a flat image.
What to check: the video demonstrates one responsive adjustment, not an exhaustive visual or functional comparison with the live site. Before using exported code, inspect breakpoint behavior, fonts, semantics, keyboard access, performance and whether any imported interaction actually works. Use your own page or content you have permission to adapt; a captured reference is not a license to ship another brand's assets.
2. Explore Pricing Layouts With Mobbin References
Next, Lukas asks ChatGPT to use Mobbin MCP for pricing-section patterns. He chooses two directions and asks MagicPath to build variants that retain the existing MagicPath visual style (03:27). The pair includes a comparison-table direction and an interactive quantity or credit slider. Seeing both beside the original makes it easier to discuss a product decision than an isolated “make it better” prompt.
Mobbin currently describes MCP access as part of its Pro and Team plans; do not assume the reference library is free with MagicPath. A reference can suggest an interaction pattern, but the final pricing copy, actual calculations and disclosures must come from the product's own offer. Test the slider's numbers and mobile width, not just its appearance.
3. Restyle a Newsletter From an Inbox
With an Outlook connection available in his setup, Lukas asks ChatGPT to find a Lululemon email and render a version in the MagicPath project's style (05:42). He then asks for new product-specific copy and generated imagery. The visible sequence is useful for exploring an editorial hierarchy, but the intermediate canvas still contains the source email's images. Lukas explicitly changes that material before showing his new version.
Before publishing: verify that inbox access is authorized, that the new copy accurately describes a real feature, and that all final imagery and text can be used. A newsletter reference should guide layout and pacing, not become a copied campaign. Also test the email in actual clients; a canvas design alone does not prove deliverable HTML or responsive email rendering.
4. Turn Video Frames Into Clear Edit Feedback
Lukas uploads a roughly 30-second motion-graphics clip and asks for a frame every two seconds, yielding 15 stills on the canvas (07:58). He draws red arrows, adds text notes and asks ChatGPT to inspect the annotations. He then generates a flowchart below the frames to summarize the sequence.
This is a practical review board: a designer or editor can see where a wording, color or transition note applies. It is not the same as editing the source video. The annotated board becomes a brief for a separate production step, whose rendered output must be compared with the notes. For fast motion, sampling every two seconds may miss a transition; adjust the interval or add exact timecodes where precision matters.
5. Turn the Canvas Into an Editable Presentation
Finally, Lukas requests a deck of no more than eight slides about the project. The generated slides pull in screenshots of the original section, variants, newsletter and marked-up frames. He then asks for a Google Slides version and demonstrates editable text and images in that destination (11:05). That is a useful handoff for a team meeting: the deck records what changed and why.
Review the exported slide order, screenshots, captions, permissions and editability in your own Google account. The video shows a successful handoff in one connected setup; it does not guarantee that every font, layout or interactive canvas element survives export unchanged. Slides are a summary of the work, not the source of truth for production code.
A First Project Worth Trying
Choose one section of a site you own. Bring it into MagicPath, generate two variants with a clear target audience and brand rules, and review them at desktop and mobile widths. Then create a three-slide decision deck: current state, the two options, and the trade-off. Keep connected email out of the first test. That gives you a useful comparison without granting more data access than the task needs.
Compare one owned section
Two variants, one reviewable decision.
Jump to a Segment
| Time | Topic |
|---|---|
| 00:00 | MagicPath's canvas overview |
| 00:33 | Install and pin the plugin |
| 01:02 | Extension versus in-chat plugin |
| 02:01 | Live website to responsive code |
| 03:27 | Mobbin pricing-section variants |
| 05:42 | Outlook newsletter restyle |
| 07:58 | Video-frame annotations and flowchart |
| 11:05 | Canvas to Google Slides |
Watch the Related Tutorials
Sources and Limits
Creator: Lukas Margerie's walkthrough, the user-supplied transcript, his X account and Weekly 10x. Product: MagicPath, its canvas guide and code-export guide. Connections: Mobbin MCP and OpenAI's plugin availability guide. The video shows one creator's connected desktop setup. We did not independently run MagicPath, inspect its generated files, test its Outlook access, or verify the exported Slides file.