Da Resposta de Formulário ao Wireframe no Figma: Orquestração MCP na Prática

Meu post anterior no Dev.to descreveu a orquestração de serviços cruzados do MCP em termos gerais -- como respostas de formulários se tornam mensagens do Slack, problemas no Linear ou PRs no GitHub através de cadeias mediadas por LLM. Este post é uma implementação concreta desse padrão: um formulário estruturado de audiência do cliente cujas respostas geram automaticamente um wireframe de página de destino no Figma.

O caso de teste é a GreenLeaf Analytics, um SaaS impulsionado por IA para recuperação de carrinhos de e-commerce. Um formulário de audiência com 28 perguntas captura o contexto do negócio, público-alvo, conteúdo, preferências de design e ativos. As respostas alimentam a API do Plugin do Figma para produzir um wireframe de múltiplas seções em cerca de 3 minutos.

A Arquitetura

Dois servidores MCP, um cliente, zero integrações.

MCP Client (Claude Desktop / Cursor)
  |
  |-- 1. FORMLOVA MCP: get_responses(form_id)
  |       → JSON estruturado: 28 respostas de audiência
  |
  |-- 2. LLM: Interpreta respostas, constrói comandos da API do Figma
  |
  |-- 3. Figma MCP: create_new_file(name)
  |       → Arquivo Figma vazio
  |
  |-- 4. Figma MCP: use_figma(commands)
          → Seções do wireframe construídas via API do Plugin

O FORMLOVA não sabe sobre o Figma. O Figma não sabe sobre o FORMLOVA. O LLM lê a saída do passo 1 e constrói a entrada para os passos 3-4. Este é o mesmo padrão do post de orquestração de serviços cruzados, mas aplicado a um fluxo de trabalho específico e testável.

O Formulário de Audiência: 5 Passos, 28 Perguntas

A folha de audiência é um formulário de várias páginas projetado a partir da experiência de mais de 100 projetos de sites. A ordem dos passos reflete como um designer processa informações.

Três perguntas têm o maior impacto na precisão do wireframe:

"Elementos de design a evitar" (Passo 4). Perguntar o que os clientes gostam produz respostas vagas. Perguntar o que eles não gostam produz restrições. "Sem ilustrações de estoque." "Nada desordenado." Uma restrição negativa estreita o espaço de design mais do que três preferências positivas.

"Layout da primeira vista" (Passo 4). Cinco opções: sobreposição de foto em tela cheia, layout dividido, ilustração, texto centralizado, fundo de vídeo. Sem opções, os clientes dizem "algo bonito." Com opções, eles fazem uma escolha concreta.

"Seções a incluir" (Passo 3). Uma seleção múltipla com 13 opções -- herói, problema, solução, recursos, números, preços, depoimentos, fluxo, FAQ, equipe, blog, CTA final, contato. Somente as seções selecionadas são geradas no wireframe.

O formulário de audiência em inglês está ativo: formlova.com/WBtSAMhw9G

API do Plugin do Figma: Padrões de Implementação Chave

O use_figma do MCP do Figma executa código no sandbox da API do Plugin do Figma. Existem restrições específicas que moldam a implementação.

Limitações do Sandbox

• Sem fetch() -- sem solicitações de rede externas
• Sem carregamento de imagens externas -- todas as imagens se tornam espaços reservados cinzas
• Sem require() ou importações de módulo
• Somente fontes instaladas no ambiente do Figma estão disponíveis

É por isso que a saída é um wireframe, não um design final. Imagens não podem ser inseridas programaticamente, então cada posição de imagem é um quadro de espaço reservado rotulado.

A Restrição appendChild-then-FILL

Esta é a coisa mais importante a saber sobre o Auto Layout da API do Plugin do Figma. layoutSizingHorizontal: "FILL" só funciona depois que o quadro foi adicionado a um pai de Auto Layout.

// Funciona
mainFrame.appendChild(section);
section.layoutSizingHorizontal = "FILL";

// Não funciona -- FILL é ignorado silenciosamente
section.layoutSizingHorizontal = "FILL";
mainFrame.appendChild(section);

Esta restrição se aplica a cada atribuição de FILL em todo o wireframe -- seções, nós de texto, linhas de cartão, tudo.

O Carregamento de Fontes é Obrigatório

A manipulação de nós de texto requer fontes pré-carregadas. Definir characters sem carregar a fonte gera um erro.

await figma.loadFontAsync({ family: "Inter", style: "Regular" });
await figma.loadFontAsync({ family: "Inter", style: "Bold" });
await figma.loadFontAsync({ family: "Inter", style: "Semi Bold" });
// Deve ser concluído antes de qualquer criação de texto

A Estrutura do Quadro Principal