magicpath.ai/

Magicpath

magicpath.ai/

MagicPath is a visual canvas where people and AI coding agents build interactive prototypes and production apps together in a shared workspace, with every participant's changes visible to the rest of the team in real time. Its current homepage, under "Introducing MagicPath 2.0," pitches itself as "the visual layer for all your agent work" and demonstrates a specific workflow: a single request can dispatch multiple named agents at once to generate several screens or variations in parallel, shown as separate agent avatars working the same canvas simultaneously. It connects to external coding agents — Codex, Claude Code, Cursor — through an installable plugin (`/add-plugin magicpath` in Cursor) and can pull a connected codebase or Linear issue tracker directly onto the canvas. Because the workspace lives in the cloud, the site states agents can keep working on a file even while it's closed.

Visit website

Category

Design & Creative

Style

Light Minimal

Stack

Next.js Vue Tailwind CSS

Fonts

twkLausanneDM SansInter

Palette

Meta title

MagicPath | The shared workspace for humans and agents

Sections

Updated

Oct 14, 2026

Magicpath's landing page, section by section

Each section below is cropped straight from Magicpath's live page — useful references for design & creative landing page design.

Magicpath design review: how the homepage is built

The page runs top to bottom as a mint announcement strip, a centred headline with a large app mock, a scrolling logo row, a two-column text and canvas block, a node diagram, a plugin install panel, a code-beside-phone mock, a dashboard prototype, a closing call to action and a four-column footer. It is 7992 pixels tall. Grey-white ground and black type take a single green accent #0a6a3c on the second line of most headings, with the mint #dcf1e3 on the top strip. Headings use twkLausanne with DM Sans, and body text uses Inter.

Above the fold

A mint strip reading "Introducing MagicPath 2.0" sits above a headline in two lines, "The visual layer for all your agent work", whose second line is green. A three-line paragraph follows, then a green "Open in ChatGPT" button beside a white "Open app in the browser" button. A wide editor mock under them shows a left thread panel titled "SpendWise explorations", a finance dashboard canvas and an overlapping dark terminal window.

Logo row, multiplayer block and agent diagram

"TRUSTED BY TEAMS AT" heads a single row of company logos including Stripe, OpenAI, Netflix, Webflow, Vercel and Uber. "One request, a whole team at work" sits left of a pale panel with five coloured cursor labels, "Agent 1" to "Agent 3", "Chloe" and "Sabina". "Bring the agent you already trust and work from anywhere" leads into a six-tile diagram connecting "External agent", "Linear MCP", "Design file", "Codebase" and "Database".

Plugin install, code sync and live prototype

Two text columns sit under the diagram, "Works while it's closed" and "Install the MagicPath plugin", the latter with five pills from "Cursor" to "Other agents" and a green-tinted command box. "Design becomes code, code becomes design" shows a phone mock beside React code, with two captions below. "Not a static file, a real prototype" frames a browser window showing "122,872,886", bar charts and a 45% gauge, with two green tooltip labels.

Closing section and footer

A small green logo tile tops "Less pixel pushing means more time to think", followed by two buttons, "Open in ChatGPT" and "Get started on web". The footer places the logo, a one-sentence description and three social icons at left, with three link columns, "Getting started", "Resources" and "Support", at right. A thin rule separates the copyright line from "Privacy Policy" and "Terms of Service".

On mobile

At 390px the headline and paragraph stay centred, and the hero mock shrinks to a thumbnail under two stacked full-width buttons, the first reading "Sign in to MagicPath". A note says the product is best experienced on desktop, and a link to docs follows. The agent diagram is rearranged into a vertical stack, the logo row is cropped to four logos, and the footer columns drop to two plus one.

Worth borrowing

Colouring only the second line of each heading green, as in "a whole team at work", gives every section the same recognisable accent.
Placing a live-looking dashboard under "Not a static file, a real prototype" demonstrates the claim in the same block.
A vertical diagram of labelled tiles turns the plugin explanation into something readable at a glance.