Designer MCP — Design Baseado em Pesquisa

O que Designer MCP — Design Baseado em Pesquisa faz?

Fundamente cada design em evidências reais de produto antes da implementação. Esta habilidade combina uma metodologia de pesquisa com uma biblioteca local e gratuita de 1.342 sistemas de design extraídos.

A biblioteca de pesquisa possui uma camada:

1. Estilos — direção visual e bom gosto, extraídos de páginas web reais de marketing/produto.

Telas e fluxos existem no produto pago Refero, mas não estão nesta implantação. Para perguntas no nível de tela ou jornada, use as referências de ofício incluídas e o material do próprio usuário, e diga isso claramente, em vez de inventar precedentes.

Inegociáveis

• Pesquisa antes do design. Todo design deve ser fundamentado em referências antes da implementação. Não confie no gosto de design genérico do modelo.
• Use estilos primeiro para trabalho visual. Se o servidor MCP estiver indisponível, use as referências de ofício incluídas e mantenha o mesmo fluxo de trabalho de bloqueio de referência.
• Não copie uma única referência. Estude várias referências fortes e sintetize uma nova direção para o produto do usuário.
• Não faça a média das referências em um meio-termo seguro. Quando as referências conflitarem, escolha uma direção dominante e preserve suas características marcantes. Referências secundárias podem adicionar apenas detalhes específicos.
• Não mude os significados dos tokens. Se uma referência diz que uma cor, fonte, raio, sombra, gradiente ou componente é para uma função específica, use-o apenas para essa função ou omita-o.
• Respeite as diretrizes de imagens. Se um estilo depende de fotografia, ilustração, fotos de produto ou gráficos, preserve o papel da mídia. Use assets reais/gerados/stock quando disponíveis; caso contrário, crie um placeholder intencional com direção de arte. Não finja imagens complexas com CSS fraco, texto ou caixas decorativas.
• Não use habilidades genéricas de frontend/design de produto como autoridade de design paralela quando esta habilidade estiver disponível. Esta é a metodologia de design; habilidades de design genéricas tendem a puxar o trabalho de volta para o design genérico de IA.
• O resultado da pesquisa deve ser específico. Nomeie as referências, descreva escolhas concretas e explique o que será adaptado.
• Nenhum design baseado em memória atmosférica. Toda decisão importante de visual, layout, conteúdo ou interação deve traçar até a pesquisa, o briefing do usuário ou uma referência de ofício.
• Sintetize antes da implementação. Transforme a pesquisa em um conceito, direção de token e registro de decisões concretas antes de desenhar ou codificar.
• Um briefing não é um alvo de construção. Antes da implementação, bloqueie uma fonte visual fornecida pelo usuário, um alvo existente de produto/sistema de design, um mockup gerado selecionado ou uma direção explícita bloqueada por referência aprovada para construção direta.
• Use geração de imagens apenas quando ela mudar o resultado. A geração de imagens pode ser lenta e pode não existir em todos os ambientes de codificação. Use-a para exploração visual, mockups, imagens, ilustrações, texturas e assets difíceis; pule-a para pequenas correções, edições de produção óbvias ou trabalho de UI nativo em código.
• Valide após construir o trabalho visual. Compare a implementação renderizada contra o alvo/referência bloqueado antes da entrega. Corrija desvios de design acionáveis em vez de tratar a pesquisa como suficiente.

Configuração MCP

Esta habilidade é útil por si só como uma metodologia de design baseada em pesquisa e referência de ofício. A pesquisa é obrigatória de qualquer forma — use as ferramentas MCP para pesquisa de estilo ao vivo quando disponíveis, caso contrário, pesquise com as referências de ofício incluídas e quaisquer referências fornecidas pelo usuário.

O servidor local é executado no Docker:

# Registre o servidor MCP (Hermes / qualquer cliente MCP stdio)
hermes mcp add designer \
  --command docker \
  --args run --rm -i -v "$HOME/.refero-cache:/cache:ro" \
         designer-mcp:latest node scripts/mcp-entry.mjs

Em seguida, reinicie o gateway (ou /reload-mcp) para que as ferramentas sejam registradas.

Para uma galeria no navegador dos mesmos dados — miniaturas, amostras, escalas tipográficas:

cd designer-mcp-docker && docker compose up -d   # http://127.0.0.1:8787

Para detalhes completos da ferramenta, leia references/mcp-tools.md.

Descoberta

Antes de pesquisar, forme um breve briefing de design. Pergunte apenas por informações ausentes que mudariam materialmente o resultado; caso contrário, faça suposições razoáveis e prossiga.

Esclareça:

• o que está sendo projetado
• plataforma: web, iOS ou ambos
• público e nível técnico
• objetivo principal do usuário
• sensação ou direção de marca desejada
• objeções/riscos de negócio/usuário a superar
• restrições: marca existente, framework, prazo, acessibilidade, conteúdo
• se a tarefa precisa de direção visual, padrões de UI concretos, lógica de jornada ou uma mistura
• se a tarefa deve ir direto para o código, produzir opções visuais primeiro ou criar assets gerados durante a implementação

