Guia

Dê ao seu agente de código especificações de design sob demanda com MCP

Seu agente pode buscar uma especificação de design do mesmo jeito que busca documentação. Conecte o servidor MCP do Design Extractor e o agente consegue extrair o DESIGN.md de qualquer site público, esperar a extração, ler o arquivo e construir a partir dele, tudo dentro de uma tarefa.

Sem copiar arquivos de um lado para o outro e sem aba do navegador: você cita um site no prompt, e a especificação chega ao contexto do agente.

Escrito para desenvolvedores criando agentes e fluxos com agentes. Atualizado em .

O que você vai ter

  • O servidor MCP conectado ao Claude Code, Codex, Cursor ou claude.ai, com login na sua conta ou com uma chave de API.
  • O fluxo de ferramentas que um agente segue: verificar, extrair, esperar, ler.
  • Prompts que fazem o agente percorrer o ciclo inteiro, da extração à UI.
  • Quanto custa e os limites a considerar.

O que o agente recebe

O servidor fica em https://www.design-extractor.com/api/mcp e usa streamable HTTP. Por ele, um agente pode iniciar a extração de um site público, esperar por ela, ler o DESIGN.md pronto, consultar o preço e o seu saldo, e listar o que você já extraiu. Toda extração também aparece em Minhas extrações no site, como qualquer outra.

O arquivo é o mesmo que o site gera: tokens de cores, tipografia, espaçamento, raios e componentes no topo, e as regras de uso abaixo. Ele segue a especificação de DESIGN.md do Google, então o agente consegue ler como qualquer outra especificação.

Conecte o servidor

Escolha seu cliente. Claude Code, Codex, claude.ai, Claude Desktop e ChatGPT fazem login com a sua conta; Cursor e scripts usam uma chave de API.

  1. Adicione o servidor uma vez. Não precisa de chave.

    claude mcp add --transport http design-extractor https://www.design-extractor.com/api/mcp

  2. Execute /mcp, escolha design-extractor e selecione Authenticate. Entre na sua conta e aprove na página que abrir.

  3. Peça um site: “extraia o design de stripe.com”.

Claude Code, Codex, claude.ai, Claude Desktop e ChatGPT entram com a sua conta. Cursor, n8n e scripts usam uma chave de API pessoal da página da conta.

Para o Claude Code e o Codex também existe um plugin. Ele traz o servidor junto com uma skill apply-designmd que guia o agente para extrair um site de referência e aplicar o DESIGN.md dele ao seu código. Depois da instalação, rode /mcp no Claude Code e autentique o servidor do plugin.

/plugin marketplace add Magentix-Studio/design-extractor-plugin
/plugin install design-extractor@design-extractor
codex plugin marketplace add Magentix-Studio/design-extractor-plugin
codex plugin add design-extractor@design-extractor

Todos os clientes, o snippet do Agent SDK e as configurações de chave estão na página de documentação do servidor MCP.

As ferramentas e a ordem de chamada

FerramentaO que faz
list_my_extractionsSuas extrações, das mais recentes para as mais antigas. Chame primeiro, para não pagar duas vezes por um site que você já tem.
get_pricingO custo atual de uma extração em créditos.
get_creditsSeu saldo de créditos restante.
extract_designInicia a extração de uma URL pública e gasta os créditos. Passe tier PRO para analisar as principais páginas do site. Retorna assim que a extração entra na fila.
get_extractionRecebe o nome ou a URL do site. Retorna o status enquanto a extração roda e depois o texto completo do DESIGN.md. Uma extração que falhou diz o motivo.

Uma extração leva pelo menos um minuto, então o fluxo é iniciar e depois consultar. O próprio servidor explica isso ao agente; você só cita o site.

1. list_my_extractions    is the site already there?
2. extract_design         url and tier PRO
3. wait about 60 seconds
4. get_extraction         site name, every 25 seconds until COMPLETED
5. save the DESIGN.md text and build from it

Exemplo prático: Supabase

Digamos que o agente precise construir no estilo de supabase.com. Quando get_extraction informa que a extração terminou, ele devolve o DESIGN.md inteiro como texto. O DESIGN.md de Supabase na galeria vem do mesmo tipo de extração Pro, então mostra o que chega ao contexto do agente. Ele começa assim:

