MiroMiro

Transforme qualquer site ao vivo em cores de marca, fontes, design tokens, SVGs, Lottie e código pronto para colar. Servidor remoto com OAuth em um clique (plano gratuito, sem cartão) em https://miromiro.app/mcp, ou npx miromiro-mcp localmente.

GitHubExperimente este MCPPatrocinado

Documentação

miromiro-mcp

Servidor MCP para a API de extração de design MiroMiro. Dê ao seu agente de IA o design real de qualquer site ao vivo - cores de marca, fontes, tokens de design, SVGs, imagens, animações Lottie e código de componentes pronto para colar - para que ele construa a partir de valores reais em vez de adivinhar a partir de uma captura de tela.

Funciona com Claude (web, desktop, Claude Code), ChatGPT, Cursor, Windsurf, Codex e qualquer cliente MCP.

Plugin Claude Code

Instale como um plugin para obter as ferramentas mais três habilidades que ensinam o Claude quando usar cada uma (clone-section, match-brand, extract-assets):

claude plugin marketplace add anthropics/claude-plugins-community
claude plugin install miromiro@claude-community

O plugin usa o servidor remoto, então não há nada para instalar e nenhuma chave para colar - no primeiro uso, ele abre um login MiroMiro com um clique que vincula uma conta gratuita (300 créditos/mês, sem cartão).

Início rápido: servidor remoto (nada para instalar)

Um servidor hospedado está em:

https://miromiro.app/mcp

Cole essa URL em qualquer cliente que aceite um servidor MCP remoto. No primeiro uso, ele abre um login MiroMiro com um clique que vincula uma conta gratuita (300 créditos/mês, sem cartão).

Claude (web ou desktop): Configurações → Conectores → Adicionar conector personalizado → cole a URL. Ou use a instalação com um clique.
ChatGPT: Configurações → Segurança e login → ative o Modo desenvolvedor, depois adicione a URL como um conector (autenticação: OAuth).
Cursor (remoto): adicione { "mcpServers": { "miromiro": { "url": "https://miromiro.app/mcp" } } } a ~/.cursor/mcp.json.
Chave de API bruta em vez de OAuth: acrescente ?access_key=mm_live_... à URL, ou envie-a como um cabeçalho Authorization: Bearer.

Servidor local (npm)

Prefere um processo stdio local com a chave em uma variável de ambiente? Obtenha uma chave gratuita em miromiro.app/api/dashboard, depois:

Cursor (~/.cursor/mcp.json) / Windsurf (Configurações → MCP):

{
  "mcpServers": {
    "miromiro": {
      "command": "npx",
      "args": ["-y", "miromiro-mcp"],
      "env": { "MIROMIRO_API_KEY": "mm_live_your_key" }
    }
  }
}

Claude Code (execute no seu terminal, não dentro de uma sessão claude):

claude mcp add miromiro -s user \
  --env MIROMIRO_API_KEY=mm_live_your_key \
  -- npx -y miromiro-mcp

Ferramentas

Ferramenta	O que retorna	Créditos
`extract_code`	Uma seção de uma página ao vivo como um componente pronto para colar (Tailwind, HTML+CSS, JSX ou Vue) mais os tokens que ela usa - comece aqui para reconstruir UI real	25
`extract_brand`	Papéis de cores nomeados (primária/destaque/fundo/texto), paleta, fontes divididas por papel, logotipo, perfis sociais, uma pontuação de confiança de 0-1, e `signals` explicando de onde vieram as cores (tokens declarados vs inferidos)	15
`extract_design_tokens`	Sistema completo de tokens com contagens de uso; `format: css` ou `tailwind` para saída pronta para colar, `dtcg` para um arquivo W3C Design Tokens (Style Dictionary / variáveis Figma)	10
`extract_fonts`	Todos os arquivos de fonte e famílias que o site carrega, com pesos, formatos e URLs de arquivos	5
`extract_videos`	Arquivos de vídeo, `og:video` e incorporações de players (YouTube, Vimeo, Wistia, Loom), marcados por fonte	1
`extract_audio`	Arquivos de áudio, `og:audio` e enclosures de podcast, marcados por fonte	1
`extract_lottie`	Arquivos JSON de animação Lottie declarados na página	3
`extract_svgs`	Código SVG inline (saneado, pronto para colar) mais URLs de arquivos SVG externos	1
`extract_assets`	Cada URL de imagem em uma página, marcado por fonte, com texto alternativo	1

Todas as ferramentas são somente leitura e seguras para repetição. Chamadas idênticas dentro de 24 horas são servidas do cache gratuitamente, e chamadas com falha nunca são cobradas.

Pedindo uma parte da página pelo nome

extract_code aceita section - um de hero, header, footer, pricing, features, testimonials, faq, cta - para que o agente nunca precise inventar um seletor CSS para uma página que não pode ver. Cada resultado também lista as outras sections da página com seletores prontos para chamadas de acompanhamento. Um seletor ou seção que não corresponda a nada cai para o hero com um note dizendo o que a página realmente tem, em vez de um 404 sem saída.

Prompts (comandos de barra)

