Design Extract (MCP server) — Casos de uso, Instalar & Demo ao vivo

Por que usar

Principais recursos

Saída de tokens DTCG em três camadas (primitive → semantic → composite)
Emissores multiplataforma: SwiftUI, Compose, Flutter, Tailwind v4, Figma
Passagem de remediação WCAG — sinaliza pares com falha e propõe correções
Auditoria de saúde do CSS (especificidade, regras mortas, tokens redundantes)
Extensão para Chrome para captura com um clique
Baseado em Playwright, Node 20+, licença MIT

Demo ao vivo

Como fica na prática

design-extract-mcp.replay ▶ pronto

0/0

Instalar

Escolha seu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "design-extract-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "design-extract-mcp",
      "command": "npx",
      "args": [
        "-y",
        "design-extract-mcp"
      ]
    }
  ]
}

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json

{
  "context_servers": {
    "design-extract-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "design-extract-mcp"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

claude mcp add design-extract-mcp -- npx -y design-extract-mcp

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: Design Extract

Como clonar o sistema visual de uma marca para tokens DTCG

👤 Design engineers, equipes de agência, equipes alinhadas com a marca ⏱ ~25 min intermediate

Quando usar: Você está reconstruindo um site de marketing ou app a partir de uma referência e precisa dos tokens em 10 minutos, não em uma sessão de recorte no Figma.

Pré-requisitos

URL pública do site de referência — ex.: https://stripe.com — deve ser publicamente acessível

Fluxo

Extrair

Use o design-extract em https://stripe.com. Gere tokens DTCG, SwiftUI e Tailwind v4. Salve em /tokens/.✓ Copiado

→ tokens.json + tokens.swift + tailwind.css escritos; relatório de cobertura
Auditar

Execute a passagem de saúde de CSS e a remediação WCAG. Sinalize tudo abaixo do nível AA.✓ Copiado

→ Relatório de auditoria com pares reprovados e sugestões
Aplicar

Agora gere uma página inicial Next.js usando esses tokens — nav, hero, 3 cards de funcionalidades.✓ Copiado

→ Página renderizada com a identidade visual da marca

Resultado: Um conjunto de tokens + auditoria + página inicial, tudo derivado de uma única URL.

Armadilhas

Site é fortemente bloqueado por SSR ou requer login — Forneça um cookie autenticado via extensão ou um pré-passo customizado no Playwright

Combine com: filesystem

Audite seu próprio site para detectar desvios do design system

👤 Mantenedores internos de design system ⏱ ~30 min intermediate

Quando usar: Você suspeita que 47 cores não autorizadas foram parar em produção. Confirme.

Fluxo

Inventariar

Execute o design-extract em https://yoursite.com. Não gere código — apenas reporte cores únicas, famílias de fontes e valores de espaçamento usados.✓ Copiado

→ Contagem de valores distintos por categoria
Comparar com a fonte

Compare com /design/tokens.json. Sinalize cada valor usado em produção que não está na fonte da verdade.✓ Copiado

→ Tabela de desvios com referências de arquivo/componente
Planejar a limpeza

Agrupe os desvios por provável causa (CSS legado, estilo ad-hoc, token errado). Sugira um plano de limpeza em 3 PRs.✓ Copiado

→ Plano de PRs escrito

Resultado: Relatório concreto de desvios que você pode entregar para a engenharia, não uma reclamação vaga sobre inconsistências.

Armadilhas

A ferramenta reporta em excesso por causa de variáveis CSS que resolvem em runtime — Passe --resolve-vars para rastrear cadeias de var(--x) antes de contar

Combine com: filesystem

Gerar variáveis do Figma a partir de um site em produção

👤 Designers que precisam espelhar o código no Figma ⏱ ~15 min beginner

Quando usar: Seu código foi ao ar primeiro; o design precisa se atualizar no Figma.

Fluxo

Emitir JSON do Figma

Use o design-extract em https://yoursite.com com output=figma-variables. Salve em /design/figma-vars.json.✓ Copiado

→ JSON de variáveis do Figma pronto para importação
Importar

Me guie na importação com o plugin Figma Variables Import.✓ Copiado

→ Instruções passo a passo do plugin

Resultado: Arquivo do Figma sincronizado com o código em produção, sem usar o conta-gotas manualmente.

Armadilhas

Nomes de tokens colidem com variáveis existentes no Figma — Use a flag --prefix para adicionar namespace, ex.: site/color.bg.primary

Combinações

Combine com outros MCPs para 10× de alavancagem

design-extract-mcp + filesystem

Persistir os outputs de tokens no repositório para que execuções sucessivas possam compará-los

Execute o extract toda sexta-feira e salve em /design/snapshots/$(date +%F)/.✓ Copiado

design-extract-mcp + Figma-Context-MCP

Sincronização bidirecional — extrair do site e enviar de volta ao Figma

Após o extract, envie o arquivo de tokens ao Figma via Figma-Context-MCP.✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar	Custo
extract	url, output_format[]: dtcg\|swiftui\|compose\|flutter\|tailwind\|figma\|wordpress\|shadcn	Ponto de entrada principal	1 crawl com Playwright
audit_css_health	url	Após ou no lugar do extract, quando o objetivo é saúde e não clonagem	1 crawl
wcag_remediate	tokens	Após o extract, antes de publicar os tokens	gratuito (pós-processamento)
diff_tokens	url, source_tokens_path	Auditoria de desvio no seu próprio site	1 crawl

Custo e limites

O que custa rodar

Cota de API: Local — depende da sua máquina
Tokens por chamada: 1500 a 6000 por resumo de extração
Monetário: Gratuito (MIT)
Dica: Não execute o extract em todo PR — faça cache do resultado e execute apenas em alterações

Segurança

Permissões, segredos, alcance

Armazenamento de credenciais: Nenhum, a menos que o destino exija autenticação (nesse caso, via arquivo de cookie)

Saída de dados: Apenas para a URL que você indica. O Playwright roda localmente.

Respeite o robots.txt e os Termos de Uso do site — isso busca como um navegador, mas em escala ainda é scraping.

Solução de problemas

Erros comuns e correções

Playwright Chromium falha ao iniciar

Execute npx playwright install chromium uma vez

Verificar: `npx playwright --version` exibe uma versão

Site bloqueia o navegador headless

Passe --headed ou forneça um proxy residencial / arquivo de cookie

Tokens de saída parecem incompletos

O site usa muito CSS-in-JS — tente --wait-for-selector main para garantir que a renderização do SPA termine

Alternativas

Design Extract vs. outros

Alternativa	Quando usar	Troca
Figma-Context-MCP (GLips)	A fonte da verdade é o Figma, não um site em produção	O Figma MCP precisa de um arquivo Figma; o design-extract funciona a partir de qualquer URL
Plugin Tokens Studio	Você já está no Figma e quer uma UI de gerenciamento de tokens	Manual; o design-extract automatiza a extração inicial

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills