MagicPath (Web to Design)
AI-native design canvas that turns any website URL into editable UI, then iterates to production-ready React — built for product teams, not just developers.
MagicPath (by Pietro Schirano / @skirano) bridges design and code on one infinite canvas. The Web to Design feature accepts a pasted URL and reconstructs the site as editable UI so teams can spin variants, new pages, or component libraries inspired by the source design without a Figma handoff. Source: X/@skirano, 2026-03-12
Engagement: 1,859 likes / 2,808 bookmarks. The reviewed local artifact shows the import flow as a green canvas with website cards entering an "Import" lane, reinforcing that the product's value is reference-site ingestion, not a generic chat-to-UI box. Source: X/@skirano, 2026-03-12; Source: local artifact, 2026-06-30
Core workflow
From the launch thread: describe what you want in natural language → AI builds working React components on an infinite canvas → iterate via chat, visual editing, or both → every design is live, shareable, and exportable. Source: X/@skirano thread, 2026-03-12
Web to Design specifically: paste URL → editable UI → create variants/pages/components from the original. Schirano demoed cloning Google Design brand guidelines and generating a photo app in that visual language. Source: X/@skirano thread, 2026-03-12
Positioning vs other tools
Most AI coding tools optimize for developers writing code. MagicPath targets product teams — designers, PMs, and engineers who need shared UI iteration, visual consistency, and fast prototypes without the design→dev handoff tax. Overlaps conceptually with Frontend and Design Skills (DESIGN.md for agent-native design) but MagicPath is a hosted product with URL ingestion, not a skill file. Product: magicpath.ai. Source: X/@skirano thread, 2026-03-12
Stack fit (Kevin)
Kevin's default UI loop is agent-native: taste-* skills for art direction, JSON Render -- Generative UI Framework for catalog-constrained generative UI, and shadcn registries for components. MagicPath fills a different slot — fast visual exploration from a reference URL before any of that is committed. Use it to clone a target site's visual language into editable React, spin variants, and pick a direction; then hand the chosen direction to the codebase via the design system rather than exporting MagicPath's output wholesale. Most useful for quick client-facing prototypes and Dedalus marketing-page iteration where a Figma round-trip is overkill. Hosted, so it stays outside the local agent loop (no MCP/CLI surface) — a human-in-the-loop divergence tool, not an automation target.
Version Snapshot
MagicPath is a hosted product, not a public package in Kevin's stack. The official site was live at https://www.magicpath.ai/ on 2026-06-30. No public semver, CLI, API, or MCP surface was verified during this review, so agents should treat it as a browser/product reference until a documented automation surface exists.
Timeline
- 2026-03-12 | Web to Design announced: paste any website URL → editable UI → variants and React export. 2,808 bookmarks. Source: X/@skirano, 2026-03-12
- 2026-06-13 | Quality remediation: added Stack fit — divergence/exploration tool ahead of the json-render + shadcn loop. Source: Agent, 2026-06-13
- 2026-06-30 | Deep-reviewed the local artifact, thread replies, and official hosted site. Kept MagicPath as a hosted reference-site-to-design product, not a local executable skill. Source: https://www.magicpath.ai/