O servidor expõe três prompts MCP, que os clientes exibem antes da primeira chamada - Claude Code como /mcp__miromiro__clone_section, /mcp__miromiro__brand_kit e /mcp__miromiro__design_tokens, VS Code como /miromiro.<name>, Cursor no seu menu de prompts:

Prompt	Argumentos	O que faz
`clone_section`	`url`, `section?`, `framework?`	Reconstrói uma seção de um site ao vivo como código pronto para colar, com seus valores reais, e lista as outras seções
`brand_kit`	`url`	As cores da marca, fontes, logotipo e redes sociais, explicados (declarados vs inferidos)
`design_tokens`	`url`, `format?`	O sistema completo de tokens como CSS, Tailwind, DTCG ou JSON, com um resumo curto

Controlando o tamanho da saída (servidor remoto)

Resultados remotos são truncados por padrão para que uma página grande não inunde o contexto do chat, e cada resposta truncada diz exatamente o que foi removido. Dois argumentos opcionais o afrouxam por chamada:

response_format: 'concise' | 'detailed' - o botão de uma palavra: concise mantém listas em 10 entradas para uma resposta de chat, detailed retorna tudo o que a ferramenta tem
limit (até 200) - aumenta o limite de itens: "me dê 80 SVGs, não 20"
full_output: true - completa strings longas, como marcação SVG inline inteira

Código gerado nunca é truncado. Resultados param em aproximadamente 20k tokens (25k para extract_code) para caber no limite de resultado de ferramenta do Claude Code, Claude Desktop e Cursor, e o truncation_note diz quantos tokens foram cortados e qual argumento os traz de volta.

A API REST e este servidor npm local sempre retornam tudo sem truncamento, então limit e full_output se aplicam apenas ao servidor remoto. Cada ferramenta em ambos os servidores aceita render: true (apenas planos de API pagos e pacotes de crédito - uma conta gratuita recebe 402 render_requires_plan e nada é executado, exceto quando o próprio site recusa a solicitação: veja Notas), mais dois argumentos compartilhados:

fresh: true - pula o cache de 24 horas e re-extrai a página ao vivo (cobrado normalmente); use quando o site acabou de mudar
screenshot: true (requer render: true) - o resultado ganha um campo screenshot: uma URL pública de uma captura 1440x900 da página, ao vivo por 7 dias, sem créditos extras - mostre-a ao usuário para verificar uma extração. Passe 'full' em vez de true para a altura inteira da página.

Exemplos

"Reconstrua a seção de preços do stripe.com em React"

O agente chama extract_code com a URL, obtém a marcação real da seção, cores, fontes e espaçamento, e adapta valores reais em vez de adivinhar.

A extração retorna os estilos claros de uma página por padrão, então um site que você conhece como escuro volta claro a menos que você peça o contrário:

"Reconstrua o cartão de preços do linear.app no seu tema escuro"

O agente passa theme: "dark" e as regras prefers-color-scheme: dark da página e propriedades personalizadas se tornam o próprio componente. Cada resultado também carrega um campo theme dizendo qual você realmente obteve. Sites que alternam temas com um alternador de classe JavaScript não podem ser selecionados desta forma - você obtém o padrão da página mais uma dica dizendo isso.

"Construa um painel no estilo do linear.app"

O agente chama extract_brand e extract_design_tokens, obtém as cores reais, fontes e escala de espaçamento do Linear, e constrói para corresponder.

"Quais fontes o apple.com usa?"

O agente chama extract_fonts e retorna cada família com suas URLs de arquivos de fonte e pesos.

Notas

A API lê HTML estático e resolve a cascata CSS completa por padrão, então um aplicativo totalmente renderizado no cliente pode retornar pouco para imagens, vídeo, áudio e Lottie (tokens, fontes, marca e código vêm do CSS e não são afetados). Passe render: true em qualquer ferramenta do servidor remoto para executar a página em um navegador real primeiro para que seu JavaScript seja executado (+5 créditos). A renderização está incluída nos planos de API pagos e pacotes de crédito, não na conta gratuita: uma conta gratuita recebe 402 render_requires_plan antes que qualquer coisa seja executada ou cobrada.
Uma exceção, e não precisa de sinalizador: quando o SITE recusa a solicitação simples de uma conta gratuita (401, 403 ou 406 - editores comumente rejeitam IPs de datacenter mesmo para uma página pública), o servidor tenta novamente essa chamada em um navegador real automaticamente e gratuitamente, algumas vezes por mês. O resultado então carrega usage.renderRescue (uma frase para ler ao usuário) e usage.renderRescuesLeft. Então, em uma conta gratuita, não trate um 401/403/406 como "este site não pode ser extraído" até que sejam usados.
Cada resultado carrega usage com os créditos restantes neste mês. Se a conta tiver um pacote de crédito (créditos únicos que nunca expiram, comprados em https://miromiro.app/api/pricing), usage.packCredits é o saldo restante do pacote; pacotes são usados após os créditos mensais, então uma conta gratuita com um pacote continua funcionando além dos seus 300 créditos.
Respeite os sites dos quais você extrai: verifique seus termos antes de reutilizar ativos comercialmente.

Links

Documentação da API · Playground (sem conta) · Preços · Changelog · Página de conexão