Design system pronto para IA: guia mostra como levar o código ao Figma com MCP

O guia parte de um problema concreto: o arquivo do Figma é uma abstração, e a IA o trata como instrução completa. A autora comparou o que um componente React consegue expressar com o que um componente Figma expressa e chegou a cerca de 17% de cobertura. Para CSS, o número sobe para uns 45%, ainda longe do total. O que falta (ordem de foco, estados de erro, o que o leitor de tela anuncia, o que acontece quando uma requisição falha ou uma lista vem vazia) não aparece em screenshot, então ninguém pega na revisão.

A saída proposta é inverter o fluxo. O código é a fonte da verdade e o Figma espelha. O passo a passo usa um repositório com Storybook, um arquivo Figma vazio e o Figma Console MCP, que lê e grava variáveis direito. Primeiro vêm tokens e estilos de texto, depois dois componentes de teste (por exemplo Button e Alert). Cada elemento leva seu contexto junto: nome idêntico nos dois lados, propriedades com valores e defaults, descrição e link para o Storybook. O que não cabe no Figma vai para um arquivo GAPS.md, que vira lista revisável para levar ao dev. Para manter a paridade, um checker compara o manifest do Storybook com uma lista equivalente extraída do Figma: verde onde bate, vermelho onde divergiu.

O tema já vinha sendo coberto. Em 27 de abril de 2026, o CEVIU noticiou "Aprendendo Design Systems Agentic", com um experimento que usava o Figma Console MCP para gerar componentes Figma a partir de código, mantendo tokens sincronizados. Em 17 de agosto de 2026, "Alinhando o Design: Combatendo a Deriva em Design Systems com Estratégia e IA" tratou do descompasso entre Figma e produto. Agora o guia entrega um fluxo completo e repetível, com o código como fonte da verdade, o GAPS.md e uma checagem de paridade automatizada para atacar essa deriva.

Para quem trabalha com design system, a leitura é que o gargalo deixou de ser desenhar o componente e passou a ser documentar o que o Figma não mostra. Acessibilidade e tratamento de falhas ficam no código, e um espelho com lacunas declaradas é mais seguro do que uma fonte que parece completa. Para o usuário final, a consequência prática é menos comportamento inventado pela IA em foco, leitor de tela e estados de erro.