O topo do DESIGN.md de Supabase da galeria, resumido a poucos tokens por grupo.
---
name: Supabase
colors:
  primary: "#0E7E4E"
  primary-fill: "#007243"
  primary-deep: "#15593B"
  focus-ring: "#30BA79"
  brand: "#3FCF8E"
  brand-tint: "#A9F1CA"
typography:
  hero-display:
    fontFamily: Manrope
    fontSize: 46px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: normal
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 450
    lineHeight: 1.5
    letterSpacing: normal
rounded:
  xs: 2.66667px
  sm: 4px
  md: 5.33333px
---

Extraído do site público de Supabase. Não é uma diretriz oficial da marca. Ler o DESIGN.md completo de Supabase

Depois dos tokens vêm as seções que o agente lê para regras e receitas: Overview, Colors, Typography, Layout, Elevation & Depth, Shapes, Components, Do's and Don'ts, Responsive Behavior, Iteration Guide, Known Gaps. Só a seção Components tem 49 receitas em HTML e CSS, então o agente reconstrói um botão ou um card a partir de valores medidos, sem chutar.

Prompts

Cite as ferramentas, o site e o que acontece com o arquivo. Estes prompts foram escritos para este guia; troque o site e a tarefa.

Extrair e construir em uma tarefa

Use the design-extractor tools to get a Pro DESIGN.md of supabase.com.
Check list_my_extractions first, so we don't pay twice for a recent run.
When it is complete, save it as DESIGN.md in the repo root.
Then restyle src/app/settings with its color, typography and rounded tokens
and its component recipes. Keep the layout and logic as they are.

Compare antes de escolher

Get Pro DESIGN.md files for supabase.com and linear.app with the design-extractor tools.
Compare their primary colors, fonts and radii in a short table,
and tell me which one fits a dense admin dashboard better and why.

Está criando seu próprio agente? Passe o servidor na opção mcpServers do Agent SDK com uma chave de API e permita mcp__design-extractor__*; a documentação do MCP tem o snippet completo.

Créditos e limites

  • Os mesmos créditos do site. Uma extração Pro custa 10 créditos, seja você ou seu agente quem a inicia. Recarregue em Preços.
  • Sem cobrança dupla nas suas extrações recentes. Pedir um site que você extraiu recentemente reaproveita aquela extração.
  • Só páginas públicas. Páginas que exigem login, em localhost ou em uma rede privada não são suportadas.
  • Chaves. Até cinco chaves de API ativas, cada uma válida por um ano e revogável na página da sua conta. Um cliente com login renova o próprio token; desconecte na mesma página.

FAQ

Especificações de design para agentes de código via MCP: perguntas

Respostas curtas para o que as pessoas perguntam antes de experimentar.

Sim. Ela usa a mesma conta e os mesmos créditos pré-pagos: uma extração Pro custa 10 créditos. O agente pode chamar get_pricing para ver o custo atual e get_credits para ver seu saldo; quando o saldo não é suficiente, extract_design recusa e avisa.

Não para clientes que fazem login: claude.ai, Claude Desktop, ChatGPT, Claude Code e Codex abrem uma página de consentimento uma vez e guardam um token que se renova sozinho. Cursor, n8n, scripts e o Agent SDK usam uma chave de API pessoal da página da sua conta.

Pelo menos um minuto. extract_design retorna na hora; o agente espera cerca de um minuto e depois chama get_extraction com o site a cada 25 segundos até o DESIGN.md ficar pronto.

Não por um site que você extraiu recentemente: pedir de novo reaproveita a sua extração, e a resposta avisa que nenhum crédito foi cobrado. Um site que só outras pessoas extraíram ainda custa o preço normal. list_my_extractions mostra o que você já tem.

Não. O servidor captura a página pela URL, então páginas que exigem login, em localhost ou em uma rede privada não são suportadas. Publique uma prévia pública ou extraia o site no ar.

Quer ver um DESIGN.md antes de conectar?

Faça uma extração no site. Seu agente recebe o mesmo arquivo pelo servidor.

Gere um DESIGN.md de qualquer site

Guias relacionados

Ver todos os guias de DESIGN.md