Dando olhos ao seu agente de IA com as especificações de design: A abordagem Lanhu MCP

Eu passei muito tempo olhando para abas do navegador, alternando entre Figma, Jira e meu IDE, tentando verificar se o preenchimento de um botão corresponde ao que está escrito no CSS. É uma tarefa de baixo valor e alta fricção que prejudica o fluxo. Quando falamos sobre 'agentes de IA' hoje, a maioria das pessoas se concentra neles escrevendo código ou resumindo texto. Mas o verdadeiro salto de produtividade não é apenas ter um agente escrevendo um componente; é ter um agente auditando suas camadas de design em relação à sua implementação sem que você precise sair do Cursor.

É isso que acontece quando você preenche a lacuna com o servidor Lanhu MCP.

O custo da troca de contexto

Se você está trabalhando em uma equipe de alto desempenho, a entrega de design é geralmente onde o impulso vai morrer. Um designer faz uma alteração no Lanhu, deixa um comentário sobre uma mudança de cor e então... nada acontece até que você perceba manualmente a notificação, abra a interface da web, encontre a camada e traduza isso de volta para o código.

Se você está usando um agente como Claude ou Cursor, esse agente atualmente está cego para sua fonte de verdade de design. Ele só sabe o que você copia e cola nele. Você pode colar uma captura de tela, claro—mas capturas de tela não fornecem os metadados estruturais. Elas não dizem se um grupo é nomeado btn-primary-container ou apenas Grupo 452.

Ao usar o servidor Lanhu MCP (disponível em https://vinkius.com/mcp/lanhu), você está essencialmente dando ao seu agente uma visão estrutural do seu espaço de trabalho de design.

Além da captura de tela: Auditoria Estrutural

A mágica não está em 'ver' o design; está em consultá-lo. Quando olhei para o conjunto de ferramentas disponíveis nesta implementação do Lanhu, uma coisa específica se destacou que a maioria das pessoas que folheiam a documentação perderia: as ferramentas list_layers e get_file.

A maioria dos desenvolvedores pensa no MCP como uma maneira de 'mostrar' uma imagem a um LLM. Isso é trivial. O verdadeiro poder reside em recuperar estruturas de nós e metadados. Com list_layers, seu agente pode percorrer recursivamente a hierarquia de um arquivo Lanhu.

Você pode solicitar ao seu agente: "Verifique as camadas no arquivo 'checkout-v1'. Existem valores hexadecimais codificados que desviam de nossos tokens de design?"

O agente não apenas olha para uma imagem; ele analisa a árvore. Ele vê os nós, identifica as propriedades e as compara com o contexto que você forneceu em seu código. Isso transforma um agente de IA de um simples codificador em um auditor de Design Ops.

O que você pode realmente automatizar

Com base nas ferramentas disponíveis neste servidor, não estamos apenas falando sobre visualizar arquivos. Estamos falando sobre orquestração:

1. Auditorias de Componentes Automatizadas: Usando list_layers e get_file, um agente pode verificar se as props do seu componente React correspondem às especificações de design (por exemplo, verificando se um valor de preenchimento no Lanhu corresponde à sua configuração do Tailwind).
2. Desenvolvimento Orientado a Comentários: A ferramenta get_comments é enorme. Em vez de procurar feedback, você pode perguntar: "Resuma todo o feedback recente dos designers sobre o projeto 'Mobile Wallet' e crie uma lista de tarefas no meu editor."
3. Descoberta de Projetos: Se você faz parte de várias equipes, use list_teams e list_project_files para permitir que o agente encontre os ativos relevantes para o recurso que você está construindo atualmente.

A Realidade da Segurança

Aqui é onde precisamos ser honestos: dar a um agente de IA acesso ao seu espaço de trabalho de design—que muitas vezes contém informações sensíveis sobre o roadmap do produto—é um grande risco de segurança. Se você estiver executando um script MCP personalizado em sua máquina local, o que acontece se esse script tiver uma vulnerabilidade SSRF (Server-Side Request Forgery)? Ou e se o agente começar a vazar detalhes dos membros da equipe através de list_members?

Quando construí o Vinkius, essa foi minha principal obsessão. Não apenas executamos essas ferramentas; nós as executamos em sandboxes V8 isolados. Cada contexto de execução tem oito políticas de governança distintas—incluindo DLP (Prevenção de Perda de Dados) e cadeias de auditoria HMAC. Quando seu agente chama get_comments, isso acontece dentro de um ambiente controlado que impede o agente de usar essa conexão para sondar sua rede interna.

Se você está construindo fluxos de trabalho de produção, 'funciona na minha máquina' não é suficiente. Você precisa de uma camada de execução que cuide do trabalho pesado de segurança e autenticação para que você possa se concentrar na engenharia de prompts.

Começando

A configuração é intencionalmente despojada de fricção. Eu odeio o momento em que um desenvolvedor tem que configurar callbacks OAuth complexos apenas para testar uma ferramenta.

1. Inscreva-se no servidor Lanhu no Vinkium.
2. Pegue seu Token de Acesso Lanhu (encontrado em suas [Configurações do Usuário] → [Token de Acesso]).
3. Cole o token de conexão no Claude ou Cursor.

É isso. Sem trabalho pesado, sem dependências quebradas.

Você pode encontrar o catálogo completo e as instruções de configuração aqui: https://vinkius.com/mcp/lanhu

Estamos caminhando para um mundo onde o IDE é o centro de toda a verdade da engenharia—não apenas código, mas design, documentação e gerenciamento de projetos. O protocolo MCP é a cola que torna isso possível. Pare de verificar manualmente; comece a orquestrar.

MCPs são a música dos Agentes de IA. Nós construímos o catálogo. Descubra Vinkius MCP Catalog.