Formato do briefing:

Projetando [O QUÊ] para [QUEM] em [PLATAFORMA].
Objetivo: [OBJETIVO PRINCIPAL DO USUÁRIO].
Tom: [SENSAÇÃO DESEJADA].
Principal objeção/risco: [OBJEÇÃO].
Deve lembrar: [IDEA MARCANTE OU DISTINTIVA].
Restrições: [RESTRIÇÕES].
Pesquisa necessária: [estilos/telas/fluxos].
Caminho: [construção direta / exploração visual / auditoria / geração de assets].

Roteamento de Fluxo de Trabalho

Escolha o fluxo de trabalho mais leve que possa produzir um resultado de alta qualidade.

• Construção direta: use para pequenas correções de UI, edições de produção claras, trabalho existente de sistema de design ou tarefas com uma fonte concreta para corresponder. Pesquise e bloqueie a direção, depois codifique.
• Exploração visual: use quando o usuário pedir variantes, uma nova linguagem visual, um grande redesign, uma landing page ou outra superfície de alta visibilidade com várias direções plausíveis. Padrão: três opções bloqueadas por referência e peça ao usuário para escolher; veja references/visual-workflow.md.
• Auditoria: use capturas de tela ou referências de estilo como evidência antes da crítica.
• Geração de assets: use imagens geradas apenas quando o bloqueio de referência exigir mídia bitmap que código, ícones ou assets existentes não possam fornecer fielmente; veja references/visual-workflow.md.

Roteamento de Ferramentas

Use Estilos Primeiro para Trabalho Visual

Use refero_search quando o usuário pedir para projetar, redesenhar, melhorar, polir ou criar qualquer coisa com um componente visual.

Um estilo é uma referência de design semântica extraída de uma página web real de marketing/produto. Não é uma captura de tela e não é uma biblioteca de componentes. Os resultados da pesquisa fornecem pré-visualizações; referências de estilo completas de refero_get fornecem orientação de design como tese visual, tokens, tipografia, layout/composição, ritmo de seção, espaçamento, elevação, superfícies, componentes, tratamento de imagens, notas de implementação e regras de fazer/não fazer.

Cobertura: páginas web de marketing/produto — landing pages, páginas de preços, sites de marketing de produto, sites editoriais de marca e sites SaaS. Painéis internos de aplicativos, telas de autenticação, telas de configurações e telas de aplicativos iOS não são cobertos como sistemas de estilo. Para tarefas de UI de produto, estabeleça a linguagem visual a partir dos estilos e, em seguida, use as referências de ofício para a lógica do produto.

Use estilos para:

• aparência e sensação
• direção de marca
• landing pages e páginas de marketing
• tipografia, paleta, layout, estrutura de seção, espaçamento, raio, elevação, superfícies
• tratamentos de componentes e, às vezes, exemplos de componentes/código
• tratamento de imagens e capturas de tela de produto
• inspiração para sistema de design
• tornar uma interface genérica mais refinada

Após encontrar estilos fortes:

• use refero_get para detalhes completos
• use refero_design_md para renderizar um artefato DESIGN.md portátil
• use refero_facets para ver quais fontes, cores, temas e setores o catálogo realmente contém antes de se comprometer com uma direção

Para Padrões de Produto e Jornadas

Esta implantação não tem camada de telas ou fluxos. Quando a tarefa precisar de padrões de UI concretos (um tipo específico de tela, um estado de formulário, um layout de página de preços) ou lógica de jornada (onboarding, checkout, cancelamento):

• use as referências de ofício incluídas — elas cobrem formulários, foco, estados vazios, padrões de onboarding e ofício de conversão
• use o produto existente do usuário, capturas de tela ou sistema de design quando fornecido
• seja explícito de que esses são fundamentados em ofício, em vez de fundamentados em referência

Não invente precedentes que você não consultou.

Use Fluxo de Trabalho Visual para Imagens e QA

Para geração de imagens, opções visuais, assets gerados e QA visual, leia references/visual-workflow.md quando a tarefa precisar.

Fluxo de Trabalho de Pesquisa

1. Pesquise Direção Visual com Estilos

Para qualquer tarefa de design visual, comece aqui.

Loop recomendado:

1. Pesquise de 3 a 5 ângulos visuais diferentes.
2. Inclua uma consulta estética ampla.
3. Inclua uma consulta de domínio/categoria.
4. Inclua uma consulta de marca conhecida ou produto forte quando relevante.
5. Recupere de 3 a 4 estilos fortes com refero_get; estilos completos são grandes, então divida pesquisas maiores em vários lotes.
6. Compare o que cada estilo contribui.
7. Escolha uma base principal e pegue emprestados 1-2 detalhes específicos de outros estilos.
8. Bloqueie as características marcantes da referência principal antes da implementação.

