Ciying AI Directory
AI DirectorySkills
中文
Ciying AI Directory

MagicPath in Claude Code for Reviewing a Shared Design Canvas

Open a MagicPath canvas through Claude Code, find a component by its visible label, and review the available design context before any edit.

Setup for Claude Code

This walkthrough uses MagicPath's MIT-licensed MCP plugin, the publisher's alternative to the CLI workflow previously listed here. Use Claude Code, a browser for sign-in, and a MagicPath project you can access.

  1. Run `claude plugin marketplace add MagicPathAI/magicpath-agent-plugin` to add the publisher's marketplace.
  2. Run `claude plugin install magicpath@magicpath` and start a Claude Code session.
  3. Open `/mcp`, select MagicPath, and complete the browser authorization. Use an authorized test project's canvas link for the example.

Example task

In a test MagicPath canvas, place two cards named Trial Plan and Team Plan. Share the canvas link with Claude Code and ask MagicPath to locate Trial Plan, report its heading and visible button label, and return a link to that canvas without editing either card.

Expected result

Claude Code identifies Trial Plan without mixing it up with Team Plan, reports the actual button label from the visible design context, and returns the canvas link. The canvas stays unchanged.

Upstream documentation

Original SKILL.md on GitHub · MIT license · Source reviewed

Frequently asked question

Can Claude Code inspect a MagicPath canvas using only its URL?

Yes, once the official MagicPath plugin is connected and the account signed in through the MCP authorization flow has access to the canvas.