Magicpath skill

O Claude acha seus designs no MagicPath, instala no projeto e deixa funcionando de verdade, ou desenha telas novas direto no canvas.

por magicpathai

instalações: 6.300
estrelas no GitHub: 92
No skills.sh desde: março de 2026
Licença: Sem licença declarada

Atualizada no GitHub em 15 de julho de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

magicpathai
magicpath
O Claude acha seus designs no MagicPath, instala no projeto e deixa funcionando de verdade, ou desenha telas novas direto no canvas.6.300 instalações, grátis

O que ela faz

Conecta o Claude ao MagicPath, uma plataforma de criar e compartilhar componentes de interface com IA, pela CLI magicpath-ai. Ele procura designs nos seus projetos e nos do time, olha a prévia em imagem, mostra o que achou e espera você confirmar antes de instalar o código no seu app.

Depois de instalar, adapta o design pra produção: troca larguras fixas por layout que se ajusta à tela, liga botões e formulários às funções reais, puxa os dados do app no lugar dos de exemplo e mantém tudo o que o componente antigo fazia. Também aplica temas, com as cores e fontes do design system.

Faz o caminho contrário: cria ou edita componentes no canvas do MagicPath a partir de código e recria lá telas de um repositório do GitHub, GitLab ou Bitbucket. Ainda gera imagens, mostra quem fez cada design no time e gerencia as skills guardadas no MagicPath.

Nas palavras de quem fez

Use MagicPath through the magicpath-ai CLI to find, preview, inspect, install, export, create, and edit UI components and manage MagicPath skills. Trigger for…

magicpathai, no SKILL.md

Quando usar

Trocar o login do app por um design do MagicPath sem perder a validação
Montar uma página nova com os componentes da biblioteca do time
Levar a barra lateral do app pro canvas do MagicPath pra redesenhar
Aplicar o tema da marca nos componentes instalados
Ver no que uma pessoa do time trabalhou por último

Depois de instalar, é só pedir assim

Acha no MagicPath o design de tabela de preços que eu fiz semana passada e instala na página de planos
Pega o componente selecionado no meu canvas e troca o cabeçalho do site por ele
Recria no MagicPath a tela de checkout desse repositório pra eu mexer no visual

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketAlerta
SnykAlerta

Perguntas

Como instalar a Magicpath no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Magicpath, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que precisa pra funcionar?

Node.js (a CLI roda com npx -y magicpath-ai), internet e uma conta no MagicPath, com login pelo navegador. Quem tem só um código de convidado (gst_...) entra sem conta, mas fica preso a um projeto e a sessão expira.

Funciona fora de React?

Instala direto só em projetos React com TypeScript. Em Swift, Python ou outra linguagem, o Claude lê o código do design como referência e recria na linguagem do projeto.

Roda no Codex e no Antigravity?

Sim. Tudo passa pela CLI magicpath-ai no terminal. Se o agente tiver navegador embutido, a skill deixa o canvas do projeto aberto ao lado pra você acompanhar.

Levar essa skill

1x magicpathR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/magicpathai/agent-skills

Aprenda a usar

Claude Design: como usar, até no plano grátis
O Claude Design cria tela de site, protótipo e slide conversando, e agora vem até no plano grátis. Veja onde abrir, como usar e como levar pro Claude Code.