Boas consultas de estilo e a lista de verificação de extração completa (o que extrair de cada estilo: tese, tipo, funções de cor, espaçamento, layout, componentes, imagens, estratégia de mídia, regras de fazer/não fazer) estão listadas em references/research-playbook.md.

Regra de síntese:

• Estilo primário: clima geral, densidade e estrutura.
• Estilos secundários: detalhes específicos emprestados.
• Contexto do usuário: adapte tudo ao produto, público e tarefa.
• Não use a média/intersecção de todas as referências. Se uma referência for escura, uma for ácida e uma for com serifa, a resposta não é creme quente + laranja suave + serifa educada.

Nunca apresente o resultado como "copiando X". Apresente-o como uma nova direção inspirada por várias referências.

Antes da implementação, crie um bloqueio de referência:

Referência/direção primária: [uma fonte dominante]
Preserve: [3-5 características que devem sobreviver: canvas, tipo, destaque, layout, densidade, mídia]
Empreste apenas: [1-2 detalhes secundários específicos]
Regras de função: [significados de token/componente de origem a preservar, por exemplo, apenas CTA, apenas código, apenas decorativo]
Estratégia de mídia: [real/gerado/stock/nativo em código/placeholder, com proporção de aspecto e direção de arte]
Rejeite: [padrões/médias que colapsariam a direção]
Compromissos de token: [fundo, tipo, destaque, raio, borda/sombra, tratamento de imagens, com funções]

Se a implementação se desviar do bloqueio, pare e corrija. Não suavize características marcantes em cores mais seguras, fontes mais seguras, raio mais suave ou layouts de seção genéricos. O bloqueio de referência não é clonagem; ele preserva características selecionadas enquanto adapta conteúdo, marca e detalhes de interação ao produto do usuário.

Ao combinar estilos, atribua a cada fonte um trabalho limitado. Por exemplo: uma fonte pode ficar com canvas/tipo, outra com tratamento de janela de código, e outra com CTA principal. Nunca mova um token para fora de sua função de origem: cores de CTA permanecem apenas para CTA, cores de sintaxe permanecem dentro do código, gradientes decorativos permanecem decorativos, e as regras de cartão/botão mantêm seu raio, sombra e comportamento de estado especificados.

Se o estilo principal for liderado por imagem, não o substitua por layout apenas com texto. Se você não puder produzir a imagem ou gráfico necessário, preserve o espaço com dimensões estáveis, proporção de aspecto, legenda/texto alternativo e uma breve nota de direção de arte. Construa diagramas simples, ícones, janelas de código ou primitivas geométricas apenas quando ele corresponder ao estilo de origem.

Para exploração visual substancial, mockups gerados, assets bitmap ou QA visual pós-construção, siga references/visual-workflow.md.

2. Padrões de Produto Sem uma Camada de Telas

Use as referências de ofício quando a tarefa precisar saber o que uma interface deve conter ou como produtos reais resolvem um problema específico de UI.

Necessidade	Referência
Design de formulários, estados de foco, estados vazios, tabelas, padrões de onboarding	references/craft-details.md
Cópia de CTA, sinais de confiança, tratamento de objeções, estrutura de conversão	references/copywriting.md
Seleção de componentes/ícones	references/icons.md
Funções de tipo e decisões de hierarquia	references/typography.md
Funções de cor, contraste, disciplina de paleta	references/color.md

Extraia destes:

• estrutura de layout
• hierarquia de informações
• escolhas de componentes
• padrões de CTA
• padrões de conteúdo/cópia
• estados e casos extremos
• táticas de confiança ou conversão
• detalhes concretos que valem a pena adaptar

3. Lógica de Jornada Sem uma Camada de Fluxos

Quando a tarefa tiver várias etapas ou um usuário mudar de estado ao longo do tempo, raciocine a partir do padrão de interação, em vez de reivindicar precedentes:

• ponto de entrada e estado de saída
• número de etapas
• decisões que o usuário toma
• redutores de atrito
• confirmações necessárias
• estados de salvamento/recuperação
• tratamento de erros
• momentos de retenção ou persuasão
• resposta do sistema em cada etapa

Profundidade e Síntese da Pesquisa

Combine a profundidade com o risco da tarefa e, em seguida, separe as descobertas em três grupos: direção visual (dos estilos), padrão de produto (das referências de ofício e material do usuário) e lógica de jornada (do raciocínio de interação).

Para a escada de profundidade por tipo de tarefa, os formatos de saída para cada grupo, o modelo de resumo de pesquisa e a tabela de registro de decisões, leia references/research-playbook.md.

Ofício de Design

Após a pesquisa, execute como um designer de produto sênior. Use as referências incluídas apenas quando relevante; não carregue todos os arquivos por padrão.

• Tipografia: references/typography.md
• Cor: references/color.md
• Animação: references/motion.md
• Ícones: references/icons.md
• Formulários, foco, imagens, toque, desempenho, acessibilidade: references/craft-details.md
• Copywriting e persuasão: references/copywriting.md
• Verificações anti-AI-slop: references/anti-ai-slop.md